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>
版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接