HTML meta 标签详解<meta />标签定义了关于 HTML 文档的元数据。它可以用于向搜索引擎和网站访问者描述你的页面内容。其中一些 meta 标签对 SEO 有着至关重要的影响。在本文中，我们将讨论需要关注的最重要的元标记。
如果你对 meta 标签还不太了解，推荐阅读【HTML 的 meta 标签详解】
1. Title 标签
<title>页面标题</title><title />标签可以说是最主要、最重要的 SEO 优化的元素。它将直接显示在搜索引擎的结果页里面，社交媒体分享，浏览器的标签页都将直接使用这个标题。
搜索结果将显示如下：
标题对于让用户快速了解搜索结果的内容至关重要。这是用户对你网页的第一印象，它通常是决定点击哪个结果的重要影响因素，因此在你的网页上使用高质量的标题很重要。
最佳实践
-
为每个页面写一个唯一的标题标签
-
简短但具有描述性
-
避免通用和模糊的标题
-
创造一些值得点击的东西，抓住用户的好奇心
-
去猜测搜索意图，尽量匹配上
-
包含长尾关键字
-
保持在 60 个字符以内， 超过这个长度搜索引擎会将标题截断
2. Meta Description 标签
<meta name="description" content="页面的描述">该 meta 标签用于描述总结页面的内容。搜索引擎经常将其用于搜索结果的片段中，放在标题下面。它占据了搜索结果片段的很大部分的内容，内容的好坏很大程度上会影响用户是否点击这个结果，你需要设置一个引人注目的描述。谷歌不使用描述作为排名英语。
最佳实践
-
给每个页面一个独特的描述，并清楚地反映内容
-
描述必须既真实又吸引人，
-
Google 的摘要通常最多可包含 150-160 个字符（包括空格）
-
包括你最重要的关键字，以便它们可以在搜索结果页上上突出显示，但要小心避免关键字堆砌
3. 标题标签（h1-h6）
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>标题标签是 HTML 标签，HTML <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。它可以用来识别内容的结构层级。
现在标题标签不再是搜索引擎排名因素，标题标签中添加关键字，不一定可以使你的排名更好，但是对爬虫来说理解组织良好的内容更为容易。同时也方便用户理解页面内容。
最佳实践
-
给每个页面一个独特的描述，并清楚地反映内容
-
描述必须既真实又吸引人，
-
Google 的摘要通常最多可包含 150-160 个字符（包括空格）
-
包括你最重要的关键字，以便它们可以在搜索结果页上上突出显示，但要小心避免关键字堆砌
4. 图片 Alt 属性
<img src="http://example.com/xyz.jpg" alt="xyz" />图片的 alt 属性被添加到<img />标签以描述其内容。
Alt 属性在页面优化方面很重要，原因有两个：
-
如果无法加载任何特定图像（或图像被禁用），则会向访问者显示替代文本。
-
搜索引擎无法读取图像，你应该为图像添加适当的替代文字，以便搜索引擎知道如何解释它们
最佳实践
-
始终使用正确的描述，切勿在此标签中填充关键字
-
使用信息丰富的文件名，且清楚明了
-
创建图像站点地图
-
在替代文本中使用 50-55 个字符（最多 16 个单词）
5. Robots Meta 标签
机器人元标记告诉搜索引擎索引或不索引你的网页。我们在【HTML 的 meta 标签详解】也介绍过。
该标签对搜索引擎爬虫有四个主要值：
-
follow - 搜索引擎爬虫将跟随该网页中的所有链接
-
index – 搜索引擎爬虫会索引整个网页
-
nofollow – 搜索引擎爬虫不会跟踪页面和该网页中的任何链接
-
noindex – 搜索引擎爬虫不会将该网页编入索引 为你的机器人元标记使用以下语法：
<meta name="robots" content="noindex, nofollow"> 表示不索引或不关注本网页。<meta name="robots" content="index, follow"> 表示索引并关注这个网页。最佳实践
-
仅当你想限制搜索引擎抓取页面时才使用 Robots meta 标签
-
不要在 robots.txt 中屏蔽带 Robots meta 标签的页面；
6. Canonical 标签
<link rel="canonical" href="https://www.website.com/page/" />rel="canonical" link 标签为类似网页或重复网页指定权威网页。它告诉搜索引擎哪个版本的页面是主要页面并希望被搜索引擎索引。
7. 社交媒体 Meta 标签
Open Graph 最初由 Facebook 引入，让你可以控制页面在社交媒体上共享时的外观，让你的页面与社交媒体同步更容易，更具吸引力。Twitter Cards 也提供了类似的增强功能，但仅限于 Twitter。
以下是主要元标签：
-
og:title– 页面的标题。 -
og:url– 你页面的 URL。 -
og:description– 你页面的描述。请记住，Facebook 将仅显示大约 300 个字符的描述。 -
og:image– 你可以在此处放置要在链接到你的页面时显示的图像的 URL。
它不会影响你在搜索引擎上的排名。但是，通过配置页面链接的外观，你可以极大地提高点击率和用户体验指标。
关于社交媒体 Meta 标签，推荐阅读【将 Twitter Card 和 Open Graph 社交元数据添加到你的网页】
8. 响应式设计 viewport Meta 标签
视口标记允许你配置页面在任何设备上的缩放和显示方式。
<meta name="viewport" content="width=device-width, initial-scale=1"/>视口元标记与排名没有直接关系，但与用户体验有关。
同时谷歌在移动搜索结果中对移动端友好的网页的排名更高
最佳实践
-
在所有网页上设置 viewport 标签
结语
至此，我们介绍了以上 8 种 SEO 优化相关的元标签并给出了一些最佳实践的建议。这些标签应用起来比较简单，但是他们发挥着巨大的作用。