概要
meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。——W3School
属性
必要属性
属性 | 值 | 描述 |
---|---|---|
content | some text | 定义与http-equiv或name属性相关的元信息, 并且始终要和 name 属性或 http-equiv 属性一起使用。 |
<head>
<meta name="description" content="Free Web tutorials">
</head>
可选属性
属性 | 值 | 描述 |
---|---|---|
http-equiv | content-type/expire/ refresh | 把content属性关联到HTTP头部。 |
name | author / description / keywords / generator / revised / others | 把 content 属性关联到一个名称。 |
content | some text | 定义用于翻译 content 属性值的格式。 |
属性解析
name
定义
name 属性规定元数据的名称。 specifies the name for the metadata.name 属性规定属性的信息/值的名称。
如果设置了 http-equiv 属性,则不应该设置 name 属性。
语法
<meta name="value">
属性值
值 | 描述 |
---|---|
application-name | 规定页面所代表的 Web 应用程序的名称。 |
author | 规定文档的作者的名字。</br>实例: <meta name="author" content="zyy"> |
description | 规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。实例: <meta name="description" content="Free web tutorials"> |
generator | 规定用于生成文档的一个软件包(不用于手写页面)。</br>实例: <meta name="generator" content="FrontPage 4.0"> |
keywords | 规定一个逗号分隔的关键词列表 - 相关的网页(告诉搜索引擎页面是与什么相关的)。</br>提示:总是规定关键词(对于搜索引擎进行页面分类是必要的)。</br>实例: <meta name="keywords" content="HTML, meta tag, tag reference"> |
注意更多属性可查看Meta name 属性
实例
<head>
<meta name="description" content="zyy'meta">
<meta name="keywords" content="标签,HTML,meta name">
<meta name="author" content="zyy">
</head>
http-equiv
定义
http-equiv 属性提供了属性的信息/值的 HTTP 头。
http-equiv 属性可用于模拟一个 HTTP 响应头。
使用 http-equiv 已经不是规定 HTML 文档的字符集的唯一方式:
- HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- HTML5: <meta charset="UTF-8">
语法
<meta http-equiv="content-type|default-style|refresh">
属性值
值 | 描述 |
---|---|
content-type | 规定文档的字符编码。</br>实例:<meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
default-style | 规定要使用的预定义的样式表。</br>实例:<meta http-equiv="default-style" content="the document's preferred stylesheet"></br>注释:上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值,或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。 |
refresh | 定义文档自动刷新的时间间隔。</br>实例:<meta http-equiv="refresh" content="300"></br>注释:值 "refresh" 应该慎重使用,因为它会使得页面不受用户控制。 |
实例
<head>
<meta http-equiv="content-type" "text/html; charset=UTF-8">
<meta http-equiv="refresh" content="30">
</head>
过时的用法
<!--不再使用-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--应该使用-->
<meta charset="UTF-8"/>
meta.name的属性值copyright可以用作版权说明
<!-- 不再使用 -->
<meta name="copyright" content="SitePoint" />
应该提供一个链接标记指向一个版权页面(或锚在相同的页面上)。
<!-- 应该使用 -->
<link rel="copyright" href="copyright.html" />
自2009年开始谷歌就宣布keywords已经不再包括在排名算法之中。(实际上google从来没有在算法中使用过)
<!-- 不再使用 -->
<meta name="keywords" content="zyy,zyyy,HTML,CSS" />
心得
meta标签之所以很重要一个是因为meta标签提供了页面的元信息,meta标签的内容也会存在与搜索结果中。当用户在搜索结果总选择要打开的连接时,首先看到的就是meta的描述。所以虽然现在keywords已经不用来排名,但作为一个方便用户阅读来说还是很重要的。而且作为一个描述也会增加网页的点击量,者不仅所有的流量来自于谷歌等搜索引擎,其他网站也会赋予meta标签权重*。
标签权重:权重标签就是会影响页面权重或者相关性的html标签。权重标签常用于突出页面中相对重要的内容,从而提高页面相关性,增加页面权重。从用户体验角度来理解就更加清晰明了,例如写一篇文章,通过权重标签把某个关键词(或语句)变得很显眼,那么如果用户进来,一眼之间肯定就会看到那个关键词(或语句),那么百度蜘蛛是模拟用户的浏览方式,肯定也会很优化重视那个关键词(或语句)。
在segmentfault看了这篇文章,觉得整理的很详细,所以转载过来和大家分享一下。
原文地址:http://segmentfault.com/blog/ciaocc/1190000002407912
引用
http://www.w3school.com.cn/tags/tag_meta.asp#meta_prop_content
http://segmentfault.com/a/1190000002407912
http://www.runoob.com/jsref/prop-meta-content.html
http://www.runoob.com/tags/att-meta-name.html
http://www.runoob.com/tags/att-meta-http-equiv.html
http://www.w3cplus.com/css/meta-tags-html-basics-best-practices.html