chaihongjun.me

Meta标签全解析

  1. Basic HTML Meta Tags (基础Meta标签)

  2. OpenGraph Meta Tags(OpenGraph Meta标签,OpenGraph是facebook的信息实时分享平台)

  3. Create Custom Meta Tags(创建自定义Meta标签)

  4. Company/Service Meta Tags(公司企业/服务 Meta标签)

    1.ClaimID (ClaimID Meta标签)

    2.Apple Meta Tags (Apple设备 Meta标签)

    3.Internet Explorer Meta Tags (WEB浏览器 Meta标签)

    4.TweetMeme Meta Tags (TweetMeme Meta标签,Twitter上的跟踪链接) 

    5.Blog Catalog Meta Tags (博客目录 Meta标签)

    6.Rails Meta Tags (Rails 框架 Meta标签)

    7.Apple Tags (Apple其他标签)

  5. HTML Link Tags (HTML链接 标签)



Basic HTML Meta Tags

<!-- SEO -->
<meta name="keywords" content="your, tags"/> <!-- 页面关键词  SEO -->
<meta name="description" content="150 words"/> <!-- 页面描述  SEO -->
<meta name="subject" content="your website's subject"> <!-- 网站主题 -->
<meta name="copyright"content="company name"> <!-- 网页版权信息 -->
<meta name="robots" content="index,follow" /> <!-- 蜘蛛爬取 -->

<meta name="language" content="ES"> <!-- 网页语言 -->
<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="https://chaihongjun.me">  <!--页面URL -->
<meta name="identifier-URL" content="https://chaihongjun.me">
<meta name="directory" content="submission">
<meta name="category" content="">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="rating" content="General"> <!-- 定义内容分级,如:14 years(14岁以上),general(普通人),mature(成年人),restricted(限制级),safe for kids(孩童)。 -->
<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 Tags

  为了提高站外内容的传播效率,2010年9月,在F8会议上Facebook公布了一套开放图景协议(Open Graph Protocol),任何网页只要遵守该协议,SNS就能从页面上提取最有效的信息并呈现给用户。通过Open Graph把其他社交网站建构的网络给连接起来,将创造一个更聪明、更与社交连接、更个人化也更具语意意识的网络。

  og是一种新的HTTP头部标记,即Open Graph Protocol:

The Open Graph Protocol enables any web page to become a rich object in a social graph.+ n3 }

   即这种协议可以让网页成为一个“富媒体对象”。用了Meta Property=og标签,就是你同意了网页内容可以被其他社会化网站引用等,目前这种协议被SNS网站如Fackbook、renren采用。SNS已经成为网络上的一大热门应用,优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率,2010年F8会议上Facebook公布 了一套开放内容协议(Open Graph Protocol),任何网页只要遵守该协议,SNS就能从页面上提取最有效的信息并呈现给用户。

<meta name="og:title" content="The Rock"/> <!-- 标题 -->
<meta name="og:type" content="movie"/> <!-- 类型 -->
<meta name="og:url" content="  /> <!-- 链接 -->
<meta name="og:image" content=" /> <!-- 图片 --> 
<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" /> <!-- 页面ID -->

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

  

Create Custom Meta Tags

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. 自定义meta标签存储JS中的数据,替代硬编码的数据到JS中

<meta name="google-analytics" content="1-AHFKALJ"/>
<meta name="disqus" content="abcdefg"/>
<meta name="uservoice" content="asdfasdf"/>
<meta name="mixpanel" content="asdfasdf"/>

Company/Service Meta Tags

CLAIMID

ClaimID was a website that allowed users to create unique profiles that showed personal websites, profiles at other sites, and other biographical information.

ClaimID是一个网站,它允许用户去创建自己唯一的简介,这些简介在其他的网站上显示。

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

APPLE META TAGS

<!-- 在iOS中有两个meta值,apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style,这两个会让网页内容以应用程序风格显示,并使状态栏透明。 -->

<meta name="apple-mobile-web-app-capable" content="yes">
<!--  网站开启对 web app 程序的支持。-->
<!-- 该 meta 可以看出内容为“苹果设备 web 应用程序 xx”,就是说该 meta 是专门定义 web 应用的 -->
<meta content="yes" name="apple-touch-fullscreen" />
<!-- 添加到主屏幕后,全屏显示。 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意: 若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。 -->
<meta name="format-detection" content="telephone=no">
<!-- 告诉设备忽略将页面中的数字识别为电话号码 -->
<meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no">
<!--  视口320宽, 初始化缩放比例2.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" />

TWEETMEME META TAGS

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

BLOG CATALOG META TAGS

<meta name="blogcatalog" />

RAILS META TAGS

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

APPLE TAGS

<meta name="apple-mobile-web-app-capable" 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">
<meta name= "viewport" content = "width = device-width">
<meta name = "viewport" content = "initial-scale = 1.0">
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
<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-startup-image" href="/startup.png">

<link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon.png" />
<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" />


知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»