HTML meta详解

前端技术 - HTML

老土 2017-6-11 10:19:19

<meta> 标签又叫“元数据标签”,是网页头部的一个辅助性标签,用于为网页定义元数据(metadata)信息,一般用来定义页面的关键字、页面的描述等。

<meta> 标签提供的信息对用户不可见,也不会显示在页面上,但却对搜索引擎可见,可以方便搜索引擎蜘蛛搜索到这个页面上的信息。因此,这些信息都是SEO的重要内容,可以大大提高网站被搜索引擎搜索到的可能性。

<meta> 标签共有两个重要属性,分别是 name 属性和 http-equiv 属性,并通过 name 或 http-equiv属性来指定元数据的类型,通过 content 来指定元数据的内容,不同的元数据实现了不同的网页功能。

1、name属性

name属性主要用于描述网页,最常见的就是描述网页的关键字、网页内容描述、搜索引擎向导、作者、版权声明等,以便搜索引擎对网页的信息进行查找和分类。如:

<head>
  <meta name="keywords" content="HTML, CSS, RWD" />
  <meta name="description" content="Study HTML, CSS, RWD for free" />
  <meta name="robots" content="all" />
  <meta name="author" content="歪脖网, www.waibo.wang" />
  <meta name="copyright" content="创意共享,只要保持署名和非商用,可以自由转载" />
</head>

name属性的主要取值及功能见表:

属性值 功能描述
keywords 网页的关键字。通常指定网页的核心关键字列表,各关键字间用英文逗号隔开
description 网页的主要内容。通常是网页内容的概括描述,以方便搜索引擎蜘蛛抓取网页的内容
robots 页面是否允许被索引,以及页面上的链接是否允许被查询,取值all、none、index、noindex、follow、nofollow,index 表示页面允许被索引,follow 表示页面上的链接允许被查询。默认值是all,即允许文件被索引,且页面上的链接允许被查询
author 注明网页的作者,其内容可以是作者的名字、Email、微博、微信等任何联系信息
copyright 注明网页的版权信息

2、http-equiv属性

顾名思义,http-equiv 就相当于HTTP头部的作用,用于向浏览器提供一些有用的信息,以帮助浏览器正确和精确地显示网页内容。

http-equiv属性主要用定义网页的编码字符集、刷新频率、网页的有效期等:

1)网页的编码字符集

在HTML4中,通过Content-Type属性值来指定文件的媒体格式类型(MIME类型)和所使用的编码字符集,浏览器将以此来决定以什么形式、什么编码来读取这个文件,并显示文件的内容。

HTML文件的MIME类型固定为text/html,而编码字符集可以根据需要来指定。如:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

到了HTML5,一切化繁为简,只需在 meta 元素中,直接使用 charset 属性来定义网页所使用的编码字符集即可。如:

<meta charset="utf-8" />

在HTML5中,上述两种方式均有效,但只能使用一种,不能同时混合使用两种方式。并且,推荐使用 utf-8 编码字符集。

2)刷新频率Refresh (刷新)

通过 refresh 属性值来指定让网页多长时间(秒)刷新自己,或在多长时间后自动跳转到指定的网页。如,让网页在当前页面停留 5 秒后,自动跳转到 http://www.maifang51.com/:

<meta http-equiv="refresh" content="5; url=http://www.maifang51.com/" />

3)网页的有效期

通过Expires属性值来指定网页在缓存中的过期时间,一旦网页过期,必须从服务器上重新加载。时间必须使用GMT格式(格林威治时间格式)。如:

<meta http-equiv="Expires" content="Mon, 20 Jul 2099 23:00:00 GMT" />

返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验