loading...
Cover image for SEO tips for your developer portfolio

SEO tips for your developer portfolio

rossellafer profile image Rossella Ferrandino ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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.

<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" />
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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

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

Discussion

pic
Editor guide
Collapse
itsasine profile image
ItsASine (Kayla)

100 SEO score on Lighthouse

I love that my portfolio has a 90 score on Lighthouse because I have a robots.txt file that disallows crawlers. My SEO would be great if I allowed search engines :P That should be an automatic 0 not a 10 point ding.

Collapse
rossellafer profile image
Rossella Ferrandino Author

Good point, I did not include a robot.txt file in my project so I didn't mention this in the article. I could not find any reference about the Lighthouse score being impacted by the presence of a robot.txt file, just some recommendations about fixing invalid syntax in the file. Source here.

Collapse
itsasine profile image
ItsASine (Kayla)

My specific result is is crawlable which I misremembered since it cares more about noindex than the robots.txt (I really don't care to have my name on search results). But the gist was right where since the page can't be indexed, I lost 10 points. But since it can't be indexed, the rest of the idea of being "Search Engine Optimized" is silly. I like having a perfect 90 moreso for accessibility since good SEO tends to mean an optimized site for assistive tech.

Collapse
renaissancetroll profile image
Renaissance Troll

I actually made a video covering this, but it basically turned into a joke when I realized that Google doesn't follow their own rules and most of their sites score horribly on their own tests
dev.to/renaissancetroll/google-doe...

Collapse
dailydevtips1 profile image
Chris Bongers

Great tips! Love how the web is getting more and more about speed and optimising these days.

Collapse
rossellafer profile image
Rossella Ferrandino Author

Thank you so much! Lighthouse is a great tool to know exactly what to do to improve both of these :)

Collapse
lemaywebdesign profile image
John LeMay

I am new to SEO and this was tremendously helpful!

Collapse
rossellafer profile image
Rossella Ferrandino Author

Thank you so much, John!

Collapse
madza profile image
Madza

Nice portfolio, also played Rock, paper, scissors a bit 😂😂

Collapse
rossellafer profile image
Rossella Ferrandino Author

Thank you so much! Rock, paper, scissors... it never gets old! 😂

Collapse
andrewbaisden profile image
Andrew Baisden

Cool tips I would like to get a 100 across the board on lighthouse for my website one day. FYI you can add syntax highlighting to your code blocks when you post.

Collapse
andrewbaisden profile image
Andrew Baisden

Good tips here I think that SEO sometimes gets left till last or forgotten by some developers.