Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 31, 2020 01:47 pm GMT

SEO tips for your developer portfolio

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.

  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


Original Link: https://dev.to/rossellafer/seo-tips-for-your-developer-portfolio-26fm

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To