meta标签

<meta>标签可提供页面数据的元信息（meta information）。

<meta>标签位于文档头部，不包含内容，其属性定义了与文档关联的键值对。

简单来说，<meta>就是文档信息描述的标签。我们从以下几个方面来看看<meta>的实际用途。比如：

  • 搜索引擎优化（SEO）
  • 定义页面使用语言
  • 自动刷新并指向新的页面
  • 实现网页转换时的动态效果
  • 控制页面缓冲
  • 网页定级评价
  • 控制网页显示的窗口

一、meta标签的属性

1、charset属性

该特性申明文档的字符编码但，该声明可以被任何一个元素的 lang 特性的值覆盖。推荐使用utf-8国际通用编码。如：

<meta charset="utf-8">

2、content属性

此属性包含http-equiv 或name 属性的值，具体取决于所使用的值。

3、http-equiv属性

这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义，如下：

  • content-language（过时）

    指定页面的默认语言，推荐使用<html>设置全局lang属性来代替。

  • content-security-policy：内容安全策略

    它允许页面作者定义当前页的 内容策略。 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。

  • content-type（过时）

    设置文档字符编码，推荐使用meat的charset属性代替。

  • default-style：默认样式（首选样式）

    该属性指定了文档首选的默认样式。content的值必须包含link元素的标题、href属性链接到CSS样式表或包含CSS样式表的``元素的标题。

  • refresh：页面刷新时间

    如果content值为正整数，则设置为指定时间间隔刷新当前页面，值为正整数后跟字符串的形式则指定时间间隔内跳转到指定页面。以上时间单位为秒。

    <!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=http://www.cnblogs.com/fzz9/">
<meta http-equiv="refresh" content="3 http://www.cnblogs.com/fzz9/">

  • set-cookie（过时）

    为页面设置cookie，请改用HTTP的Set-Cookie头部。

4、name属性

该属性定义文档级元数据的名称。如果以下其中一个属性设置了itemprop, http-equiv or charset ，就不能再设置这个属性了。

name属性可包含以下值（不完整）：

  • application-name

    定义正运行在该网页上的网络应用名称。

  • author

    文档的作者名称，自由格式。

  • description

    其中包含页面内容的简短和精确的描述。 一些浏览器，如Firefox和Opera，将其用作书签页面的默认描述。

  • generator

    包含生成页面的软件的标示符。

  • keywords

    包含与逗号分隔的页面内容相关的单词。

  • referrer（实验中的属性）

    控制所有从该文档发出的 HTTP 请求中HTTP Referer首部的内容。

  • creator

    定义文档创建者的名称，与author类似。

  • googlebot

    属性robots的同义词，该属性只有googleBot(谷歌索引抓取工具)才会使用。

  • publisher

    自由格式定义文档发布者的名称。

  • robots

    定义搜索引擎爬虫与页面应具有的行为。 它是以逗号分隔的值列表，可选值：

    Value(可选值) Description（描述） Used by（可支持使用的搜索引擎）
    index Allows the robot to index the page（允许机器人索引页面） All
    noindex Prevents the robot from indexing the page All
    follow Allows the robot to follow the links on the page（允许机器人跟随页面上的链接） All
    nofollow Prevents the robot from following the links on the page All
    noodp Prevents the usage of the Open Directory Project description, if any, as the description of the page in the search engine results page Google ,Yahoo , Bing
    noarchive Prevents the search engine from caching the content of the page（阻止搜索引擎缓存页面内容） Google,Yahoo,Bing
    nosnippet Prevents the display of any description of the page in the search engine results page（阻止在搜索引擎结果页面中显示页面的任何描述） Google
    noimageindex Prevents this page from appearing as the referring page of an indexed image Google
    noydir Prevents the usage of the Yahoo Directory description, if any, as the description of the page in the search engine results page Yahoo
    nocache Synonym of noarchive Bing

  • viewport（供移动设备使用）

    该属性提供有关视口初始大小的提示，仅供移动设备使用。

    可选值为：

    Value 可能值 描述
    width 一个正整数或者字符串 device-width(以设备宽度作为视口宽度) 以pixels（像素）为单位， 定义viewport（视口）的宽度。
    height 一个正整数或者字符串 device-height(以设备高度作为视口g高度) 以pixels（像素）为单位， 定义viewport（视口）的高度。
    initial-scale 一个0.0 到10.0之间的正数 定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。
    maximum-scale 一个0.0 到10.0之间的正数 定义缩放的最大值；它必须大于或等于minimum-scale的值，不然会导致不确定的行为发生。
    minimum-scale 一个0.0 到10.0之间的正数 定义缩放的最小值；它必须小于或等于maximum-scale的值，不然会导致不确定的行为发生。
    user-scalable 一个布尔值（yes 或者no） 如果设置为no，用户将不能放大或缩小网页。默认值为yes。

    我们常使用下面这个设置来适配移动端页面：

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

二、meta标签的实际使用

1、各大网站首页的meta

我们可以从各大网站的页面查看他们对meta的使用，比如：

  • 淘宝首页

    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="spm-id" content="a21bo">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">

  • 微博首页

    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1,minimum-scale=1">
<meta content="随时随地发现新鲜事！微博带你欣赏世界上每一个精彩瞬间，了解每一个幕后故事。分享你想表达的，让全世界都能听到你的心声！" name="description">

  • github首页

    <meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="GitHub is where people build software. More than 36 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
<meta property="fb:app_id" content="1401488693436528">
<meta property="og:url" content="https://github.com">
<meta property="og:site_name" content="GitHub">
<meta property="og:title" content="Build software better, together">
<meta property="og:description" content="GitHub is where people build software. More than 36 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
<meta property="og:image" content="https://github.githubassets.com/images/modules/open_graph/github-logo.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="1200">
<meta property="og:image" content="https://github.githubassets.com/images/modules/open_graph/github-mark.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="620">
<meta property="og:image" content="https://github.githubassets.com/images/modules/open_graph/github-octocat.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="620">
<meta property="twitter:site" content="github">
<meta property="twitter:site:id" content="13334762">
<meta property="twitter:creator" content="github">
<meta property="twitter:creator:id" content="13334762">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="GitHub">
<meta property="twitter:description" content="GitHub is where people build software. More than 36 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
<meta property="twitter:image:src" content="https://github.githubassets.com/images/modules/open_graph/github-logo.png">
<meta property="twitter:image:width" content="1200">
<meta property="twitter:image:height" content="1200">
<meta name="pjax-timeout" content="1000">
<meta name="request-id" content="2ED9:0DCF:16C7FB:216F9D:5CC52252" data-pjax-transient="">
<meta name="selected-link" value="/" data-pjax-transient="">
<meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
<meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
<meta name="google-site-verification" content="GXs5KoUUkNCoaAZn7wPN-t01Pywp9M3sEjnt_3_ZWPc">
<meta name="octolytics-host" content="collector.githubapp.com">
<meta name="octolytics-app-id" content="github">
<meta name="octolytics-event-url" content="https://collector.githubapp.com/github-external/browser_event">
<meta name="octolytics-dimension-request_id" content="2ED9:0DCF:16C7FB:216F9D:5CC52252">
<meta name="octolytics-dimension-region_edge" content="ap-southeast-1">
<meta name="octolytics-dimension-region_render" content="iad">
<meta name="octolytics-actor-id" content="30432876">
<meta name="octolytics-actor-login" content="fongzhizhi">
<meta name="octolytics-actor-hash" content="7746069481520fac3723891a8bbfada265f7541285b3ba8dce727e3dd67e5af2">
<meta name="analytics-location" content="/dashboard" data-pjax-transient="true">
<meta name="google-analytics" content="UA-3769691-2">
<meta class="js-ga-set" name="userId" content="d47384dc9e738b855285fea4b0c3b639">
<meta class="js-ga-set" name="dimension1" content="Logged In">
<meta name="hostname" content="github.com">
<meta name="user-login" content="fongzhizhi">
<meta name="expected-hostname" content="github.com">
<meta name="js-proxy-site-detection-payload" content="NDE0ZmM0YmRlYTcyMmYxMmM3OTcxN2NkMmJlMDFkZmM2ODEwNjA5YjI2YzIxNjlhNTVjODQ0NjJlY2Q4NWI0Ynx7InJlbW90ZV9hZGRyZXNzIjoiMTE2LjI0Ljk5LjEwMSIsInJlcXVlc3RfaWQiOiIyRUQ5OjBEQ0Y6MTZDN0ZCOjIxNkY5RDo1Q0M1MjI1MiIsInRpbWVzdGFtcCI6MTU1NjQyMzI1NCwiaG9zdCI6ImdpdGh1Yi5jb20ifQ==">
<meta name="enabled-features" content="SPONSORS_TIERS,UNIVERSE_BANNER,MARKETPLACE_INVOICED_BILLING,MARKETPLACE_SOCIAL_PROOF_CUSTOMERS,MARKETPLACE_TRENDING_SOCIAL_PROOF,MARKETPLACE_RECOMMENDATIONS,NOTIFY_ON_BLOCK,RELATED_ISSUES">
<meta name="html-safe-nonce" content="df3a1b9bcd5d110071c16fe060650098953e13ef">
<meta http-equiv="x-pjax-version" content="5b8034c4a9fa0ce9faea05e0eaa63e01">
<meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
<meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
<meta name="theme-color" content="#1e2327">

  • stackoverflow首页

    <meta name="description" content="S tack Overflow is the largest, most trusted online community for developers to learn, share​ ​their programming ​knowledge, and build their careers.">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
<meta property="og:type" content="website">
<meta property="og:url" content="https://stackoverflow.com/">
<meta property="og:site_name" content="Stack Overflow">
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded">
<meta name="twitter:card" content="summary">
<meta name="twitter:domain" content="stackoverflow.com">
<meta name="twitter:title" property="og:title" itemprop="name" content="Stack Overflow - Where Developers Learn, Share, &amp; Build Careers">
<meta name="twitter:description" property="og:description" itemprop="description" content="Stack Overflow | The World’s Largest Online Community for Developers">

2、meta一些的具体作用

  • 浏览器兼容性设置

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    当指定的content值为IE=edge,chrome=1时，优先使用 IE 最新版本和 Chrome。

    假定客户端安装了Google Chrome Frame，则在IE中使用chrome的渲染引擎来渲染页面，否则，将会使用客户端IE最高的标准模式对页面进行渲染。

    还能这样设置：

    <!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=6" >

  • 浏览器内核控制

    很多浏览器是双核的，比如webkit内核高速浏览，IE内核兼容网页和旧版网站。除了浏览器的默认设置外，我们还可通过设置meta标签的属性来设置当前页面的内核渲染模式。

    <meta name="renderer" content="webkit|ie-comp|ie-stand">

  • 站点适配

    主要是移动端手机协议选择，主要用于PC-手机页的对应关系：

    <!-- [wml|xhtml|html5] 根据手机页的协议语言，选择其中一种；
	 url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
-->
<meta name="mobile-agent" content="format=[wml|xhtml|html5]; url=url">

  • SEO（搜索引擎优化）

    根据搜索引擎爬取网页内容的特点，我们可以对页面信息进行定义，以便更好地让搜索引擎识别到，以此来提高网站或页面的识别度，增加搜索时的排名等。

    • 页面关键字：keyword

      这是name属性的属性值，我们可以使用该属性值对页面进行关键字描述，以便于搜索引擎的准确抓取。

    • 页面描述：description

      同keyword类似，该属性值可对页面进行总结性描述。

    • 搜索引擎的搜素方式相关设置：robots

3、总结

meta标签规定了文档的属性信息，浏览器在处理该页面时就会先读取meta中的信息再进行处理，不同的浏览器或设备有不同的属性键值对，根据具体使用查询文档或使用案例进行设置。

参考地址

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

https://huanghui8030.github.io/html/meta-sydq.html

posted @ 2019-04-28 14:12  风之之  阅读(1204)  评论(0)  编辑  收藏  举报