《前端与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元素不会显示在页面上,但是浏览器、搜索引擎抓取工具1、服务器等等都能使用这些信息。

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

注意:在 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要求机器人不跟随此页面上的链接。所有爬虫
allindex, follow 等价Google
nonenoindex, nofollow 等价Google
noarchive要求搜索引擎不缓存页面内容。GoogleYahooBing
nosnippet防止在搜索引擎结果中显示页面的任何描述。GoogleBing
noimageindex请求该页不显示为索引图像的引用页。Google
nocache不要缓存该页面。noarchive 的替代名称。Bing

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

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

例如 Google 专用的:

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

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

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

更多 Google 相关的 meta 元素,可查阅:《Google 可以识别的元标记和内嵌标记 | Google 搜索中心 | 文档 | Google Developers

结语

<meta>对SEO非常重要。它有助于搜索引擎了解页面的信息内容。这里只是列举了一些重要且常用的 SEO 相关元数据。其中标题、摘要、关键字最为重要。它们影响着页面在搜索引擎结果页中的显示效果和排名,是 SEO 非常重要的一环。


  1. 搜索引擎抓取工具是一种由搜索引擎公司开发的自动访问网站并收录网站的脚本机器人。俗称爬虫。 ↩︎

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值