HTML Meta标签知多少

一、基本属性

标签常常被用来定义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标签

<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.

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

4.2 APPLE META TAGS

<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">

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

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

<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">

<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" />

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

4.4 TWEETMEME META TAGS

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

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

4.5 BLOG CATALOG META TAGS

1	`<meta name="blogcatalog"` `/>`

4.6 RAILS META TAGS

1 2	`<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).

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

本人转贴自https://www.cnblogs.com/zhgt/p/4278543.html