HTML 是互联网的基石。
它定义了网站的结构，并赋予您的页面生命。
标签是 HTML 标记的一部分——它们是代码的小片段，在 SEO 和内容创建的世界中扮演着至关重要的角色。
为了正确优化您的网站以适应 Google，您需要了解各个标签的功能以及应在页面上实现哪些标签。
在这篇全面的博客文章中，我们将详细探讨：
- HTML 标签到底是什么（以及它们如何工作）
- 这些标签在 SEO 中为何重要
- 11 个必备 HTML 标签（及其属性）及其使用方法
让我们深入了解。
在 SEO 中，HTML 标签是什么？
HTML 标签是网页上的短代码片段，提供有关其内容的技术信息。
这些标签的目的在于告诉搜索引擎如何“互动”页面、如何在 Google 搜索中显示以及在网页浏览器中如何视觉上调整页面内容（以提升用户体验）。
这些标签在网页的 HTML 文档中可能是这样的：
<head>
<title>我的出色标题标签</title>
<meta name="description" content="我在搜索片段中的元描述"/>
<link rel="canonical" href="https://mywebsite.com/blog/interesting-blog-post/" />
</head>
在我们深入探讨这些标签在页面上的重要性和可用性之前，让我们快速了解一下常规 HTML 标签、元标签及其属性之间的区别。
HTML 标签 vs. 元标签 vs. 属性
虽然 HTML 标签、元标签和属性在技术上都是 HTML 文档中的小代码片段，但它们位于网页的不同位置，并在SEO和内容创建中扮演着不同的角色：
1. HTML 标签——HTML 文档中的任何标签，提供有关页面的技术信息和/或在用户和搜索引擎面前调整其内容的视觉效果。HTML 标签包括开口 <>、闭合 </> 或空标签（例如 <br/> 标签），它们之间包含特定信息（例如 H1 标题）：
“`
“`
2. 元标签——在 HTML 文档的 <head> 部分提供有关页面的上下文信息。元标签仅对搜索引擎和网页浏览器可见（例如元描述）：
<meta name="description" content="这是页面的出色元描述！">
3. 属性——提供有关 HTML（或元）标签的附加信息。它们由标签内的特殊术语组成，可以影响其行为，作为排名信号或作为搜索引擎的指令（例如 <img> 标签中的 alt="" 属性）：
<img data-src="imagename.jpg" alt="图像的替代文本">
提示： 如果您想了解更多关于 HTML 基础知识和页面结构的信息，请务必查看这篇非常有用的关于 HTML 基础的博客文章。
为什么 HTML 标签在 SEO 中如此重要？
HTML 和元标签（加上它们的属性）向 Google 指示页面的内容、网页爬虫应如何与其内容互动以及是否（或如何）在 Google 搜索中展示。
每当像 Googlebot 这样的爬虫访问页面时，它会扫描内容以及提供的标签，以更好地理解页面并进行如下决定：
- 页面是否应该被爬取和索引，以及如何爬取和索引。
- 页面对于某些搜索查询的相关性和优化程度。
- 页面在Google SERP中的显示方式。
让我们进一步分解这些点。
a) 爬取和索引
某些标签（如robots元标签）控制搜索引擎及其爬取和索引行为。
Google支持各种标签，可以指示网络爬虫 是否 以及 哪些 应该被爬取、索引并在Google搜索中排名。
从SEO的角度来看，通过标签控制爬取和索引过程可以帮助你处理网站上的各种内容问题，例如：
- 重复内容——HTML标签可以防止Google访问和索引只是彼此重复的页面（并仅显示对你重要的页面）。
- 敏感信息——你可能会考虑阻止网络爬虫访问包含用户个人信息的页面。
- 用户生成内容——标签还可以帮助你阻止由随机用户创建的内容部分（例如评论、评测、垃圾链接等）。
通过实施HTML/元标签，你可以有效地控制网站上的爬取和索引，防止在某些情况下被Google惩罚，并告诉搜索引擎哪些页面应该出现在搜索结果中。
b) 相关性和排名
页面HTML文档中的标签有助于搜索引擎更好地理解内容及其对于某些关键词的相关性。一些标签也作为Google算法中的排名因素。
尽管Google在理解网页内容方面已经非常出色，元标签和HTML标记可以进一步描述其含义并提升你网站的整体SEO。
正如Garry Illyes（Google分析师）所指出的：
“…SEO还涉及链接标签、元标签、标题元素以及HTML头部区域中的那些奇怪的内容。”
除此之外，HTML标签（如标题）可以提高内容的可读性，并提升你网站的用户体验——这可能会导致自然流量增加、更高的点击率（CTR）以及更多潜在的转化。
进一步阅读什么是SEO排名因素？（+8个确认因素的解释）
c) SERP中的可见性
最后但同样重要的是， 标签还可以影响你页面在Google搜索（以及其他平台）中的显示方式。
例如，页面头部的标题标签和元描述用于在Google搜索中创建基础摘要：
与结构化数据标记一起，它们可能以丰富结果的形式出现，并在搜索引擎结果页（SERP）中脱颖而出：
通过实施和优化HTML/meta标签，你可以显著提升在搜索引擎结果页面中的表现，改善页面性能，吸引更多用户访问你的网站。
既然已经了解了上述所有好处，现在让我们来看看最重要的HTML和meta标签（及其属性），你应该熟知这些标签。
[ 延伸阅读 2023年你需要了解的28个Google富文本片段 [指南 + 信息图]](https://mangools.com/blog/google-rich-snippets-guide/?ref=blog-further-reading)
SEO中前11个HTML标签及属性（+最佳实践）
1. Title标签
Title标签是一个写在网页 <head> 部分的小代码段，帮助搜索引擎更好地理解页面内容的主题：
<head>
<title>什么是SEO中的Title标签（以及为什么它很重要）？</title>
</head>
Google使用Title标签作为排名因素，提高页面对某些搜索查询的相关性。它还用作搜索引擎结果页面中页面片段的标题链接：
除了SEO，Title标签还用于浏览器的标题栏和标签（如Chrome, Firefox等）以提高用户体验和在已打开窗口、文件夹、书签、收藏之间的导航效果。
在页面中添加Title标签是一个相当简单的过程——如果你在使用WordPress，你可以简单地安装一个流行的SEO插件（如Yoast SEO），并在几次点击内为每个页面创建一个Title标签：
在为Google搜索编写（和优化）Title标签时，你需要记住以下几点：
- 保持简洁 – Title标签的最佳长度应在50 – 60个字符（或约600个像素）之间。过长的Title标签可能会被Google截断（或完全重写）。
- 包括核心关键词 – 尽量自然地在Title中加入你的核心关键词。
- 创建吸引人的标题 – 创作原创且有趣的标题，可以使用数字、特殊符号或能吸引更多人访问你网站的强词。
- 加入你的品牌名称 – 别忘了在Title标签的末尾加上你的品牌（或网站）名称，用连字符（ – ）或竖线（ \| ）与内容的其余部分分开。
延伸阅读 标题标签：你需要知道的所有事（+示例）
2. Meta描述标签
Meta描述是在HTML文档的 <head> 部分提供页面描述性信息的简短文本片段：
尽管meta描述在谷歌的排名算法中不扮演重要角色， 但它用于谷歌搜索中的自然片段（organic snippet）：
通过精心编写的meta描述，您可以显著提升排名页面的表现，并增加来自谷歌的整体自然流量。
类似于标题标签，您可以使用其中一个流行的SEO插件，为所有重要页面创建吸引人的描述：
以下是编写meta描述时应注意的一些良好做法：
- 保持简短 – meta描述的推荐长度在120到160字符之间。如果描述过长，谷歌可能会截断您的文本或为页面生成自己的描述。
- 简洁明了（但具有描述性） – 确保提供的meta描述能用简短的字数总结您的内容。
- 编写独特的内容 – 尽量创建有吸引力的meta描述，为谷歌用户提供价值，使他们更频繁地点击您的页面。
- 包含重点关键词 – 尽管不是必须的，但您可以尝试将重点关键词包含在描述中，使其对用户看来更相关。
提示： 您可以在我们的 免费SERP模拟工具 中测试meta描述（和标题标签）的长度和外观，看看您的片段在SERP中的实际样子：
进一步阅读 什么是meta描述及如何编写？
3. 标题标签
标题（H1, H2, H3等）是在页面上可见的、具有语义的HTML标签，用于将内容划分为各个部分：
“`
“`
标题标签的目的是逻辑地结构化页面内容，使其对用户（和搜索引擎）更具可读性。
标题也是许多排名信号之一，有助于谷歌评估该页面对某些关键字的相关性：
“…谈到页面文本时，标题是一个非常强的信号，告诉我们：‘页面的这一部分是关于这个主题的…’” （John Mueller, 谷歌搜索倡导者）
除此之外，页面上良好的标题结构还可以影响来自Google的自然流量——根据Semrush的研究，拥有复杂标题结构（H2, H3, H4）的页面表现出色，远胜于那些没有任何标题的博客文章。
页面上合理优化的标题也可以作为特色片段显示（针对某些搜索查询）：
当在WP文本编辑器中创建、编辑和优化内容时，请确保遵循标题标签的层次结构：
<h1>标签 – 页面的主标题，位于页面顶部。该标签应代表内容的主要思想/主题（并包含您的焦点关键词）。<h2>标签 – 将文章的主题分为几个主要点（或章节）。您可以考虑自然地在页面上的一些H2标签中添加焦点关键词（或次要关键词）。<h3>和<h4>标签 – 支持标签（或子章节），提供关于主题的额外信息。<h5>标签 – 可选标签，您可以在非常全面的文章中使用。
4. 图片alt属性
图片alt属性（或alt文本）是 <img> 标签内对图片的描述，有助于视障用户和搜索引擎更好地理解图片内容：
<img data-src="pizza.png" alt="一小片披萨放在大陶瓷盘子上">
虽然Google的图像识别技术越来越强，但其仍使用替代文本以更好理解图片的上下文及其与网页整体内容的关系。
通过合理优化 alt="" 属性，您的部分图片也可能出现在Google图片搜索中—— 这可能会为您的网站带来少量自然流量的增加：
在WordPress中，您可以手动在WP编辑器或 媒体 » 媒体库 中为所有重要图片添加alt文本：
这里有一些好的实践方法，帮助您合理优化图片的alt属性：
- 详细描述 – 确保编写相关且准确的替代文本，能够清楚地描述图像内容。
- 简明扼要 – 替代文本不应超过约125个字符。搜索引擎和屏幕阅读器可能会忽略长度超过此限制的替代属性。
- 包含关键字 – 如果合适，可以在最重要的替代文本中谨慎地加入核心关键字。然而，不要为了添加关键字而填满替代属性。
进一步阅读图片替代文本：概念、原因、时间（以及最佳实践）
5. 链接属性
链接属性是 <a> 标签的一部分——一个可见的、可点击的超链接，可以引导用户（和网络爬虫）从一个页面到另一个页面：
<a href="https://mangools.com/blog/referring-domain/">referring domain</a>
超链接、它们的锚文本，以及属性是SEO的重要组成部分 – 它们提升（并控制）你网站的可爬行性，在Google的算法中充当排名信号，导航用户到其他有用的页面并改善整体用户体验（UX）。
根据你的内部和外部链接策略，你可以利用各种链接值和属性，这些属性由Google支持，从而改善你的网站结构，控制PageRank（链接权重）的传播，或调整你反向链接的强度：
锚文本– 是锚文本标签中的可见文本，用户可以点击。锚文本还可以帮助搜索引擎如Google更好地理解链接页面的内容。href=""– href是锚文本标签的一个基本属性，它指定了链接的目标地址（URL）。rel="nofollow"– 提示网络爬虫不要考虑链接的任何相关性信号（例如其锚文本、链接页面的PageRank等）。rel="sponsored"– 向Google表明该超链接是某种广告或赞助的一部分（即付费链接），应被忽略。rel="ugc"– “ ugc”（用户生成内容）属性告诉搜索引擎，页面上的链接是由随机用户创建的（例如在评论区或论坛页面），不应被考虑。
你也可以将这些属性相互结合，以向Google更多地说明超链接的性质：
<a rel="ugc, nofollow" href="https://mangools.com/kwfinder/">KWFinder</a> <a rel="sponsored, nofollow" href="https://mangools.com/kwfinder/">KWFinder</a>
重要提示： 请记住，Google将 "nofollow"， "sponsored" 和 "ugc" 属性视为提示， 而非指令。
自2020年Nofollow更新，是否以及哪些属性应被考虑用于爬行、索引或排名，这取决于Google的决定。
如果您希望阻止搜索引擎访问或索引您网站上的某些页面，您应该考虑使用其他方法来阻止内容。
延伸阅读 nofollow vs. dofollow链接：有什么区别？
6. Robots meta标签
Robots meta标签是控制页面在Google搜索中如何被抓取和索引（以及展示）的指令。与其他“ 元数据”类似，robots meta标签必须放在页面的 <head> 部分：
<head>
<meta name="robots" content="noindex, nofollow">
</head>
Robots meta标签的目的是通知Google哪些页面需要抓取和索引，哪些页面应该被忽略，以便保护您的排名并避免将PageRank和其他排名信号传递给不重要的页面。
根据您的网站情况，您可能需要将robots meta标签应用到各种类型的页面和内容上，例如：
- 重复内容 – 您可以在彼此重复的页面上实现robots meta标签。
- 自动生成的内容 – 在某些情况下，您可能会使用某些软件在网站上生成自动内容（例如用于自动翻译、内部搜索结果页面等）。在这种情况下，重要的是阻止Google访问这些内容，避免受到Google算法的惩罚。
- 用户生成内容（UGC） – 类似于自动生成的内容，UGC可能会带来更多的危害，特别是如果它只是由互联网随机用户创建的低质量内容（例如长评论、用户生成的链接等）。
- 空白或无效页面 – 最后，您可能还需要阻止爬虫访问那些没有任何价值或不应该出现在Google搜索中的页面（例如维护中的页面）。
Robots meta标签包含两个主要属性： name="" 属性指定哪些网络爬虫应该“遵循”该标签（例如Googlebot），而 content="" 属性指示爬虫如何与页面上的内容互动。
您可以在 content="" 属性中放入几个重要的值（或规则）：
"noindex"– 防止搜索引擎对网页进行索引（并在Google搜索中显示）。"nofollow"– 禁止爬虫访问网页上的任何链接。"noarchive"– 防止Google在搜索结果中生成页面的缓存链接。
您可以在一个页面中放入多个robots meta标签，或者将它们的属性组合成一个标签：
<meta name="robots" content="nofollow">
<meta name="googlebot" content="noindex, nofollow">
Robots meta标签可以手动实现，也可以通过插件如Yoast SEO实现：
提示： 如果您想了解更多关于robots meta标签（及其使用）的技术细节，请查看Google Search Central的官方文档。
7. Canonical标签
规范标签帮助搜索引擎，比如谷歌，从众多相同或非常相似的页面中识别出主要的标准版本：
<link rel="canonical" href="https://mangools.com/"/>
例如，您可能有一个产品页面可以通过多个URL访问（例如，由于用于筛选的URL参数）：
http://homepage.com/shoes/black-sneakers.html
http://homepage.com/shoes/black-sneakers.html?Size=38
http://homepage.com/shoes/black-sneakers.html??Size=38&color=black
在这种情况下，告知谷歌哪个URL应正确索引并作为主要页面排名，以及哪些版本应完全忽略，这是非常重要的。
规范标签可以帮助您解决这个问题，并向搜索引擎 表明只有1个主要页面应被考虑。
Rel=canonical 标签还带来一些重要的SEO好处，例如：
- 整合网页排名 —— 通过通过规范标签将其他重复页面指向标准页面，您可以增强标准页面的链接强度。
- 改进爬虫抓取 —— 规范标签告诉网页爬虫忽略重复的内容版本，专注于抓取主要的原始页面。
- 内容分发 —— 规范标签可以帮助谷歌更好地理解应在搜索引擎结果页中显示哪个URL版本的页面。
与其他meta标签类似，您可以直接在页面的 <head> 部分添加规范标签，或者使用其中一个流行的SEO插件，让它们自动为您实现：
进一步阅读什么是规范标签（以及如何使用）？
8. Meta viewport 标签
Meta viewport 标签指导网页浏览器如何在各种设备（例如桌面、移动设备、平板电脑等）上渲染和显示页面：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
自从2015年的移动友好更新以来，Meta viewport 标签还向谷歌表明您的网页是移动友好的，可以作为移动搜索结果显示。
Meta viewport 标签通常已在大多数流行的网站主题（或通过CMS）中实现，但始终最好手动检查搜索引擎（例如谷歌）是否将您的网站视为移动友好。
为此，您可以使用如谷歌的移动友好测试或谷歌搜索控制台等工具，检查您的页面是否针对移动设备进行了优化（并包含Meta viewport标签）：
注意: 请记住，手动在页面的 <head> 部分添加视口标签 并不自动意味着您的网站对移动设备友好。
如果存在技术问题导致内容无法在某些移动设备上正确显示，您应该寻求网站开发人员的帮助。
9. 结构化数据
结构化数据（或模式标记）是一组组织良好的页面标签，通过标记内容提供更多上下文信息：
实施结构化数据可以提供两大主要的SEO优势：
- 它帮助Google更好地理解内容（并将其显示给更相关的搜索查询）。
- 它用于丰富摘要（可以提升网页在Google搜索中的点击率）。
模式标记可以应用于各种类型的内容（例如“ 食谱”、“ 操作指南”、“ 事件”、“ 产品”标记等），并能显著提高您的SEO表现。
根据您的选项（和技术喜好），您可以通过多种方式生成结构化数据：
- 手动编写标记 – 如果您有一些编码经验，可以自行手动编写并添加结构化数据到所有页面。
- 使用标记生成器 – 可以使用结构化数据标记助手或数据高亮器生成结构化数据，并标记内容的各个部分。
- WordPress 插件 – 像Yoast SEO或Schema App这样的模式插件可以为您自动生成和实施结构化数据。
提示: 您可以使用我们的Mangools SEO 扩展工具窥探竞争对手，查看他们使用了哪些结构化数据！
该工具可以让您简要了解页面上的结构化数据格式，以及所有实施的模式类型和属性：
除此之外，您还可以使用该扩展获取所选网页的整体SEO状况，并查看关于它的各种重要数据，例如：
- 页面权威性（以及整个网站的权威性）
- 当前页面的排名关键词
- 反向链接资料
- 页面SEO（元标签、结构化数据、标题等）
延伸阅读 什么是SEO中的结构化数据以及它如何工作？
10. Open Graph及Twitter卡片标签
Open Graph（OG）和Twitter卡片（TC）是一组用于在社交媒体平台（如Facebook、Twitter、LinkedIn等）上创建吸引人片段的元标签：
<meta property="og:title" content="My Awesome Facebook Title!">
<meta name="twitter:title" content="My Awesome Twitter Title!" />
虽然这些标签不是SEO必须的，但它们可以给你更多的灵活性来决定你的网站页面在不同平台上的展示方式 —— 这可能会带来更多的流量以及更高的转化率：
根据你推广内容的平台，你可以考虑使用像Yoast SEO或All-in-One SEO这样的插件来生成OG和TC标签，或者手动编写并将它们添加到页面头部。
有关社交媒体标签、它们的组合及可能的用途的更多信息，请查看：
- Open Graph 协议文档
- Twitter 开发者平台
额外标签： 在创建和优化内容时，你可能会发现以下几个HTML标签有用：
<table>标签 – 你可以对内容及其结构进行标记以创建表格。<ol>标签 – 将内容修改为有序列表。<ul>标签 – 将内容修改为无序列表。
虽然这些标签对于SEO来说并不重要，但它们可以帮助Google更好地理解你的内容结构，并增加页面某些部分以特色摘要形式出现的机会：
11. Hreflang标签
hreflang 标签是一种HTML属性，用于指定网页的语言和地理定位。
它帮助搜索引擎了解应向用户显示哪个语言和区域版本的页面。
hreflang标签示例：
<link rel="alternate" href="http://example.com/en-us" hreflang="en-us" />
<link rel="alternate" href="http://example.com/fr-fr" hreflang="fr-fr" />
hreflang 标签对于拥有多语言和多国家受众的网站至关重要。
由于这个功能，用户能够基于他们的语言和位置，看到正确版本的页面，从而减少跳出率并提升用户体验。
正确的实现涉及指定所有的语言变体，并确保它们相互之间正确链接。
那关键词meta标签呢？
一些人（不幸的是）仍然认为Google会将关键词meta标签作为SEO的排名信号之一：
你在优化网页时还会使用meta关键词标签吗？
— Bill Slawski ⚓ 🇺🇦 (@bill_slawski) 2020年5月29日
Google自2009年起就不再使用关键词meta标签了 —— 这一点已经通过多个SEO专家和Google代表多次确认：
事实上，某些搜索引擎（例如Bing）将关键词meta标签视为一种垃圾信号，可能会对你的网站SEO产生负面影响。
如果你仍在使用关键词meta标签，也许你应该彻底将它们移除，并专注于SEO的其他重要方面 🙂
总结：
HTML是互联网的基石，它不仅定义了网站的结构，还给网页赋予生命。作为代码的小片段，HTML标签在SEO和内容创建中扮演着重要角色。在SEO中，HTML标签告诉搜索引擎如何与页面互动、在Google搜索中展示以及如何调整页面内容以提升用户体验。文章详细介绍了HTML标签、元标签和属性的区别，包括Title标签、Meta描述标签、标题标签、图片alt属性、链接属性、Robots meta标签、Canonical标签、Meta viewport标签、结构化数据、Open Graph及Twitter卡片标签和Hreflang标签等11个必备HTML标签及其属性。这些标签对于优化SEO和提升网页性能至关重要。
在了解了HTML标签对SEO的重要性后，不妨尝试将这些知识应用于实际的私域流量管理中。使用光年AI，您可以通过AI的强大能力实现智能化的私域流量管理，精准触达每一位潜在客户。光年AI不仅可以提高流量转化率，还能为您提供全面的营销策略优化，让品牌影响力大幅提升。选择光年AI，让AI驱动的私域流量管理开启新时代，助力您的业务快速突破市场。
