文章已同步至个人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. |
<!-- 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">
为了提高站外内容的传播效率,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" />
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" />
<!-- 从桌面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">
<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" />
Tweetmeme跟踪Twitter上的链接,以给用户更好的体验。它使用一种常用的排序系统,以在这个微博世界里找出最热门的信息。
<meta name="tweetmeme-title" content="Retweet Button Explained" />
<meta name="blogcatalog" />
<meta name="csrf-param" content="authenticity_token"/><meta name="csrf-token" content="/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc="/>
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"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/martini" /><link rel="shortcut icon" type="image/ico" href="/favicon
新闻热点
疑难解答