Html Meta标签

Coding Alan 11年前 (2014-02-06) 35363次浏览 0个评论 扫描二维码

Metadata被解释为“data about data”,根据wiki可能是来源于希腊语μετά(μετά = “after”, “beyond”, “adjacent”, “self”)。Meta信息常用于描述图片分辨率,创建日期等等,metadata常被译为元数据,在html中meta标签也广为应用,通常放置在<head>标签之间。下面进行详细介绍

基础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=”reply-to” content=”email@hotmail.com”>
内容所有者:<meta name=”owner” content=””>
页面url:<meta name=”url” content=”http://www.websiteaddrress.com”&gt;
标识符url:<meta name=”identifier-URL” content=”http://www.websiteaddress.com”&gt;
目录/黄页提交:<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标签

Facebook于2010年的F8会议上公布了Open Graph Protocol(官方网站:http://ogp.me/ ,同时还提供了一个供调试的页面:https://developers.facebook.com/tools/debug/ ),作为一种可供SNS引用的“富媒体”标签,为Facebook,Renren等所使用。
页面标题:<meta name=”og:title” content=”The Rock”/>
网站类型:<meta name=”og:type” content=”movie”/>
网站url:<meta name=”og:url” content=”http://www.imdb.com/title/tt0117500/”/&gt;
图片地址:<meta name=”og:image” content=”http://ia.media-imdb.com/rock.jpg”/&gt;
网站名:<meta name=”og:site_name” content=”IMDb”/>
页面描述:<meta name=”og:description” content=”A group of U.S. Marines, under command of…”/>
Facebook Fan Page ID:<meta name=”fb:page_id” content=”43929265776″ />
email地址:<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&#8221; />
视频高度:<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:audio” content=”http://example.com/amazing.mp3&#8243; />
音频标题:<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标签
使用自定义meta标签来存储JS所需的数据,而无需在JS中添加相应代码。如下例中是为Google分析添加的自定义Meta标签:

<meta name=”google-analytics” content=”1-AHFKALJ”/>
<meta name=”disqus” content=”abcdefg”/>
<meta name=”uservoice” content=”asdfasdf”/>
<meta name=”mixpanel” content=”asdfasdf”/>
公司/服务Meta标签
CLAIMID
<meta name=”microid” content=”mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7″ />
APPLE META标签
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta content=”yes” name=”apple-touch-fullscreen” />
<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”>
IE META标签

<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/”/&gt;
<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标签

<meta name=”tweetmeme-title” content=”Retweet Button Explained” />
博客目录META标签
<meta name=”blogcatalog” />
RAILS META标签

<meta name=”csrf-param” content=”authenticity_token”/>
<meta name=”csrf-token” content=”/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc=”/>
APPLE 标签

<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=”72×72″ href=”touch-icon-ipad.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ 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” />
HTML Link标签

RSS地址:<link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”http://feeds.feedburner.com/martini&#8221; />
ico文件路径:<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”/&gt;
<link rel=’shortlink’ href=’http://blog.unto.net/?p=353&#8242; />
<link rel=’archives’ title=’May 2003′ href=’http://blog.unto.net/2003/05/&#8217; />
<link rel=’index’ title=’DeWitt Clinton’ href=’http://blog.unto.net/&#8217; />
<link rel=’start’ title=’Pattern Recognition 1′ href=’http://blog.unto.net/photos/pattern_recognition_1_about/&#8217; />
<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/&#8217; />
<link rel=’next’ title=’Not blog’ href=’http://blog.unto.net/meta/not-blog/&#8217; />
<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″/&gt;
<link rel=”first” href=”http://www.syfyportal.com/atomFeed.php”/&gt;
<link rel=”next” href=”http://www.syfyportal.com/atomFeed.php?page=4″/&gt;
<link rel=”previous” href=”http://www.syfyportal.com/atomFeed.php?page=2″/&gt;
<link rel=”last” href=”http://www.syfyportal.com/atomFeed.php?page=147″/&gt;

<link rel=’shortlink’ href=’http://smallbiztrends.com/?p=43625&#8242; />
<link rel=”canonical” href=”http://smallbiztrends.com/2010/06/9-things-to-do-before-entering-social-media.html&#8221; />
<link rel=”EditURI” type=”application/rsd+xml” title=”RSD” href=”http://smallbiztrends.com/xmlrpc.php?rsd&#8221; />
<link rel=”pingback” href=”http://smallbiztrends.com/xmlrpc.php&#8221; />
<link media=”only screen and (max-device-width: 480px)” href=”http://wordpress.org/style/iphone.css&#8221; type=”text/css” rel=”stylesheet” />

喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址