转载

HTML Meta标签知多少

文章已同步至个人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.