文章已同步至个人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.

二、基本的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把其他社交网站建构的网络给连接起来，将创造一个更聪明、更与社交连接、更个人化也更具语意意识的网络。

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

四、公司/服务 Meta标签

4.1 CLAIMID

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

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

4.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">

<!-- 告诉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" />

4.4 TWEETMEME META TAGS

Tweetmeme跟踪Twitter上的链接，以给用户更好的体验。它使用一种常用的排序系统，以在这个微博世界里找出最热门的信息。

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

4.5 BLOG CATALOG META TAGS

<meta name="blogcatalog" />

4.6 RAILS META TAGS

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

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

五、创建自定义 Meta标签

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

六、HTML Link 标签

6.1 HTML LINK TAGS

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

6.2 APPLE LINK TAGS

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

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

七、HTML5中的变化

The charset attribute specifies the character encoding used by the document. This is a character encoding declaration. If the attribute is present in an XML document, its value must be an ASCII case-insensitive match for the string "UTF-8" (and the document is therefore forced to use UTF-8 as its encoding).

The charset attribute on the meta element has no effect in XML documents, and is only allowed in order to facilitate migration to and from XHTML.

There must not be more than one meta element with a charset attribute per document.

八、参考链接

W3C HTML5 Meta Element

Metatags in HTML 5

HTML Meta Tags

COMPLETE LIST OF HTML META TAGS

DCMI Dublin Core Metadata Initiative

Apple-specific meta tags

LinkTagMeaning

Google Chrome HTML5 Tags

Facebook Open Graph META Tags

HTML Meta标签知多少的更多相关文章

  1. meta 标签

    <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> & ...

  2. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  3. meta标签使用方法总结

    meta标签是用来描述一个HTML网页文档的属性,比如该网页的作者,日期,网页的关键字,刷新,网页等级设定等等,是文档中的最基本的元信息,本文是对meta标签的学习总结,内容大多来自网上各个地方,非原 ...

  4. [转]手机web HTML头信息解释和viewport meta标签解释

    <meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.i ...

  5. html查漏补缺之meta标签

    什么是meta标签? meta标签是html标记head区的一个关键标签,它位于HTML文档的<head>和<title>之间(有些也不是在<head>和<t ...

  6. 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)

    移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...

  7. meta标签

    参考:http://www.jb51.net/web/158860.html META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). 一.HTTP标题信息(HTT ...

  8. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  9. 浏览器内核控制Meta标签说明文档【转】

    背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲 ...

随机推荐

  1. CentOS使用virtualenv搭建独立的Python环境-python虚拟环境

    CentOS使用virtualenv搭建独立的Python环境-python虚拟环境 virtualenv可以搭建虚拟且独立的python环境,可以使每个项目环境与其他项目独立开来,保持环境的干净,解 ...

  2. win 7安装 linux

    http://blog.csdn.net/wuwenxiang91322/article/details/23528619

  3. php.ini 不生效问题extension

    date.timezone = PRC extension_dir = "ext"

  4. POJ 1696 - Space Ant 凸包的变形

    Technorati Tags: POJ,计算几何,凸包 初学计算几何,引入polygon后的第一个挑战--凸包 此题可用凸包算法做,只要把压入凸包的点从原集合中排除即可,最终形成图形为螺旋线. 关于 ...

  5. .Net中几种常见的页面跳转传值方法

    1.ASP Server对象Execute方法 ASP Server对象的Execute方法可以在执行当前页面的过程中将另一个页面执行结果的内容插入到当前页面的输出中.Execute方法带一个参数,是 ...

  6. 重置mysql数据库密码相关方法

    方法一: 在my.ini的[mysqld]字段加入:skip-grant-tables重启mysql服务,这时的mysql不需要密码即可登录数据库 然后进入mysqlmysql>use mysq ...

  7. 搭建DHCP服务器以及DHCP中继服务器

    一.DHCP服务器   1.首先配置DHCP服务器的IP地址(DHCP服务器网卡桥接在VMnet1)   .配置好IP后重启DHCP服务 3.安装DHCP服务器,在这里我用的是YUM安装的(关于YUM ...

  8. 卸载Oracle步骤

    卸载Oracle步骤:1.停止所有与ORACLE相关的服务.2. 使用OUI(Oracle Universal Installer)卸载Oracle软件.   “开始”->“程序”->“O ...

  9. vim不用鼠标复制粘贴

    第一种方法(只能复制行): 在当前行3yy(表示复制3行,多行同理),然后鼠标移到需要粘贴的位置,按p,即可粘贴 第二种方法(无限制): 按v进入visual模式,移动光标(推荐使用hjkl,用熟后比 ...

  10. Java泛型总结（转）

    本文是转载,原文链接:http://www.cnblogs.com/lwbqqyumidi/p/3837629.html 一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: ...