网站优化
当前位置:主页 > 资讯 > 网站优化 >
HTML之<meta>标签全解
发布日期:2020-03-02 阅读次数: 字体大小:

HTML之<meta>标签全解

 

 

一、定义

  • 元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词等等。
  • 标签位于文档的头部<head></head>标签内,不包含任何内容。 标签的属性定义了与文档相关联的【名称/值对】。
  • meta标签常用的共有5个属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
    1、http-equiv属性
    2、name属性
    3、charset属性【该属性仅HTML5支持】
    4、scheme属性【该属性HTML5不支持】
    5、content属性,用来放属性值
 HTML 4.01 :<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 HTML5     :<meta charset="UTF-8">

二、浏览器支持

    所有浏览器都支持 <meta> 标签


 
浏览器

三、属性

 
image.png

语法格式:

<meta name="参数" content="具体的参数值">
<meta http-equiv="参数" content="具体的参数值"> 

四、常见用法:name属性

<meta name="author" content="码代码的青年,码代码的青年@qq.com">  

说明:标注网站的作者,及作者的相关信息
<meta name="keywords" content="meta,html,学习"> 

说明:keywords用来告诉搜索引擎你的网站关键字是什么,允许多个关键字,中间用逗号隔开。
<meta name="description" content="html的meta学习,meta是html语言head区的一个辅助性标签。"> 

说明:description用来告诉搜索引擎你的网站主要内容。
<meta name="topic" content="your website's topic">
<meta name="subject" content="your website's subject"> 

说明:topic、subject用来告诉搜索引擎你的网站主旨、主题。
<meta name ="viewport" content ="width=device-width,initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 

为移动设备添加 viewport,content 参数:
              *   `width` viewport 宽度(数值/device-width)
              *   `height` viewport 高度(数值/device-height)
              *   `initial-scale` 初始缩放比例
              *   `maximum-scale` 最大缩放比例
              *   `minimum-scale` 最小缩放比例
              *   `user-scalable` 是否允许用户缩放(yes/no)

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

说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。content的值有:

    all(默认): 文件将被检索,且页面上的链接可以被查询;
    none:      文件将不被检索,且页面上的链接不可以被查询;
    index:     文件将被检索;
    noindex:   文件将不被检索,但页面上的链接可以被查询;
    follow:    页面上的链接可以被查询;
    nofollow:  文件将被检索,但页面上的链接不可以被查询;
<meta name="generator" content="ultraedit">

说明:generator用来说明这网页是用什么软件生成的。
<meta name="copyright" content="XXX">

说明:copyright用来说明网站版权信息。

五、常见用法:http-equiv属性

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

说明:content-type用来设定页面使用的字符集:

     charset的信息参数如utf-8时,代表世界通用的语言编码;
     charset的信息参数如gb2312时,代表说明网站是采用的编码是简体中文;
     charset的信息参数如big5时,代表说明网站是采用的编码是繁体中文;
     charset的信息参数如iso-2022-jp时,代表说明网站是采用的编码是日文;
     charset的信息参数如ks_c_5601时,代表说明网站是采用的编码是韩文;
     charset的信息参数如iso-8859-1时,代表说明网站是采用的编码是英文;
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

说明:X-UA-Compatible对文档兼容模式的定义。
     IE=edge:告诉 IE 以最高级模式渲染文档,也就是任何IE版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。
     chrome=1:激活 Google Frame。【Google 官方提供了对 Google Frame 插件安装情况的检测,这里直接调用方法即可】
<meta http-equiv="content-language"content="zh-cn"/>

说明:content-language,显示语言的设定
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18 GMT">

说明:expires(期限)设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。必须使用GMT的时间格式。
<meta http-equiv="pragma" content="no-cache">  

说明:pragma(cache模式)这样设定,禁止浏览器从本地计算机的缓存中访问页面内容,访问者将无法脱机浏览。 
<meta http-equiv="cache-control" content="no-cache">

说明:cache-control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置cache-control并不会修改另一个消息处理过程中的缓存处理过程。

请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,
响应消息中的指令包括publicprivate、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。

各个消息中的指令含义如下
public:指示响应可被任何缓存区缓存
private:指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效
no-cache:指示请求或响应消息不能缓存
no-store:用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age:指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应
min-fresh:指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale:指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。
<meta http-equiv="refresh" content="2;url=https://www.baidu.com/">

说明:refresh自动刷新并指向新页面。上面这样设定,代表停留2秒钟后自动刷新到新的网址:https://www.baidu.com/
<meta http-equiv="set-cookie" content="cookie value=xxx;expires=Fri,12 Jan 2001 18:18:18 GMT;path=/"> 

说明:如果网页过期,那么存盘的cookie将被删除,expires的时间格式必须为GMT。
<meta http-equiv="window-target" content="_top">

说明:显示窗口的设定,这样设定会强制页面在当前窗口以独立页面显示,用来防止别人在框架里调用自己的页面。
<meta http-equiv="imagetoolbar" content="false"/> 

说明:指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。

六、自定义meta

1、Facebook / Open Graph

<meta property ="og:url" content="https://www.example.com/">
<meta property ="og:title" content="title">
<meta property ="og:description" content="description">
<meta property ="og:site_name" content="website name">
<meta property ="og:image" content="https://example.com/image.jpg">
<meta property ="og:type" content="website">
<meta property ="og:phone_number" content="650-123-4567"/>
<meta property ="og:fax_number" content="+1-415-123-4567"/>
<meta property ="og:locale" content="en_US">
<meta property ="og:region" content="CA"/>
<meta property="og:country-name" content="CHINA"/>
<meta property ="og:postal-code" content="94304"/>
<meta property ="og:street-address" content="1601 S California Ave"/>
<meta property ="fb:app_id" content="Facebook numeric ID"> 
<meta property ="fb:admins" content="Facebook numeric ID">
...

说明:为了提高站外内容的传播效率,2010年9月,在F8会议上Facebook公布了一套开放图景协议(Open Graph Protocol),任何网页只要遵守该协议,SNS就能从页面上提取最有效的信息并呈现给用户。通过Open Graph把其他社交网站建构的网络给连接起来,将创造一个更聪明、更与社交连接、更个人化也更具语意意识的网络。

2、Apple

<meta name="apple-mobile-web-app-title" content="MyApp"/> <!-- New in iOS6 -->
<meta name="apple-mobile-web-app-capable" content="yes">  <!-- 从桌面icon启动IOS Safari是否进入全屏状态(APP模式) -->
<meta name="apple-touch-fullscreen" content="yes" >       <!-- 添加到主屏幕“后,全屏显示 -->
<meta name="format-detection" content="telephone=no">     <!-- ios设备上禁止默认的将数字识别为可点击的telephone link -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">  <!-- 指定状态栏的颜色 -->

3、TweetMeme

<meta name="tweetmeme-title" content="Retweet Button Explained" />

说明:Tweetmeme跟踪Twitter上的链接,以给用户更好的体验。它使用一种常用的排序系统,以在这个微博世界里找出最热门的信息。

4、博客分类

<meta name="blogcatalog" />

5、Rails

<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc="/>

6、个人自定义

<meta name="my" content="XXXX"/>

七、标签优化

meta标签的内容优化很有可能会成为一个网站点击率最关键的一个因素。

如何更好进行meta标签内容的优化?

1、细化监控范围和内容;
2、使用动态的,语义化的meta描述;
3、极大化配合搜索引擎的工作;