html中meta元素含义详解以及富媒体对象meta property=

来源：网络文章列表 2018-11-19 8

meta是元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。og是一种新的HTTP头部标记，即这种协议可以让网页成为一个“富媒体对象”。

一、meta元素含义详解

meta是元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容摘要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。

meta 标签的 name 属性

<meta name="keywords" content="HTML,ASP,PHP,SQL">

name 属性由name=“name的描述信息”组成，name的值在html，xhtml 里都并没有预先设定，因此你可以随便定义。一般定义为对自己和源文档的读者来说富有意义的名称。如keywords、description，author等等。

常见的name定义有如下：

1、<meta name="Generator" contect="">     用以说明生成工具（如Microsoft FrontPage 4.0）等；
2、<meta name="KEYWords" contect="">      向搜索引擎说明你的网页的关键词；
3、<meta name="DEscription" contect="">   告诉搜索引擎你的站点的主要内容；
4、<meta name="Author" contect="你的姓名"> 告诉搜索引擎你的站点的制作的作者；
5、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">
　 其中的属性说明如下：
　 设定为all：文件将被检索，且页面上的链接可以被查询；
   设定为none：文件将不被检索，且页面上的链接不可以被查询；
   设定为index：文件将被检索；
   设定为follow：页面上的链接可以被查询；
   设定为noindex：文件将不被检索，但页面上的链接可以被查询；
   设定为nofollow：文件将不被检索，页面上的链接可以被查询。

meta 标签的 http-equiv 属性

http-equiv指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部，当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

这样我们在浏览器的头部信息里就能看到如下信息：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

常见的 http-equiv 信息有

1、<meta http-equiv="refresh" content="30"> 每30秒刷新页面

2、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">和 <meta http-equiv="Content-Language" contect="zh-CN">
用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；

3、<meta http-equiv="refresh" contect="n;url=http://yourlink">
   定时让网页在指定的时间n内，跳转到页面http://yourlink；

4、<meta http-equiv="expires" contect="Mon,12 May 2001 00:20:00 GMT">
   可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；

5、<meta http-equiv="pragma" contect="no-cache">
   是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

6、<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">
   cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

7、<meta http-equiv="pics-label" contect="">
   网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；

8、<meta http-equiv="windows-Target" contect="_top">
   强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

9、<meta http-equiv="page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion=6)">
   设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

meta 标签的 content 属性

content = "web教程网"。该值可以是任何有效的字符串。content 属性始终要和 name 属性或 http-equiv 属性一起使用。

常见的meta标签还有：

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->

二、富媒体对象meta标签属性 property="og"含义及使用说明

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标签，将认为og:type 标签是每一段内容的起始处，例如：

<meta property=”og:type” content=”video”/>
<meta property=”og:title” content=”web教程网”/>
<meta property=”og:image” content=”/res/images/logo.jpg″/>
<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMy.html”/>
<meta property=”og:videosrc” content=”http://player.youku.com/player.p ... AutoPlay=true/v.swf”/>
<meta property=”og:width” content=”500″ />
<meta property=”og:height” content=”416″ />
<meta property=”og:type” content=”video”/>
<meta property=”og:title” content=”web教程网”/>
<meta property=”og:image” content=”/res/images/logo.jpg″/>
<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMyyyyyyyyyyyyyyyy.html”/>
<meta property=”og:videosrc” content=”http://player.youku.com/player.p ... AutoPlay=true/y.swf”/>
<meta property=”og:width” content=”600″ />
<meta property=”og:height” content=”716″/>

Open Graph Protocol 协议的好处是

1、能够正确的分享您的内容到SNS网站

2、帮助您的内容更有效的在SNS网络中传播Meta Property标签的应用

3、按照您网页的类型，在<head>中添加入meta标签,并填上相应的内容

4、如果一个页面上有多个需要标识出的内容，您可以重复meta标签

使用Open Graph Protocol应注意

meta property=og代码的功能并不等同于网页的meta name标签，两者针对的对象不一致，功能不同。

如果网站上要使用Open Graph Protocol，那么，meta property=og和meta name、Title标签应同时赋值。

一般常见的<head>如下：

<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>web教程网</title>
<meta property=”og:title” content=”web教程网” />
<meta property=”og:type” content=”编程教程”/>
<meta property=”og:url” content=”http://www.jsphp.net” />
<meta property=”og:image” content=”http://www.jsphp.net/res/images/logo.gif”/>
<meta property=”og:site_name” content=”www.jsphp.net” />
<meta property=”og:description” content=”WEB教程网为您提供最新的WEB编程学习资料，教程内容包括帖子、视频、电子书等。我们致力于为您提供优质、通俗易懂的教程，让你在IT技术海洋里不断前行。愿我们能一起用技术改变世界，连接世界，创造新世界。”/>
<meta property=”fb:admins” content=”100001422224225″ />
<meta property=”fb:page_id” content=”241333394220″/>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<meta name=”description” content=”WEB教程网为您提供最新的WEB编程学习资料，教程内容包括帖子、视频、电子书等。我们致力于为您提供优质、通俗易懂的教程，让你在IT技术海洋里不断前行。愿我们能一起用技术改变世界，连接世界，创造新世界。” />
<meta name=”keywords” content=”javascript,php,jquery,json,div,css,html5,html,vue,python,react,java,go” />
</head>

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元