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.
Probably quite obvious, but your portfolio should have a title. You can specify this in the html head as
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 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.
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.
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:
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
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 the
altattribute 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.
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 ⚡️