前端开发

 首页 > 前端开发 > html教程 > HTMl中Meta标签详解以及meta property=og标签含义

HTMl中Meta标签详解以及meta property=og标签含义

分享到:
【字体:
导读:
         [导读] meta是用来在HTML文档中模拟HTTP协议的响应头报文。META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的HEAD标记和TITLE标记之间,它提供用户不可见的信息。meta标签通常用来...

meta是用来在HTML文档中模拟HTTP协议的响应头报文。META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的标记和标记之间,它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级,等等。</p> <p><br></p> <p><strong>name 属性</strong></p> <pre class="brush:html;toolbar:false"><meta name="Generator" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等; <meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词; <meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容; <meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者; <meta name="Robots" contect= "all|none|index|noindex|follow|nofollow"></pre> <p><strong>其中的属性说明如下:</strong></p> <p> 设定为all:文件将被检索,且页面上的链接可以被查询;</p> <p>   设定为none:文件将不被检索,且页面上的链接不可以被查询;</p> <p>   设定为index:文件将被检索;</p> <p>   设定为follow:页面上的链接可以被查询;</p> <p>   设定为noindex:文件将不被检索,但页面上的链接可以被查询;</p> <p>   设定为nofollow:文件将不被检索,页面上的链接可以被查询。</p> <p><br></p> <p><strong>http-equiv属性</strong></p> <pre class="brush:html;toolbar:false"><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等字符集; <meta http-equiv="Refresh" contect="n;url=http://yourlink">定时让网页在指定的时间n内,跳转到页面http://yourlink; <meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式; <meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出; <meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式; <meta http-equiv="Pics-label" contect="">网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的; <meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用; <meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20,transtion=6)">设定进入和离开页面时的特殊效果,这个功能即FrontPage中的“格式/网页过渡”,不过所加的页面不能够是一个frame页面。</pre> <p><span style="color: rgb(255, 0, 0);"><br></span></p> <p><span style="color: rgb(255, 0, 0);">Open Graph Protocol</span></p> <p><span style="color: rgb(255, 0, 0);">Meta Property=og</span><span style="color: rgb(255, 0, 0);">标签是什么呢?</span></p> <p><span style="color: rgb(255, 0, 0);">og是一种新的HTTP头部标记,即Open Graph Protocol:</span></p> <p><br></p> <p><span style="color: rgb(255, 0, 0);">The Open Graph Protocol enables any web page to become a rich object in a social graph.+ n3 }</span></p> <p><br></p> <p>即这种协议可以让网页成为一个“富媒体对象”。</p> <p>用了Meta Property=og标签,就是你同意了网页内容可以被其他社会化网站引用等,目前这种协议被SNS网站如Fackbook、renren采用。</p> <p>SNS已经成为网络上的一大热门应用,优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率,2010年F8会议上Facebook公布 了一套开放内容协议(Open Graph Protocol),任何网页只要遵守该协议,SNS就能从页面上提取最有效的信息并呈现给用户。</p> <p><br></p> <pre class="brush:html;toolbar:false"><meta property=”og:type” content=”video”/> <meta property=”og:title” content=”五月天_突然好想你MV现场版”/> <meta property=”og:image” content=”http://g1.ykimg.com/0100641F464A ... 9-76EA-E5E20A1887C4″/> <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=”五月天_突然好想你MV现场版_AA”/> <meta property=”og:image” content=”http://g1.ykimg.com/0100641F464A ... EA-E5E20A1887C44444″/> <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″/></pre> <p><br></p> <div class="clearfix divider_dashed333"></div> <div class="lh24 f12 mt20 bb1e pb20"> <div class="fr" style=" padding-right: 20px"> <ul class="paginationa my_ajax"> <li id="fav_wJ1k42Qw05q39mG_bottom"><a href="javascript:;" class="arfav" data-info_id="wJ1k42Qw05q39mG" data-info_title="HTMl中Meta标签详解以及meta property=og标签含义" data-info_num="11">收藏(<span id="ar_fav">15</span>)</a></li> <li id="zan_wJ1k42Qw05q39mG_bottom"><a href="javascript:;" class="arzan" data-info_id="wJ1k42Qw05q39mG" data-info_title="HTMl中Meta标签详解以及meta property=og标签含义" data-info_num="11">赞(<span id="ar_zan">23</span>)</a></li> <li id="bao_wJ1k42Qw05q39mG_bottom"><a href="javascript:;" class="arbao" data-info_id="wJ1k42Qw05q39mG" data-info_title="HTMl中Meta标签详解以及meta property=og标签含义" data-info_num="11">举报</a></li> </ul> </div> <span class="f12 blue_lighten mr10 fr" style="width: 200px;"> <span class="lh24 f12 c9 fl">分享到:</span> <div class="bdsharebuttonbox bdshare_t bds_tools get-codes-bdshare fl"><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more" data-cmd="more"></a></div> </span> </div> <div class="clearfix divider_dashed333"></div> </div> <div class="clearfix"></div> <div style="padding:0px 20px;"> <div class="one_half"> <div class="about_author"> <a href="https://www.nbla.cn/article/_a4KPZMRO0G2pj8b.html">浅谈IE678兼容问题</a> <br/> 随着技术日新月异的发展,我以为已经可以完全甩掉ie浏览器,驰骋在新技术的海洋里。却不想,ie兼容问题如影随行。 当然,尝试解决ie浏览器兼容问题,并不代表我会去拥护它。我想做的只是为解决浏览器兼容提供一些个人思路,毕竟,很多公司还会有此类的需求。 一、明确你要兼容的浏览器范围 很简单,当你明确了要兼容的浏... </div> </div> <div class="one_half last"> <div class="about_author"> <a href="https://www.nbla.cn/article/_wN8xGLO40Yqz5QZ.html">跨浏览器窗口大小兼容js及innerWidth、in...</a> <br/>    跨浏览器确定一个窗口的大小不是一件简单的事。Firefox.Safari.Opera和Chrome均为此提供了4个属性:innerWidth、innerHeight、 outerWidth和outerHeight。在Safari和Firefox中,outerWidth和outerHeight返回浏览器窗口本身的尺寸(无论是从最外层的window对象还是从某个框架访问)。在Opera中,这两个属性的值表示页面... </div> </div> <div class="clearfix margin_top5"></div> <div class="one_half"> <div class="popular-posts-area"> <ul class="recent_posts_list"> <li><span><a href="https://www.nbla.cn/article/_xBrjZ2GY53qNYVd.html"><img src="http://static.nbla.cn/Uploads/image/2017-03-30/14908533337047.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="有效网页表单的八条规则_HTML/Xhtml_网页制作" /></a></span><a href="https://www.nbla.cn/article/_xBrjZ2GY53qNYVd.html">有效网页表单的八条规则_HTML/Xhtml_网页制作</a> <i>Jan 31, 2017</i> </li><li><a href="https://www.nbla.cn/article/_o6VBpMXeye2Q0Yd.html">给网站添加 favicon的技巧 网址前面的小图标_HTM</a> <i>Feb 01, 2017</i> </li><li><a href="https://www.nbla.cn/article/_NBlx6M5Jdj2w4Zn.html">HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)</a> <i>May 15, 2016</i> </li><li><span><a href="https://www.nbla.cn/article/_Ekre6q0nKX287WZ.html"><img src="http://static.nbla.cn/Uploads/image/2019-09-17/15686974087070.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="QQ快速登录的实现原理" /></a></span><a href="https://www.nbla.cn/article/_Ekre6q0nKX287WZ.html">QQ快速登录的实现原理</a> <i>Sep 17, 2019</i> </li> </ul> </div> </div> <div class="one_half last"> <div class="popular-posts-area"> <ul class="recent_posts_list"> <li><a href="https://www.nbla.cn/article/_AwpokL39YYMrEa7.html">HTML表格标记教程(39):表头的亮边框色属性BORDERC</a> <i>Jan 01, 2017</i> </li><li><a href="https://www.nbla.cn/article/_gjwA1qk8J1My9pZ.html">掌握常用的用于网页中引用内容的HTML标记_HTML/</a> <i>Jan 26, 2017</i> </li><li><span><a href="https://www.nbla.cn/article/_o7P3Gq991vq1lR6.html"><img src="http://static.nbla.cn/Uploads/image/2017-03-30/1490853391490.jpg?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="使用整洁的HTML标记构建页面_HTML/Xhtml_网页制作什么是“整洁”..." /></a></span><a href="https://www.nbla.cn/article/_o7P3Gq991vq1lR6.html">使用整洁的HTML标记构建页面_HTML/Xhtml_网页制作什么是“整洁”的HTML标记?为什么要这样?只要能正常显示不就够了吗?可扩展,设备友好,语义化和易升级Do和Don't ("要"和"不要")</a> <i>Feb 02, 2017</i> </li><li><span><a href="https://www.nbla.cn/article/_KXV57MAVXr24BbO.html"><img src="http://static.nbla.cn/Uploads/image/2017-03-30/14908545364268.jpg?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="IE9beta版本浏览器对HTML5/CSS3的支持_HTML/Xhtml_网页制IE9对CS..." /></a></span><a href="https://www.nbla.cn/article/_KXV57MAVXr24BbO.html">IE9beta版本浏览器对HTML5/CSS3的支持_HTML/Xhtml_网页制IE9对CSS3新特性的支持:IE9对CSS3选择器的支持:IE9对HTML5新特性的支持:IE9对HTML5表单的支持:</a> <i>Feb 26, 2017</i> </li> </ul> </div> </div> </div> </div> </div> <div class="clearfix margin_top7"></div> <div class="footer1 bggraph1"> <div class="container"> <div class="one_fourth"> <ul class="faddress"> <li id="myfooter"> <div class="logo"><a href="http://www.nbla.cn" id="logo"><span></span></a></div> </li> <li>        php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。</li> <li>在这里……</li> </ul> </div> <div class="one_fourth"> <div class="ftags"> <h3 class="nocaps">Tags</h3> <ul> <li><a href="#">共同学习</a></li> <li><a href="#">发现</a></li> <li><a href="#"> 收藏</a></li> <li><a href="#"> 分享</a></li> <li><a href="#"> 共享</a></li> <li><a href="#">共鸣</a></li> <li><a href="#">专注</a></li> <li><a href="#">共同进步</a></li> </ul> </div> </div> <div class="one_fourth"> <div class="twitter_feed"> <h3 class="nocaps">About</h3> <div class="left"><i class="fa fa-twitter fa-lg"></i></div> <div class="right">     <a href="javascript:;" target="_blank">特别鸣谢</a>     <a href="javascript:;" target="_blank">使用协议</a><br/><br/>     <a href="javascript:;" target="_blank">意见反馈</a>     <a href="javascript:;" target="_blank">网站投稿</a> </div> </div> </div> <div class="one_fourth last"> <!-- <h3 class="nocaps">We  Group</h3> --> <img src="https://www.nbla.cn/Template/Home/images/php_wx.jpg" style="float:left;width: 110px; text-align: center;"> <img src="https://www.nbla.cn/Template/Home/images/php_xcx.jpg" style="float:left;width: 110px; text-align: center;margin-left: 20px"> </div> </div> </div> </div> <div class="clearfix"></div> <div class="copyright_info"> <div class="container"> <div> 网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱  <a href="https://beian.miit.gov.cn" target="_blank">冀ICP备18013926号-2</a> </div> </div> </div> <a href="#" class="scrollup">Scroll</a> </div> <script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/universal/jquery.js"></script> <script src="https://www.nbla.cn/Template/Home/js/style-switcher/jquery-1.js"></script> <script src="https://www.nbla.cn/Template/Home/js/style-switcher/styleselector.js"></script> <script src="https://www.nbla.cn/Template/Home/js/mainmenu/bootstrap.min.js"></script> <script src="https://www.nbla.cn/Template/Home/js/scrolltotop/totop.js" type="text/javascript"></script> <script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/mainmenu/sticky.js"></script> <script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/mainmenu/modernizr.custom.75180.js"></script> <script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/lightbox/jquery.fancybox.js"></script> <script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/lightbox/custom.js"></script> <script src="https://www.nbla.cn/Template/Home/js/mainmenu/fhmm.js"></script> <script type="text/javascript"> $('.dropdown-toggle').dropdownHover().dropdown(); $(document).on('click', '.fhmm .dropdown-menu', function (e) { e.stopPropagation() }); </script> <script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/customs.js"></script> <script src="https://www.nbla.cn/Template/Home/js/form/jquery.form.min.js"></script> <script> var baseUrl = 'https://www.nbla.cn/ajax/act'; </script> <script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/custom.js"></script> </body> </html>