文章已同步至个人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. VC++ 限制窗口的大小范围的方法

    响应WM_GETMAXMININFO  的消息 处理之 void CMainFrame::OnGetMinMaxInfo(MINMAXINFO FAR* lpMMI) { // TODO: Add y ...

  2. Android菜鸟成长记1--环境的搭配和第一个项目的构建

    一.配置Android环境 1.下载JavaJDK的本地,然后拷贝出来(因为Android实在java的基础上开发的,所以要先配置java环境) 2.java环境变量的配置 配置方法(我的电脑上-&g ...

  3. 【MVC】 非常简单的页面导出 WORD, EXCEL方法

    [MVC] 页面导出 WORD, EXCEL 前端 js function output() { var para = new Object(); para.html = getHtml(" ...

  4. lucene源码地址

    http://archive.apache.org/dist/lucene/java/

  5. C 语言 *** glibc detected *** free(): invalid next size (fast): 0x0000000000be1010 ***

    . . . . . LZ 今天在写一个 Socket 程序的时候使用 malloc(3) 在堆上动态分配了一个结构体的空间,在使用完之后用 free(3) 函数释放空间的时候报 invalid nex ...

  6. C#数据库操作

    1.常用的T-Sql语句      查询:SELECT * FROM tb_test WHERE ID='1' AND name='xia'                SELECT * FROM ...

  7. coursera 机器学习课程 GraphLab环境准备

    在网上看到coursera有机器学习的课程,正好再学习学习,温固一下,还有很多其他的课程也很好.收费的哟! 手机APP和网站收取的费用有差异,网站上要便宜一下,费用差的挺多的,果断在网站上支付了. 有 ...

  8. 摘抄——读《大话移动APP测试 Android与IOS》

    用了两天读完了<大话移动APP测试 Android与IOS>,由于刚开始接触移动测试,技术型的篇章只能先放过了o(╯□╰)o,有以下内容觉得很有必要时不时的看看,来反思自己的工作,自勉!! ...

  9. javascript this

    最近看了很多人的微博,主要是“追梦子”的微博,总结了一下.希望大家多多指点. 1. 没有new this的指向问题   this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向 ...

  10. CSS样式之语法

    选择符 选择符 {属性1:属性值1;属性2:属性值2} 选择符(selector):指定样式适用的标签,除指定标签外,样式不起作用 属性:样式的关键字 属性值:描述样式的值: 格式:属性与属性之间使用 ...