HTML tags for SEO success Introducing HTML tags for SEO Conclusion

2025-05-27

SEO 成功的 HTML 标签

引入用于 SEO 的 HTML 标签

结论

你创建了一个网站，却不知道为什么访客不多？你尝试过用 Facebook 或 Instagram 推广你的页面，甚至为此花费了巨额资金才达到一定数量的访客？让我再问你两个问题：
你知道自然排名比付费搜索带来更多流量吗？你知道有一些免费的方法来吸引更多访客吗？好吧，这正是我在这篇文章中要讨论的内容。如果你感兴趣，请继续阅读，希望你能找到一些你之前不知道的好技巧。事不宜迟，让我们开始吧！

引入用于 SEO 的 HTML 标签

要想保持一致，HTML 标签是什么？（你可能想看看我之前的文章） HTML 标签是 HTML 代码片段，它们为我们在网络上看到的视觉内容提供方向，也告诉搜索引擎如何“阅读”你的内容。事实上，它们对网页排名有很大的影响。它们可以提供更好的导航（更多流量），帮助查询匹配，引导搜索引擎在哪里找到相关信息。此外，它们还能让你个性化社交媒体文章的显示方式。最终，SEO 的 HTML 标签决定了你的
网站获得良好排名的可能性。为了方便初学者阅读，我选择了最常用的 HTML 标签，以便你可以将它们添加到你的网页中：

标题标签

这些是您可以包含在标题元素中的标签。

1. 标题标签

标题标签基本上描述了您的内容是什么。

<title>My fancy title</title>
Enter fullscreen mode Exit fullscreen mode

替代文本
您在搜索引擎结果页面中首先看到的确实是标题标签。如果您的标题没有引起用户的兴趣，他们就不太可能点击链接。此外，标题标签会显示在浏览器标签页上，因此如果您打开了多个标签页，标题可以帮助您更轻松地找到用户想要的标签页。最后，当有人在社交媒体上分享您的链接时，标题也会显示。

关于标题标签的一些建议：

  • 不要在标题中堆砌关键词，因为谷歌可能会将其修改为与内容更相关的标题。因此，请确保标题忠实地描述内容。
  • 保持长度在 70 个字符以内，如果标题很长，请记住字符占用了多少空间，以免被截断（您可以使用 & 代替 and，“/”代替 or 等​​）
  • 您的关键词应该位于标题的开头，以便于容易发现。
  • 不要在您的网站上重复相同的标题，Google 可能会认为您的网站有重复的内容而对其进行惩罚。
  • 如果您是一个知名品牌，您可以在标题末尾使用品牌名称，这将为您的标题增加更多价值，同时专注于标题本身，除非它是主页/关于/联系我们页面。

2. 元描述标签

一个吸引人的描述可以帮助吸引用户在搜索引擎结果页面 (SERP) 上点击你的搜索结果。HTML 代码如下：

<meta name="description" content="Some catchy description">
Enter fullscreen mode Exit fullscreen mode

以下是该描述在 SERP 中的显示方式：

替代文本

请注意，有时，Google 可能会引用您网页的副本，因为这样做比引用您的描述更符合查询要求。虽然此标签并非排名因素，但我相信大多数人都会在点击之前本能地查看描述，而且当用户在社交媒体上分享您的网址时，描述也会显示出来！

关于元描述标签的一些建议：

  • 我可以建议您编写与您的页面内容最匹配的描述，同时避免重复的描述。
  • 另外，避免使用字母数字字符，例如，当您使用引号时，Google 会忽略中间的句子，因此最好不要使用任何字母数字字符。
  • 再次强调，请记住长度，因为只会保留前 150-160 个字符，其余部分将被删减；并确保在开头包含最相关的内容。

3. 开放图谱标签

开放图谱标签是 Facebook 开放图谱协议的一部分，您可以在网页的头部找到它们。创建它们的目的是为了控制页面信息在社交媒体上的呈现方式，这意味着它们会影响链接在社交媒体上的表现。所有主流平台都认可它们，并被广泛使用（例如谷歌、领英、推特等）。

替代文本

4. Twitter卡片

Twitter 卡片与开放图谱标签非常相似；事实上，如果 Twitter 没有卡片，就会使用开放图谱标签。开放图谱标签仅供 Twitter 使用。

5. 机器人标签

Robot 标签是一小段代码，用于告诉搜索引擎您要索引哪些页面，以及哪些页面不需要。这样，某些页面就可以被忽略。如果您认为某些页面不应该被索引，但仍想保留它们，Robot 标签或许能帮助您避免一些问题。如果不包含此标签，搜索引擎会默认索引您的所有页面。以下是 HTML 代码示例：

<meta name="robots" content="index, follow">
Enter fullscreen mode Exit fullscreen mode

您可以在机器人标签中指定以下参数：

  • noindex：阻止索引页面。
  • nofollow：阻止搜索引擎跟踪页面上的链接的全局性。
  • noarchive：阻止页面的缓存副本出现在搜索结果中。
  • nosnippet：阻止页面描述出现在搜索结果中，以及缓存页面。
  • none：用于“noindex，nofollow”。

6. 规范标签的优先级

如果您的页面内容相同，则可以使用此标签选择哪个页面具有更高的优先级：

<link href="https://www.facebook.com/HildweigDev" rel="canonical">
Enter fullscreen mode Exit fullscreen mode

这是一个很棒的技巧，可以解决我们上面讨论的重复内容问题！

7. 响应式网站

响应式网站是指以友好的方式呈现在桌面和移动屏幕上的网站。Google 会优先考虑响应式的网站，而不是无响应的网站。但它如何知道这些网站是响应式的呢？只需查看以下代码片段即可：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

以上就是可以在 head 元素中添加的标签。现在，让我来展示一些可以在 body 元素中添加的实用标签！

身体标签

这些是您可以包含在 body 元素中的标签

1. 标题标签获胜！

你们中有多少人会在浏览页面内容之前先滚动浏览标题，然后再阅读实际内容？这是一种用法。就 SEO 而言，使用标题意味着您可以更有效地告诉搜索引擎您的内容究竟是关于什么的。Google 还会使用标题在搜索特定主题时创建一些类似列表的摘要：关于标题的一些建议：
替代文本

  • 每页最好使用一个 h1 标题，对于价值较低的标题，可以使用 h2 标题，必要时再使用 h3 标题，以此类推。巧妙地使用标题，可以使每个部分的内容清晰明了。
  • 在标题中包含关键词或其同义词也是一种很好的做法，但尽量不要塞满它们，好吗？

2. 图像的 Alt 属性

Alt 属性是图像标签的一部分，它不仅可以在图像显示不正确时提供替代文本，而且对于搜索引擎也很有用，以便他们知道该图像代表什么。

<img src="url" alt="A clear description">
Enter fullscreen mode Exit fullscreen mode

关于 alt 标签的一些建议：

  • 没有必要优化每个图像描述，只关注那些能为你的内容增加价值、提供一些有用信息的描述。
  • 再次，如果您包含关键字（但不要过度使用），您可以从使用它们中受益。
  • 使描述清晰、简洁。

3. 善用链接

一个好的做法是将您的页面链接到您网站内的其他页面，以增加网站流量。这称为内部链接，而外部链接则是指向其他网站页面的链接。链接还能帮助搜索引擎找到并索引您网站的页面。以下是谷歌的引述：

有些页面之所以为人所知，是因为 Google 之前已经抓取过它们。而有些页面则是 Google 通过已知页面的链接跳转到新页面时发现的。

另一件事是，如果您想使用外部链接并让搜索引擎忽略该连接，或者当您链接到域名权限较差的网站时，请使用“nofollow”属性：

<a href="https://www.facebook.com/HildweigDev" rel="nofollow">Maybe you want to follow my page?</a>
Enter fullscreen mode Exit fullscreen mode

结论

今天就到这里。恭喜你读完了整篇文章！生活中的大多数事情都不是我们可以掌控的，但这一次，这些努力，你的奉献，都在你自己的掌控之中。如果你喜欢这篇文章，请告诉我！如果你还有其他想分享的技巧，也欢迎在评论区分享！
以下是我们今天讨论的标签的总结：

替代文本
再见！

文章来源：https://dev.to/hiidweig/html-tags-for-seo-success-l1j
Devto 翻译
PREV
GitHub Foundations 认证现在免费！💲 🇧🇷
NEXT
如何使用 Telegram 发现用户的 IP 地址。