×

meta标签

96
饥人谷_张颖莹
2015.11.29 10:27* 字数 771

概要

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

日记本
Web note ad 1