《前端与SEO》—— 第四章：meta 与 SEO-Toy模板网

这篇具有很好参考价值的文章主要介绍了《前端与SEO》—— 第四章：meta 与 SEO。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

编写过HTML文档的朋友对meta元素一定不陌生，meta元素有一项非常重要的作用就是声明当前网页（即，HTML 文档）的基础信息。这些基础信息有个专业术语，叫“元数据（Metadata）”。元数据是 SEO 一个非常重要的工具。搜索引擎就是通过这些元数据来认识网页的。

认识元数据(meta)

什么是元数据（Metadata）？

Metadata——元数据，简单的来说就是描述数据的数据。

摘自——《Metadata - 术语表 | MDN (mozilla.org)》

meta元素用于设置当前网页的元数据。例如：网页描述、作者、针对搜素引擎的关键字等等。

meta 元素有如下特性：

是一个空元素（void element）
一般情况下，meta元素都存放在<head>元素中。
必须存在开始标记（<meta）且不能存在结束标记（/或</meta>）。例如：<meta charset="utf-8">
meta元素主要服务于机器。尽管meta元素不会显示在页面上，但是浏览器、搜索引擎抓取工具¹、服务器等等都能使用这些信息。

除此之外，meta元素还有以下特性。

一般情况下，<meta>元素属于元数据内容（Metadata content）。但是如果<meta>元素添加了itemprop属性，<meta>元素可作为 flow content, phrasing content.

允许编写在【<head>、接收 metadata content 内容的元素、接收 flow content 内容的元素】中；

<meta charset>、<meta http-equiv>必须写在<head>中;

<meta name> 可以写在任何可以接收 metadata content 内容的标签中

<meta itemprop>可以写在任何可以接收 metadata content 或 flow content 内容的标签中

注意：在 XHTML 中标签必须包含结束标签。

上面关于<meta>的描述有些拗口，可以不用深入了解。只需要知道，<meta>和SEO有关即可；一般情况下，存放在<head>中。

与SEO相关的meta元素

meta元素的用途有很多。有控制页面刷新的；有设置移动端显示效果的；也有和SEO相关的。

接下来，简单讲讲那些和SEO相关的meta元素。

页面标题

<title>标签是用于设置网页标题。尽管它并不是通过<meta>设置，但它是SEO中非常重要的元数据。

google 对网页标题做如下描述：

标题链接非常重要，它可以让用户快速了解某条搜索结果的内容以及该结果与其查询相关的原因。它常常是用户在决定点击哪个结果时参考的主要信息，因此为您的网页提供高品质的标题文字非常重要。

摘抄自——《如何更改 Google 搜索中的标题链接 | Google 搜索中心 | 文档 | Google Developers》

这里的标题链接就是网页标题。

写法如下：

<title>页面标题</title>

设置标题时，需要注意一下几点：

确保 <title>内容和网页内容有较强的关联性。避免题不对文。
确保为每个网页分别指定一个标题。
为 <title>元素编写简练的描述性文字。
避免关键字堆砌。在 <title> 元素中包含几个描述性词汇有时会有帮助，但请勿多次重复使用相同的字词或短语。
避免 <title>元素中出现重复或样板化的文字。

更多相关内容请看：如何更改 Google 搜索中的标题链接 | Google 搜索中心 | 文档 | Google Developers

网页摘要

网页摘要是对网页内容的精炼提取。摘要会显示在搜索结果页上，有助于用户对网页有初步的了解。

写法如下：

<meta name="description" content="这里是网页摘要！" >

编写摘要有如下要点：

尽量与页面内容有强关联性。
尽量能够准确概括特定网页。避免网站中所有网页的摘要都一样。

更多相关内容——如何撰写元描述 | Google 搜索中心 | 文档 | Google Developers

关键字

关键字即搜索关键字，是网页内容高度凝练的词组列表。关键字有助于搜索引擎索引查找网页。

写法如下：

<meta name="keywords" content="关键字1,关键字2,关键字3“ >

编写关键字时有如下要点：

关键字之间要用英文逗号,分隔。
关键字要和网页内容有关联性。避免不相关的关键字。
设置适量的关键字。关键字太少没法完全体现网页内容，但一味的追求大量的关键字就会照成关键字堆砌。能充分体现网页内容即可。
避免关键字堆砌。

“关键字堆砌”是指在网页中加入大量关键字或数字，试图操纵网站在 Google 搜索结果中的排名。这些关键字通常以列表或群组形式显示，或与上下文无关（内容不自然）。在网页中加入大量关键字或数字会对用户体验产生负面影响，因而可能损害网站排名。请集中精力创建实用、信息丰富的内容，并使用与上下文相关的恰当关键字。

摘自——《不相关的关键字和关键字堆砌 | Google 搜索中心 | 文档 | Google Developers》

网页作者

网页开发者也是网页信息的一部分。可以如下设置：

<meta name="author" content="作者1,作者2，作者3" >

注意：多个作者之前用英文逗号间隔。

抓取工具行为的控制

借助<meta name="robots">可以控制抓取工具的行为。

写法如下：

<meta name="robots" content="index,follow" />

META name=“robots” 值域说明：

值描述被用于

index 允许机器人索引此页面（默认）。所有爬虫

noindex 要求机器人不索引此页面。所有爬虫

follow 允许机器人跟随此页面上的链接（默认）。所有爬虫

nofollow 要求机器人不跟随此页面上的链接。所有爬虫

all 与 index, follow 等价 Google

none 与 noindex, nofollow 等价 Google

noarchive 要求搜索引擎不缓存页面内容。 Google、Yahoo、Bing

nosnippet 防止在搜索引擎结果中显示页面的任何描述。 Google、Bing

noimageindex 请求该页不显示为索引图像的引用页。 Google

nocache 不要缓存该页面。noarchive 的替代名称。 Bing

摘自——《标准元数据名称 - HTML（超文本标记语言） | MDN (mozilla.org)》

值	描述	被用于
`index`	允许机器人索引此页面（默认）。	所有爬虫
`noindex`	要求机器人不索引此页面。	所有爬虫
`follow`	允许机器人跟随此页面上的链接（默认）。	所有爬虫
`nofollow`	要求机器人不跟随此页面上的链接。	所有爬虫
`all`	与 `index, follow` 等价	Google
`none`	与 `noindex, nofollow` 等价	Google
`noarchive`	要求搜索引擎不缓存页面内容。	Google、Yahoo、Bing
`nosnippet`	防止在搜索引擎结果中显示页面的任何描述。	Google、Bing
`noimageindex`	请求该页不显示为索引图像的引用页。	Google
`nocache`	不要缓存该页面。`noarchive` 的替代名称。	Bing

上面这些 meta 元素都是通用性的。除此之外，不同的搜索引擎会为自己的爬虫机器人制定专门的 meta 元素。

例如 Google 专用的:

<!-- 作用等同于 name="robots",但只对谷歌搜索引擎的爬虫机器人有效 -->
<meta name="googlebot" content="index,follow" />

<!-- 用于告知 Google 不要显示站点链接搜索框 -->
<meta name="google" content="nositelinkssearchbox" />

<!-- 用于告知 Google 您不希望提供该网页的翻译 -->
<meta name="googlebot" content="notranslate" />