<meta property="og:需要写的标签"的应用

最新推荐文章于 2025-03-14 11:31:12 发布
最新推荐文章于 2025-03-14 11:31:12 发布
阅读量7.9k 收藏 1
点赞数
分类专栏： html5+CSS3

代码：

<meta property="og:title" content="Pack is for people who love their dogs." />
<meta property="fb:app_id" content="370495083058038" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Pack" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="http://packdog.com/" />
<meta property="og:image" content="http://packdog.com/static/facebook.jpg" />
<meta property="og:description" content="Pack is the new home to capture and share the everyday moments in your dog’s life." />


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.

即这种协议可以让网页成为一个“富媒体对象”。

用了Meta Property=og标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被SNS网站如Fackbook、renren采用。

SNS已经成为网络上的一大热门应用，优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率，2010年F8会议上Facebook公布了一套开放内容协议(Open Graph Protocol)，任何网页只要遵守该协议，SNS就能从页面上提取最有效的信息并呈现给用户。


Open Graph Protocol应用指南

参与到Open Graph Protocol的好处

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

● 帮助您的内容更有效的在SNS网络中传播

Meta Property标签的应用

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

● 如果一个页面上有多个需要标识出的内容怎么办？

您可以重复meta标签，将认为og:type 标签是每一段内容的起始处，例如：

<meta property=”og:type” content=”video”/>

<meta property=”og:title” content=”五月天_突然好想你MV现场版”/>

<meta property=”og:image” content=”http://g1.ykimg.com/0100641F464AC21FF0B3ED00F48F151F43D4BF-5F0F-BD39-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.php/sid/XMTIyMTY5NzMy&isAutoPlay=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/0100641F464AC21FF0B3ED00F48F151F43D4BF-5F0F-BD39-76EA-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.php/sid/XXXXXXXXXXXXMTIyMTY5NzMy&isAutoPlay=true/y.swf”/>

<meta property=”og:width” content=”600″ />

<meta property=”og:height” content=”716″/>

● 安装SNS网站插件如人人网插件，同样会出现Meta Property标签，卸载后可以去除。

 

使用Open Graph Protocol应注意

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

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

文章开头举例的B2C网站，<head>如下：

<head>

<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />

<title>Cool Gadgets at the Right Price – Worldwide Free Shipping – ******</title>

<meta property=”og:title” content=”**’sFacebook” />

<meta property=”og:type” content=”product”/>

<meta property=”og:url” content=”http://www.******.com” />

<meta property=”og:image” content=”http://www.******.com/logo.gif”/>

<meta property=”og:site_name” content=”******.COM” />

<meta property=”og:description” content=”CoolGadgets at the RightPrice – Worldwide Free Shipping – ******”/>

<meta property=”fb:admins” content=”100001422224225″ />

<meta property=”fb:page_id” content=”241333394220″/>

<link href=”/css/reset.css” rel=”stylesheet”type=”text/css” />

<link href=”/css/default/all.16666.css” rel=”stylesheet” type=”text/css” />

<script type=”text/javascript” src=”/shop.js”></script>

<script type=”text/javascript” src=”/scripts/all.16666.build.js”></script>

<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />

<meta name=“description” content=”Online shopping for cool gadgets at the right price. ” />

<meta name=“keywords” content=”cool gadgets, cheap gadgets, free shipping” />

</head>

如果你用上了Meta Property标签，你得在后台设置好，不然，就是空白.


原作者：http://gaoke0820.blog.163.com/blog/static/21664965201385104151396/



增加seo好感度，wordpress给文章增加og协议，即meta标签形式如 meta property=”og:
wtuocm的博客
04-26 1170
这个标题是什么意思？什么是og协议。先不说到底是什么意思。可能大家在一些博客上面，有时候一篇文章，你查看源代码的时候，会在里面，发现如“meta property=”og:description””、“meta property=”og:site_name””之类的代码。这个就是og协议。 这个协议有什么好处？据说这个东西是标明原创的一个要素。经过小白几个网站的测试。使用这个og协议的网站，明显百度要更青睐。收录更快。这是我亲测得到的结果。所以，我准备把其他几个没有og协议的站点也改进一下。 本.
如何给网站添加 OG 协议
白泽的博客
10-29 1093
示例参考： <meta property="og:site_name" content="Colby Fayock" /> <meta property="og:title" content="Anyone Can Map! Inspiration and an introduction to the world of mapping - Colby Fayock" /> <meta property="og:description" content="..
metaproperty(className, propertyName)：更容易检索 meta.property 对象。-matlab开发
05-29
包括这三个功能： - 元属性（类名，属性名） - 元属性（类名） - meta.property.fromName(className, propertyName) 通过 ?-operator 和 metaclass- 或 meta.class.fromName- 函数可以方便地在 MATLAB 中检索 meta.class 对象。 此提交旨在提供类似的方法来检索 meta.property 对象。 元属性函数的输入非常灵活。 需要 meta.property 对象的一个​​突出例子是 event.proplistener 对象的构造。 还可以查看这些函数的帮助以了解有关它们的更多信息。 metaproperty函数采用可选参数来基于属性属性过滤结果。
HTMl中Meta标签详解以及meta property=og标签含义
乔亚菲的博客
11-24 819
meta是用来在HTML文档中模拟HTTP协议的响应头报文。META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的标记和标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等
＜meta＞中属性的组合实现哪些功能？
2301_79698214的博客
03-14 626
②default-style：指定页面优先使用的样式表，content属性的值必须匹配同一文档中的一个link元素上的title属性的值，或者必须匹配同一文档中的一个style元素上的title属性的值。content中的值决定允许抓取的类型，必须同时包含两个值：是否允许索引（index）和是否跟踪链接（follow，也可以理解为是否允许沿着网页中的超级链接继续抓取）。两者的功能是一样的。通常是content配合使用。charset属性声明了页面的字符编码，如果某个元素使用lang属性，他将被局部的覆盖。
meta property=og标签含义及作用
GeniusSnail
12-14 7761
Meta Property=og标签是什么呢?5 `: `0 U3 z& e2 i0 |8 O; R8 E( C 　　og是一种新的HTTP头部标记，即Open Graph Protocol： ) F' e' P8 w2 a3 c  F# t3 f 　　The Open Graph Protocol enables any web page to become a rich obje
meta标签
arthur的博客
02-13 279
meta标签
关于网站的meta标签里有property="og:title"
farmerXU的博客
05-13 5704
无意中看到一个人博客网站的源代码meta里面property="og:title"觉得好奇就查了一下； og是一种新的HTTP头部标记，即Open Graph Protocol，这种协议可以让网页成为一个“富媒体对象”。 OG主要标签属性 og:title 标题 og:type 类型 常用值:article book movie og:image 略缩图地址 og:url 页面地址 og:description 页面的简单描述 og:site_name 页面所在网站名 og:videosrc 视频或者F
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>MixDrop - Download P15-2-2</title> <meta name="description" content="" /> <meta name="keywords" content="mixdrop,share file,share video,upload file,upload video" /> <meta property="og:title" content="MixDrop - Download P15-2-2" /> <meta property="og:description" content="" /> <meta name="verified-code" content="035b8906-2381-4a3a-9d4c-3b2ae07293e4"> <!--<meta name="robots" content="nosnippet">--> <meta name="a.validate.02" content="ctm1Vhh9zx0o7ew5xlkxmA8MjHBDjK2gY_5x" /> <link rel="icon" type="image/png" href="/imgs/v2/favicon-32x32.png" sizes="32x32" /> <link rel="icon" type="image/png" href="/imgs/v2/favicon-16x16.png" sizes="16x16" /> <meta name="csrf" content="ad30be518f926f5df9e823b3a1280889"> <meta name="clckd" content="ebd626d58
最新发布
04-22
此外，检查是否有社交媒体用的Open Graph标签，比如og:title等，但可能在基础分析中不需要涉及。 然后要组织回答的结构，先解释HTML结构，然后分别说明meta标签和标题信息，可能给出示例代码，并指出每个部分的作用...
<!doctype html> <html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>汉的解释|汉的意思|汉典“汉”字的基本解释</title> <meta name="title" content="汉的解释|汉的意思|汉典“汉”字的基本解释"> <meta name="keywords" content="左：氵，右：又。" /><meta property="og:title" content="“汉”字的解释 | 汉典" /> <meta property="og:image" content="//www.zdic.net/images/logo-zh-cn.png" /> <meta property="og:description" content="“汉”字的解释，释义，异体字，音韵方言，部首笔画，康熙字典，说文解字，字源字形" /> <meta name="description" content="“汉”字的解释，释义，异体字，音韵方言，部首笔画，康熙字典，说文解字，字源字形" /> <meta property="og:url" content="//www.zdic.net/hans/汉" /> <link rel="canonical" href="//www.zdic.net/hans/汉" /> <link rel="alternate" hreflang="x-default" href="//www.zdic.net/hans/汉" /> <link rel="alternate" hreflang="zh-Hans" href="//www.zdic.net/hans/汉" /> <link rel="alternate" hreflang="zh-Hant" href="//www.zdic.net/hant/汉" /> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <meta name="apple-mobile-web-app-title" content="汉典" /> <meta name="theme-color" content="#8b411c" /> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-161009-3"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-161009-3'); </script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5789084355642416" crossorigin="anonymous"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3df9beb4da8d56b1d05ad32a8e6cf208"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <link type="text/css" rel="stylesheet" media="screen" href="/style.css" /
03-15
<think>好的，用户想查询汉字“汉”的相关信息。首先，我需要整理关于“汉”的基本解释、字形结构、拼音以及可能的编码信息。根据提供的引用，特别是引用[4]中提到的基本汉字有20902个，Unicode编码在19968到40869...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using Vite" /> <link rel="icon" type="image/png" href="src/assets/maxunlogo.png"> <title>Maxun | Open Source No Code Web Data Extraction Platform</title> </head> <body> <script type="module" src="/src/index.tsx"></script> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <!-- Vite will automatically inject the necessary scripts here during the build --> </body> </html>
03-11
<meta property="og:title" content="Maxun | 开源无代码网页数据提取平台"> <meta property="og:image" content="/social-preview.png"> ``` 3. **添加 PWA 支持** ```html <!-- 在 head 中追加 --> <link ...
meta的属性
路在脚下，幸福在手中，莫贪！！！！！
06-14 2001
meta的属性 参考文献：1、http://www.cnblogs.com/esshs/articles/157588.html                      2、http://www.oschina.net/question/54100_17414 1、Content-Type和Content-Language (显示字符集的设定) 　　说明：设定页面使用的字符集，用以说明主
＜meta property=“og:type“ content=“website“＞
lixin5456985的博客
11-01 750
​这段代码是HTML中的一部分，具体来说，它是一个用于定义Open Graph协议的meta标签。
网站添加头部Meta property=og协议的使用方法详解教程
weixin_41876860的博客
07-23 795
Meta Property=og怎么使用？如何调用og:type？怎么在文章中调用og:title？如何使用调取文章og:image？本文将介绍什么是Meta Property=og协议以及该协议的用法！什么是Meta Property=og协议？og是一种新的HTTP头部标记（Open Graph协议）这种协议可以让网页...
HTML中Meta标签详解以及meta property=og标签含义
热门推荐
喵叫兽的博客
09-18 1万+
  meta是用来在HTML文档中模拟HTTP协议的响应头报文。META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的&lt;HEAD&gt;标记和&lt;TITLE&gt;标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值