您的位置：首页 > Web前端 > HTML

你需要知道的 HTML <META>

2014-01-17 16:14 267 查看

META 是 HTML 语言 <head></head> 区的一个辅助性标签。几乎所有的网页源代码里，我们可以看到它的影子。

如果你是网站的访问者，这些代码对你来说，可有可无；但如果你是开发者或者运营者，你一定要了解它。如果你能够用好 meta 标签，会给你带来意想不到的效果。

<meta> 标签位于文档的头部，不包含任何可见的内容。

<meta> 标签的属性定义了与文档相关联的名称/值对。

<meta> 标签共有两个属性，它们分别是 http-equiv 属性和 name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

更多它的具体描述，请参考 W3C
HTML Element META 或 W3C
HTML ELement Meta

我们今天，主要是向大家罗列一下当前所有已知的 <meta> 和 <link> 的用法

基本 HTML Meta 标签

声明文档使用的字符编码是 UTF-8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

[/code]

HTML5 中简化为

<meta charset='utf-8'>

[/code]

使用关键词描述一个网页的属性，SEO 必选

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

[/code]

使用一段自然语言描述一个网页的属性，SEO 必选

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

[/code]

其他

<meta name="subject" content="your website" />

<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="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="pagename" content="jQuery Tools, Tutorials and Resources - O" />

<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 name="subtitle" content="This is my subtitle" />

<meta name="target" content="all" />

<meta name="HandheldFriendly" content="True" />

<meta name="MobileOptimized" content="320" />

<meta name="date" content="Sep. 27, 2010" />

<meta name="search_date" content="2010-09-27" />

<meta name="DC.title" content="Unstoppable Robot Ninja" />

<meta name="ResourceLoaderDynamicStyles" content="" />

<meta name="medium" content="blog" />

<meta name="syndication-source" content="https://mashable.com/2008/12/24/free-brand-monitoring-tools/" />

<meta name="original-source" content="https://mashable.com/2008/12/24/free-brand-monitoring-tools/" />

<meta name="verify-v1" content="dV1r/ZJJdDEI++fKJ6iDEl6o+TMNtSu0kv18ONeqM0I=" />

<meta name="y_key" content="1e39c508e0d87750" />

<meta name="pageKey" content="guest-home" />

<meta name="itemprop" content="jQTouch" />

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

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

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

<meta http-equiv="imagetoolbar" content="no" />

<meta http-equiv="x-dns-prefetch-control" content="off" />

[/code]

OpenGraph Meta Tags

<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 property="og:audio" content="http://example.com/bond/theme.mp3" />

<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />

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

<meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." />

<meta property="og:determiner" content="the" />

<meta property="og:locale" content="en_GB" />

<meta property="og:locale:alternate" content="fr_FR" />

<meta property="og:locale:alternate" content="es_ES" />

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

<meta property="og:image" content="http://example.com/ogp.jpg" />

<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

<meta property="og:image:type" content="image/jpeg" />

<meta property="og:image:width" content="400" />

<meta property="og:image:height" content="300" />

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

<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />

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

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

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

<meta name="twitter:card" content="summary">

<meta name="twitter:site" content="@nytimes">

<meta name="twitter:creator" content="@SarahMaslinNir">

<meta name="twitter:url" content="http://www.nytimes.com/2012/02/19/arts/music/amid-police-presence-fans-congregate-for-whitney-houstons-funeral-in-newark.html">

<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">

<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">

<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

<meta name="weibo:article:create_at" content="2013-03-29 16:34:33 +0800" />

<meta name="weibo:article:update_at" content="2013-03-29 16:49:54 +0800" />

[/code]

更多 OpenGraph META 请点击这里这里（需翻墙）、Twitter
Card（需翻墙）

自定义 Meta 标签

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

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

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

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

[/code]

公司/服务 Meta 标签

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

<meta name="readability-verification" content="E7aEHvVQpWc8VHDqKvaB2Z58hek2EAv2HuLuegv7" />

<meta name="google-site-verification" content="4SMIedO1X4IkYrYuhEC2VuovdQM36Xxb0btUjElqQyg" />

<meta name="ICBM" content="40.746990, -73.980537" />

<meta name="generator" content="WordPress 3.3.1" />

<meta name="norton-safeweb-site-verification" content="tz8iotmk-pkhui406y41y5bfmfxdwmaa4a-yc0hm6r0fga7s6j0j27qmgqkmc7oovihzghbzhbdjk-uiyrz438nxsjdbj3fggwgl8oq2nf4ko8gi7j4z7t78kegbidl4" />

[/code]

苹果设备 Meta 标签

<meta name="apple-mobile-web-app-title" content="My App" /><!-- New in iOS6 -->

<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=device-width; content=" />

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

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

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

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

<link href="http://github.com/images/touch-icon-iphone4.png" rel="apple-touch-icon-precomposed" sizes="114x114" />

<link href="http://github.com/images/touch-icon-ipad.png" rel="apple-touch-icon-precomposed" sizes="72x72" /> <link href="http://github.com/images/apple-touch-icon-57x57.png" rel="apple-touch-icon-precomposed" sizes="57x57" />

[/code]

Internet Explorer Meta 标签

<meta name="msapplication-TileImage" content="images/benthepcguy-144.png"/><!-- Windows 8 -->

<meta name="msapplication-TileColor" content="#d83434"/><!-- Windows 8 -->

<meta http-equiv="MSThemeCompatible" content="No"/>

<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="IE=edge,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" />

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

<meta name="msvalidate.01" content="6E3AD52DC176461A3C81DD6E98003BC9" />

<meta http-equiv="cleartype" content="on" />

[/code]

TweetMeme Meta 标签

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

[/code]

博客分类 Meta 标签

<meta name="blogcatalog" />

[/code]

Rails Meta 标签

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

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

[/code]

HTML Link 标签

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

<link title="Atom 0.3" href="https://example.com/feed.atom" rel="alternate" type="application/atom+xml" /> <link href="/favicon.ico" rel="shortcut icon" type="image/ico" />

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

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

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

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

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

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

<link title="Styleguide" href="http://paulrobertlloyd.com/about/styleguide/" rel="bookmark" />

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

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

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

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

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

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

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

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

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

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

<link href="http://www.example.com/wp-includes/wlwmanifest.xml" rel="wlwmanifest" type="application/wlwmanifest+xml" />

<link title="FAQ" href="/faq" rel="help" />

<link href="https://playfoursquare.s3.amazonaws.com/press/logo/foursquare-logo.svg" rel="logo" type="image/svg" />

<link href="/w3c/p3p.xml" rel="P3Pv1" />

<link href="https://plus.google.com/115081025762845243709/" rel="publisher" />

<link href="http://du3itj18e4z0b.cloudfront.net/7b29fe/images/icon-facebook.gif" rel="image_src" type="image/jpeg" />

<link href="humans.txt" rel="author" type="text/plain" />

<link href="http://thenextweb.com/2009/01/08/how-to-snap-up-that-twitter-username-youve-always-wanted/" rel="original-source" />

<link title="Microformats" href="http://microformats.org/profile/specs/" rel="profile" />

<link href="http://gmpg.org/xfn/11" rel="profile" />

<link href="https://chrome.google.com/webstore/detail/noojglkidnpfjbincgijbaiedldjfbhh" rel="chrome-webstore-item" />

[/code]

其它资源

- HTML5
Boilerplate explanations and suggestions of header tags

- Dublic
Core Meta Tags

- Apple
Meta Tags

- OpenGraph
Meta Tags

- Link
Tag Meaning

- Google
Chrome HTML5 Tags

本文原文：Complete
list of HTML META tags

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

你需要知道的 HTML &lt;META&gt;

基本 HTML Meta 标签

OpenGraph Meta Tags

自定义 Meta 标签

公司/服务 Meta 标签

苹果设备 Meta 标签

Internet Explorer Meta 标签

TweetMeme Meta 标签

博客分类 Meta 标签

Rails Meta 标签

HTML Link 标签

其它资源

你需要知道的 HTML <META>