针对您的开发人员组合的 SEO 技巧

作为一名前端开发者，我经常为客户网站优化 SEO。本周，我将其中一些策略运用到我的开发者作品集中，现在它在 Lighthouse 👩‍💻 上的 SEO 评分高达 100 分。

我会在这里分享一些建议。当然，这不是一份详尽的清单，但它是一个不错的起点。如果您想查看我的作品集，我在文章底部添加了链接。

标题、语言和视口

可能很明显，你的作品集应该有一个标题。你可以在 HTML 的 head 部分中以的形式指定它<title>My portfolio</title>。
不太明显的是，网站的语言和视口设置会影响你的 Lighthouse 评分。语言对于使用屏幕阅读器的用户来说很重要，而视口元标记则会优化你的应用以适应移动屏幕。

<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>

元标签

元标签是一些代码片段，用于向搜索引擎提供有关您网站的信息。最基本的标签是标题（我之前提到过）和描述。这些信息会显示在 Google 搜索结果中，因此应该简洁明了。您还可以在页面中添加关键字，但我还没有实现。

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

社交媒体的元标签

这不是 100% 必要的，但如果您想在 Slack、Twitter 等上分享您的作品集，这是一个不错的选择。这些元标记通过开放图形协议
将您的网页变成图形对象。

<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 有一套自己的元标签。你可以使用摘要卡（包含标题、缩略图和描述），也可以使用带有大图的摘要卡（我更喜欢后者）。以下是示例标记：

<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"/>

如果您想检查您的 Twitter 卡片的外观，您可以使用此处的 Twitter 卡片验证器：https://cards-dev.twitter.com/validator

可访问性

与可访问性相关的两个重要点会影响您的 SEO 分数，但是 Lighthouse 报告对可访问性有更多见解，我强烈建议您查看。

图像需要具有描述性alt属性。如果alt属性为空字符串，则会从可访问性树中移除。
在这次作品集迭代中，我发现与可访问性相关的另一个要点是，每个锚标签都应该包含一些描述性文字。在我的社交媒体资料中使用带有图标（而不是文字）的锚标签会对我得分产生负面影响，而我发现该属性aria-label可以解决这个问题。

网站图标

这是一个额外的技巧，它与 SEO 并无太大关系（但最好还是有的）。你可以在项目中添加一个网站图标。它会显示在浏览器标签页中，就在网站标题之前。你可以在代码中添加如下方法：

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

感谢您的阅读，希望这份清单对您有所帮助。这是我的投资组合网站
的链接。

欢迎随时提问并添加您认为可能有用的任何其他建议⚡️

文章来源：https://dev.to/rossellafer/seo-tips-for-your-developer-portfolio-26fm