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.
<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.
Images need to have descriptive
altattributes. If thealtattribute is just an empty string, this will be removed from the accessibility tree.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-labelresolves 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 ⚡️
Top comments (14)
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.
Good point, I did not include a
robot.txtfile 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 arobot.txtfile, just some recommendations about fixing invalid syntax in the file. Source here.My specific result is is crawlable which I misremembered since it cares more about
noindexthan therobots.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.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...
I am new to SEO and this was tremendously helpful!
Thank you so much, John!
Great tips! Love how the web is getting more and more about speed and optimising these days.
Thank you so much! Lighthouse is a great tool to know exactly what to do to improve both of these :)
Nice portfolio, also played Rock, paper, scissors a bit 😂😂
Thank you so much! Rock, paper, scissors... it never gets old! 😂
Not new to me but that is really helpfull.
Good tips here I think that SEO sometimes gets left till last or forgotten by some developers.
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.
I am new to SEO and had never heard of Lighthouse until now. This was very helpful!