html meta标签用法详解(一)

html meta标签用法详解(一)

1.1概述
        元数据，是用于描述数据的数据。它不会显示在页面上，但是机器却可以识别。
meta常用于定义网页关键字、网页介绍、网页制作者、网页编码方法、robots、自动跳转和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。
         meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等。
1.2 meta标签属性
        meta标签共有两个属性，分别是http-equiv属性和name属性。
1.2.1 name属性
        name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
语法：
        <meta name="参数"content="具体的参数值">。
name属性主要参数介绍：
参数一：name="Keywords" ,content="自定义"（搜索引擎优化地方）
说明：
        keywords用来告诉搜索引擎你网页的关键字是什么。用于告诉搜索引擎，你网页的关键字。
实例：
       

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

参数二：name="description",content="自定义"(网站内容的描述，搜索引擎优化地方)
说明：
        description用来告诉搜索引擎你的网站主要内容。用于告诉搜索引擎，你网站的主要内容。
实例：
      

 <meta name="description" content="html的meta总结，meta是html语言head区的一个辅助性标签。"> 

参数三：name="robots",content="all/none/index/noindex/follow/nofollow"。(定义搜索引擎爬虫的索引方式)
说明：
        robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
        content="all"，默认，搜索引擎索引此网页，并继续通过此网页的链接索引。
        content="none"，搜索引擎将忽略此网页。
        content="index"，搜索引擎索引此网页。
        content="follow"，搜索引擎继续通过此网页的链接索引搜索其它的网页。
        content="noindex"，搜索引擎不索引此网页，但会继续通过此网页的链接索引其它的网页。
        content="nofollow"，搜索引擎索引此网页，但不继续通过此网页的链接索引其它的网页。
实例：
      

 <meta name="robots" content="none"> 

参数四：name="author",content="自定义"。(作者)
说明：
        标注网页的作者用于标注网页作者。
实例：
      

 <meta name="author" content="root,[e-mail]"> 

参数五：name="generator",content="自定义"。(网页制作软件)
说明：
        generator参数用来说明网站采用什么软件制作的。用于标明网页是什么软件做的。
实例：
      

 <meta name="generator" content="信息参数"/>

参数六：name="copyright",content="自定义"。(版权)
说明：
        标注网站版权信息。用于标注版权信息
实例：
       

<meta name="copyright" content="Lxxyx"> //代表该网站为Lxxyx个人版权所有。

参数七：name="revisit-after"，content="n days"。(搜索引擎爬虫重访时间)
说明：
        revisit-after代表网站重访,n days代表n天。如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。
参数八：name="viewport" ,content= "选择属性并设置属性值 " (移动端的窗口)
说明：
        这个属性常用于设计移动端网页。如：
      

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

详细属性：
        width  ----  viewport的宽度（width=device-width意思是：宽度等于设备宽度）
        height ---- viewport的高度（height=device-height意思是：高度等于设备宽度）
        initial-scale ---- 初始的缩放比例
        user-scalable ---- 用户是否可以手动缩放
        minimum-scale ---- 允许用户缩放到的最小比例
        maximum-scale ---- 允许用户缩放到的最大比例
参数九：name="renderer" ,content=" webkit / ie-comp/ ie-stand " (双核浏览器渲染方式)
说明：
        renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。
实例：
        360浏览器：

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

1.2.2 http-equiv属性
        http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
语法：
        <meta http-equiv="参数"content="具体的描述 ">；
参数一：http-equiv="Refresh"，content=" time;url=地址 "。(自动刷新并指向某页面)
说明：
        自动刷新并指向新页面。网页将在设定的时间内，自动刷新并调向设定的网址
实例：
       

<meta http-equiv="Refresh" content="2;URL=http://www.haorooms.com">

注意：
        其中的2是指停留2秒钟后自动刷新到URL网址。
参数二：http-equiv="Set-Cookie(cookie设定) "，content=" time;url=地址 "。
说明：
        如果网页过期，那么存盘的cookie将被删除。如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
用法：

 <meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> 
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> 

注意：
        必须使用GMT的时间格式。
参数三：http-equiv="Window-target" content="参数"。 (显示窗口的设定)
说明：
        强制页面在当前窗口以独立页面显示。
用法：
       

<meta http-equiv="Window-target" content="_top"> 

注意：
        用来防止别人在框架里调用自己的页面，此属性已经基本被废弃。
参数四：http-equiv="content-Type" (设定网页字符集，推荐使用HTML5的方式)
说明：
        用于设定网页字符集，便于浏览器解析与渲染页面
用法：
<

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML
<meta charset="utf-8">//HTML5

charset参数介绍：
        charset="GB2312"，说明网站采用的编码是简体中文。
        charset="BIG5"，说明网站采用的编码是繁体中文。
        charset="iso-2022-jp"，说明网站采用的编码是日文。
        charset="ks_c_5601"，说明网站采用的编码是韩文。
        charset="ISO-8859-1"，说明网站采用的编码是英文。
        charset="UTF-8"，说明网站采用的编码是世界通用的语言编码。
参数五：http-equiv="content-Language "（显示语言的设定）
用法：
      

 <meta http-equiv="Content-Language"content="zh-cn"/> 

参数六：http-equiv="X-UA-Compatible " (浏览器采取何种版本渲染当前页面)
说明：
        用于告知浏览器以何种版本来渲染页面（一般都设置为最新模式）。
实例：
       

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

参数七：http-equiv="imagetoolbar",content="false/true"
说明：
        指定是否显示图片工具栏，当content值为false代表不显示，为true代表显示。
实例：
       

<meta http-equiv="imagetoolbar" content="false"/> 

参数八：http-equiv="Content-Script-Type"
说明：
        W3C网页规范，指明页面中脚本的类型。
实例：
       

<meta http-equiv="Content-Script-Type" content="text/javascript">

1.3拓展——name="mobile-agent"(开放适配)
        为了提升用户的移动搜索结果浏览体验，百度移动搜索对具有对应手机站的PC站提供“开放适配”服务。如果同时拥有PC站和手机站，且二者能够在内容上对应，您可向百度“提交”PC页—手机页的对应关系，若对应关系准确，将有助于百度在移动搜索中将原PC页结果替换为对应的手机页结果。
        百度“开放适配“服务共提供两种方案——自主适配、标注Meta声明。
一 、自主适配
含义：
        站点自己做好PC与手机之间的适配，以及手机各个版式之间的适配。当手机用户通过百度移动搜索或者其他方式访问站点的PC页（首页或者内容页）时，站点将其自动适配到该PC页面对应的手机页，并为之选择合适的页面版本。
生效情况：
        不仅限于百度移动搜索，当用户通过手动输入网址，或者其他移动搜索引擎、导航站等渠道访问站点时，适配同样有效。
二、 标注Meta声明
含义：
        站点如果自行适配有困难，可以在PC页面中做简单改造，百度协助实现适配效果。即在站点PC页的源代码头部嵌入一行或多行Meta信息，由Meta信息来指明该PC页对应的手机页的URL，以及该URL对应页面的格式，百度将根据用户终端类型选择最适合展示的页面。
Meta声明标注步骤：
        1、梳理所有与手机页存在一一对应关系的PC页，用于添加Meta声明；无对应关系的PC页面无需添加Meta 。
        2、 Meta声明的格式：
       

<meta name="mobile-agent" content="format=[wml|xhtml|html5]; url=url">

        注意：[wml|xhtml|html5]——根据手机页的协议语言，选择中的一种。
              url=url ——后者代表当前PC页所对应的手机页url，两者必须是一一对应关系。
              name="mobile-agent"为更新后的meta声明，建议使用。原有meta规则http-
              equiv="mobile-agent"能够兼容并继续生效，已标注过的无需修改。
        3、需要将Meta声明放在PC页源代码内部，如下：

<head>
    <meta name="mobile-agent" content="format=html5;url=http://3g.sina.com.cn/">
    ……
</head>

生效情况：
        标注Meta声明这一适配方案仅限适用于百度移动搜索。
生效时间：
        在标注准确对应关系无误的情况下，百度会在七天左右进行处理，老旧页面会有延迟。但百度不保证一定能在移动搜索结果中按照您提交的对应关系进行替换。