文章已同步至个人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. c++学习笔记——构造函数

    构造函数定义:每个类都分别定义了它的对象被初始化的方式,类通过一个或几个特殊的成员函数来控制其对象的初始化过程,这些函数叫做构造函数. 需要注意的几点: 1:构造函数不能被声明为const的,当我们创 ...

  2. Nginx配置文件（nginx.conf）配置详解

    Nginx的配置文件nginx.conf配置详解如下: user nginx nginx ; Nginx用户及组:用户 组.window下不指定 worker_processes 8; 工作进程:数目 ...

  3. scala 学习心得

    scala 安装步骤 文件下载地址:www.scala-lang.org(Please report bugs at https://issues.scala-lang.org/. We welcom ...

  4. linux 下文件节点索引

    最近发现一个奇怪的问题,就是一个pyhton 后台的服务一直打印日志文件,在中间我用vim看日志文件,关闭时习惯性的:wq退出,在此之后日志文件就不输出了. 1 对于这个现象我开始认为是python ...

  5. SQL in与exists

    无可置疑,如果in()的结果集非常庞大,那么效率必然是低的. 但EXISTS subquery根据其语法可知在SQL中的作用是:检验查询是否返回数据.如果在 Dictionary 对象中指定的关键字存 ...

  6. 转 A Week with Mozilla's Rust

    转自http://relistan.com/a-week-with-mozilla-rust/ A Week with Mozilla's Rust I want another systems la ...

  7. Linux 夸平台 移植 Win32

    1.代码格式 大量的 警告 不识别的字符(936),请保存为unicode 以免丢失数据,好多参考说忽略此警告. 但是很多错误都是由于这个警告引起的.将大量的.h .cpp 的utf 8 数据用txt ...

  8. 基于TP框架的ThinkCMF,控制器display方法源码分析

    昨天在写代码的时候,看见写了无数次的模版渲染方法:$this->display(),突然很想弄清楚它是如何实现的. 今天不忙,就分析了一下. class TestController exten ...

  9. memalign vs malloc - 使用O_DIRECT参数open一个文件并读写

    听说使用odirect参数打开文件时能够以扇区的单位进行读写. 于是open了一个块设备文件/dev/sdo,当然还要带上读写参数O_RDWR 然后进行读写时出错了. 找了一会发现问题根本在于读写的b ...

  10. ubuntu12.04安装svn 1.7(转载)

    ubuntu12.04安装svn 1.7 分类: ubuntu2013-10-22 16:03 239人阅读 评论(0) 收藏 举报 svnubuntu   目录(?)[+]   1.问题     在 ...