SEO tips for your developer portfolio
Tags: html, portfolio, showdev, seo
Published: 2020-08-31 13:47:15

As a front-end developer, I am often working on client websites to optimise their SEO. This week, I applied some of these strategies to my developer portfolio, which now has a 100 SEO score on Lighthouse 👩‍💻.  
I will share some advice with you here. By all means, this is not an exhaustive list but it's a good place to start. If you want to check out my portfolio, I added a link to this at the bottom of the article.

###Title, language and viewport
Probably quite obvious, but your portfolio should have a title. You can specify this in the html head as `<title>My portfolio</title>`.
What is not so obvious is that defining the language and the viewport on your site will impact your Lighthouse score. The language is important for those users that utilise screen readers, while the viewport meta tag will optimise your app for mobile screens.
 
```
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, 
      shrink-to-fit=no"
    />
  </head>
  <body>
  </body>
</html>
```

###Meta tags
Meta tags are snippets of code that give search engines information about your website. The basic ones are title, which I already mentioned, and description. This is the information that is displayed in the Google search results, so it should be concise and to the point. You can also add keywords to your page, but I haven't implemented this yet.

```
<meta name="description" content="JavaScript wizard, chaotic good">
<meta name="keyword" content="portfolio, javascript, developer">
```

###Meta tags for social media
This is not 100% necessary, but it is a nice to have if you want to share your portfolio on Slack, Twitter, etc.
These meta tags turn your web pages into graph objects through the [Open Graph Protocol](https://ogp.me/).

```
<meta property="og:title" content="Myrtis Beaverdam | Front End Web Developer"/>
<meta property="og:description" content="JavaScript wizard, chaotic good" />
<meta property="og:image" content="https://example.com/image.jpg"/>
<meta property="og:url" content="https://example.com" />
<meta property="og:type" content="website" />
``` 
Twitter has its own set of meta tags. You can either use the summary card (title, thumbnail image and description) or the summary card with large image, which is the one I prefer. This is an example markup:

```
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Myrtis Beaverdam | Front End Developer" />
<meta name="twitter:description" content="JavaScript wizard, chaotic good"/>
<meta name="twitter:image" content="https://example.com/image.jpg"/>
```

If you want to check what your Twitter card will look like, you can use the Twitter card validator here: https://cards-dev.twitter.com/validator

###Accessibility 
Two important points related to accessibility impact your SEO score, however Lighthouse reports have many more insights on accessibility, which I highly recommend checking.

1. Images need to have descriptive `alt` attributes. If the `alt` attribute is just an empty string, this will be removed from the accessibility tree. 

2. Another point related to accessibility that I discovered with this portfolio iteration is the that each anchor tag should have some descriptive text. Using anchor tags with icons (and not text) for my social media profiles was negatively impacting my score, and I discovered that attribute `aria-label` resolves this particular issue.

###Favicon
This is a bonus tip and it is not really related to SEO (but it's a nice to-have). You can include a favicon in your project. This is what will be displayed in the browser tab, just before your website title. This is how you add it to your code:

`<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />`

___

Thank you for reading, I hope this list can be helpful. 
Here is the link to my [portfolio website](https://rossellafer.github.io/fcc-portfolio/)

Feel free to ask questions and add any other recommendation you think might be useful ⚡️