什么是meta标签,从SEO角度来看meta标签有什么作用,meta标签应该怎样优化?
meta 标签系系列共 4 篇:
HTML meta 标签详解
将 Twitter Card 和 Open Graph 社交元数据添加到你的网页
8 个必知的 SEO 优化重要元标签
移动端浏览器常用的 meta 标签汇总
meta标签定义了关于 HTML 文档的元数据(metadata)。 它可以用于向搜索引擎和网站访问者描述你的页面内容。其中一些 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 优化相关的元标签并给出了一些最佳实践的建议。这些标签应用起来比较简单,但是他们发挥着巨大的作用。