HTML Meta 标签大全

一、 基本属性

     <meta> 元素可提供有关某个 HTML 元素的元信息 (meta-information)，比如描述、针对搜索引擎的关键词以及刷新频率等等信息。meta标签主要包含下面四个属性：

1. name:属性名称，可以是任意字符串。
2. content: 属性值。
3. scheme：属性值的格式。
4. http-equiv: 用作设置HTTP头，比如content-type,expires,refresh,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把其他社交网站建构的网络链接起来，将创造一个更聪明、更与社交链接、更人性化也更具语意意识的网络。>>Facebook Develops(需翻墙)

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

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

官方文档>>>Supported Meta Tags，另外，还有关于icon的相关文档，看文档吧>>>Configuring Web Applications。

五、微软IE桌面固定相关标签

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

更多相关信息，可以查看 MDSN。

转载请注明本文地址: https://www.igs.cc/05/23/377/ | IGS's Blog