文章已同步至个人Blog:Benjamin - 专注前端开发和用户体验

一、基本属性

标签常常被用来定义HTML文档的元数据或者HTTP协议的指向，这些元数据常用在SEO、HTML Pages or Apps on Mobile/Handheld Devices，该标签主要包括以下属性：

Attribute Description
Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
content Specifies the property's value.
scheme Specifies a scheme to interpret the property's value (as declared in the content attribute).
http-equiv Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

二、基本的HTML Meta标签

<!-- SEO -->

<meta name="keywords" content="your, tags"/>

<meta name="description" content="150 words"/>

<meta name="subject" content="your website's subject">

<meta name="copyright"content="company name">

<meta name="language" content="ES">

<meta name="robots" content="index,follow" />

<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />

<meta name="abstract" content="">

<meta name="topic" content="">

<meta name="summary" content="">

<meta name="Classification" content="Business">

<meta name="author" content="name, email@hotmail.com">

<meta name="designer" content="">

<meta name="copyright" content="">

<meta name="reply-to" content="email@hotmail.com">

<meta name="owner" content="">

<meta name="url" content="http://www.websiteaddrress.com">

<meta name="identifier-URL" content="http://www.websiteaddress.com">

<meta name="directory" content="submission">

<meta name="category" content="">

<meta name="coverage" content="Worldwide">

<meta name="distribution" content="Global">

<meta name="rating" content="General">

<meta name="revisit-after" content="7 days">

<meta http-equiv="Expires" content="0">

<meta http-equiv="Pragma" content="no-cache">

<meta http-equiv="Cache-Control" content="no-cache">

三、OpenGraph Meta标签

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

<meta name="og:title" content="The Rock"/>

<meta name="og:type" content="movie"/>

<meta name="og:url" content="http://www.imdb.com/title/tt0117500/"/>

<meta name="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

<meta name="og:site_name" content="IMDb"/>

<meta name="og:description" content="A group of U.S. Marines, under command of..."/>

<meta name="fb:page_id" content="43929265776" />

<meta name="og:email" content="me@example.com"/>

<meta name="og:phone_number" content="650-123-4567"/>

<meta name="og:fax_number" content="+1-415-123-4567"/>

<meta name="og:latitude" content="37.416343"/>

<meta name="og:longitude" content="-122.153013"/>

<meta name="og:street-address" content="1601 S California Ave"/>

<meta name="og:locality" content="Palo Alto"/>

<meta name="og:region" content="CA"/>

<meta name="og:postal-code" content="94304"/>

<meta name="og:country-name" content="USA"/>

<meta property="og:type" content="game.achievement"/>

<meta property="og:points" content="POINTS_FOR_ACHIEVEMENT"/>

<meta property="og:video" content="http://example.com/awesome.swf" />

<meta property="og:video:height" content="640" />

<meta property="og:video:width" content="385" />

<meta property="og:video:type" content="application/x-shockwave-flash" />

<meta property="og:video" content="http://example.com/html5.mp4" />

<meta property="og:video:type" content="video/mp4" />

<meta property="og:video" content="http://example.com/fallback.vid" />

<meta property="og:video:type" content="text/html" />

<meta property="og:audio" content="http://example.com/amazing.mp3" />

<meta property="og:audio:title" content="Amazing Song" />

<meta property="og:audio:artist" content="Amazing Band" />

<meta property="og:audio:album" content="Amazing Album" />

<meta property="og:audio:type" content="application/mp3" />

四、公司/服务 Meta标签

4.1 CLAIMID

ClaimID was a website that allowed users to create unique profiles that showed personal websites, profiles at other sites, and other biographical information.

<meta name="microid" content="mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7" />

4.2 APPLE META TAGS

<!-- 从桌面icon启动IOS Safari是否进入全屏状态（APP模式） -->

<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 添加到主屏幕“后，全屏显示 -->

<meta name="apple-touch-fullscreen" content="yes" >

<!-- 指定状态栏的颜色 -->

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- ios设备上禁止将数字识别为可点击的telephone link -->

<meta name="format-detection" content="telephone=no">

<!-- 页面CSS计算时使用宽度为320，初始缩放比例2.3， 不允许用户缩放, 最大缩放因子为1 -->

<meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no, maximum-scale=1 ">

<!-- 页面CSS计算时使用的宽度根据设备给定值自适应 -->

<meta name= "viewport" content = "width = device-width">

4.3 INTERNET EXPLORER META TAGS

<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" />

<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" />

<meta name="mssmarttagspreventparsing" content="true">

<!-- 告诉IE浏览器以什么模式展示网页 -->

<meta http-equiv="X-UA-Compatible" content="chrome=1">

<meta name="msapplication-starturl" content="http://blog.reybango.com/about/"/>

<meta name="msapplication-window" content="width=800;height=600"/>

<meta name="msapplication-navbutton-color" content="red"/>

<meta name="application-name" content="Rey Bango Front-end Developer"/>

<meta name="msapplication-tooltip" content="Launch Rey Bango's Blog"/>

<meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico" />

<meta name="msapplication-task" content="name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico" />

<meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico" />

<meta name="msapplication-task" content="name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico" />

<!-- Tab标签icon -->

<link rel="shortcut icon" href="/images/favicon.ico" />

4.4 TWEETMEME META TAGS

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

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

4.5 BLOG CATALOG META TAGS

<meta name="blogcatalog" />

4.6 RAILS META TAGS

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

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

五、创建自定义 Meta标签

Use custom meta tags to store data that you need in javascript, instead of hard-coding that data into your javascript. I store my Google Analytics code in meta tags. Here's some examples:

<meta name="google-analytics" content="1-AHFKALJ"/>

<meta name="disqus" content="EEEE"/>

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

<meta name="mixpanel" content="XXXXE"/>

六、HTML Link 标签

6.1 HTML LINK TAGS

<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/martini" />

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

<link rel="fluid-icon" type="image/png" href="/fluid-icon.png" />

<link rel="me" type="text/html" href="http://google.com/profiles/thenextweb"/>

<link rel='shortlink' href='http://blog.unto.net/?p=353' />

<link rel='archives' title='May 2003' href='http://blog.unto.net/2003/05/' />

<link rel='index' title='DeWitt Clinton' href='http://blog.unto.net/' />

<link rel='start' title='Pattern Recognition 1' href='http://blog.unto.net/photos/pattern_recognition_1_about/' />

<link rel='prev' title='OpenSearch and OpenID? A sure way to get my attention.' href='http://blog.unto.net/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/' />

<link rel='next' title='Not blog' href='http://blog.unto.net/meta/not-blog/' />

<link rel="search" href="/search.xml" type="application/opensearchdescription+xml" title="Viatropos" />

<link rel="self" type="application/atom+xml" href="http://www.syfyportal.com/atomFeed.php?page=3"/>

<link rel="first" href="http://www.syfyportal.com/atomFeed.php"/>

<link rel="next" href="http://www.syfyportal.com/atomFeed.php?page=4"/>

<link rel="previous" href="http://www.syfyportal.com/atomFeed.php?page=2"/>

<link rel="last" href="http://www.syfyportal.com/atomFeed.php?page=147"/>

<link rel='shortlink' href='http://smallbiztrends.com/?p=43625' />

<link rel="canonical" href="http://smallbiztrends.com/2010/06/9-things-to-do-before-entering-social-media.html" />

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://smallbiztrends.com/xmlrpc.php?rsd" />

<link rel="pingback" href="http://smallbiztrends.com/xmlrpc.php" />

<link media="only screen and (max-device-width: 480px)" href="http://wordpress.org/style/iphone.css" type="text/css" rel="stylesheet" />

6.2 APPLE LINK TAGS

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon.png" />

<link rel="apple-touch-startup-image" href="/startup.png">

七、HTML5中的变化

The charset attribute specifies the character encoding used by the document. This is a character encoding declaration. If the attribute is present in an XML document, its value must be an ASCII case-insensitive match for the string "UTF-8" (and the document is therefore forced to use UTF-8 as its encoding).

The charset attribute on the meta element has no effect in XML documents, and is only allowed in order to facilitate migration to and from XHTML.

There must not be more than one meta element with a charset attribute per document.

八、参考链接

W3C HTML5 Meta Element

Metatags in HTML 5

HTML Meta Tags

COMPLETE LIST OF HTML META TAGS

DCMI Dublin Core Metadata Initiative

Apple-specific meta tags

LinkTagMeaning

Google Chrome HTML5 Tags

Facebook Open Graph META Tags

HTML Meta标签知多少的更多相关文章

  1. meta 标签

    <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> & ...

  2. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  3. meta标签使用方法总结

    meta标签是用来描述一个HTML网页文档的属性,比如该网页的作者,日期,网页的关键字,刷新,网页等级设定等等,是文档中的最基本的元信息,本文是对meta标签的学习总结,内容大多来自网上各个地方,非原 ...

  4. [转]手机web HTML头信息解释和viewport meta标签解释

    <meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.i ...

  5. html查漏补缺之meta标签

    什么是meta标签? meta标签是html标记head区的一个关键标签,它位于HTML文档的<head>和<title>之间(有些也不是在<head>和<t ...

  6. 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)

    移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...

  7. meta标签

    参考:http://www.jb51.net/web/158860.html META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). 一.HTTP标题信息(HTT ...

  8. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  9. 浏览器内核控制Meta标签说明文档【转】

    背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲 ...

随机推荐

  1. javascript 命令方式 测试例子

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. nodejs--偏函数

    偏函数的例子,解释--假设有一个参数或变量已经预置的函数A,我们通过调用A来产生一个新的函数B,函数B就是我们说的偏函数 偏函数解决这样的问题:如果我们有函数是多个参数的,我们希望能固定其中某几个参数 ...

  3. swift 定制自己的Button样式

    swift的UIButton类中有些公开方法可以重写,所以,如果想写出自己的UIButton,只要继承UIButton类,并重写相应的方法即可. 系统的UIButton可以添加图片,也可以添加标题,但 ...

  4. swift 如何获取webView的内容高度

    应用中如果使用webView,要想获取其内容高度,就要实现其代理方法, 首先添加代理UIWebViewDelegate 然后给代理赋值 webView.delegate = self 实现代理方法: ...

  5. 屏蔽input导致的回车提交事件

    onkeypress="if(event.keyCode == 13) return false;"

  6. PHP declare(ticks=N); 的作用

    一般用法是 declare(ticks=N);拿declare(ticks=1)来说,这句主要作用有两种: 1.Zend引擎每执行1条低级语句就去执行一次 register_tick_function ...

  7. mac下sublime text3安装SFTP及使用

    mac下sublime text3安装SFTP 1.shift+command+p进入控制面板 2.输入install进入程序安装界面选择需要安装的插件(SFTP) 3.直接进行安装(需要联网) 4. ...

  8. ng-repeat指令应用

    1.ng-repeat 一看就知道跟foreach等指令类似,用于循环重复.一般用于列表和表格中.用法如下: <tr ng-repeat="data in dataList" ...

  9. NOIP2016初赛总结(提高组)

    题目:https://www.zhihu.com/question/51865837/answer/127892121 注:我是HE的,不是JS的,照片是ZYJ神犇的 单选 一.单项选择题(共15 题 ...

  10. [Notes] Reading Notes on [Adaptive Robot Control – mxautomation J. Braumann 2015]

    Reading sources: 1.Johannes Braumann, Sigrid Brell-Cokcan, Adaptive Robot Control (ARC  ) Note: buil ...