如何使用“og”(开放图)元标记进行 Facebook 分享
Posted
技术标签:
【中文标题】如何使用“og”(开放图)元标记进行 Facebook 分享【英文标题】:How to use the 'og' (Open Graph) meta tag for Facebook share 【发布时间】:2012-07-21 22:26:03 【问题描述】:Facebook 从我的网站获取所有图片。
我只想分享该页面上的一张图片。
我听说过og
元标记,但我不知道该怎么说。
【问题讨论】:
【参考方案1】:用途:
<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />
<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />
<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
根据你的页面内容填写内容="..."。
欲了解更多信息,请访问18 Meta Tags Every Webpage Should Have in 2013。
【讨论】:
您知道author
标签应该包含作者姓名还是指向个人资料网址的链接?
我认为两者都是可能的。如果您希望您的个人资料图片出现在 Google 搜索页面上帖子的左侧,您应该提供指向您的 google+ 个人资料的链接。
元标签author
表示网站作者或当前文章作者(例如在博客文章中的用法)?
这是一个好的执行吗?谷歌/Facebook/Twitter 会发现这没有错误吗?
1) Facebook 将读取 标签并在有人分享页面时将其显示在预览中 2) Facebook 现在支持 (详情请见giannopoulos.net/2015/06/20/…)并将显示指向您的 Facebook 个人资料的链接(如果您实际上在文章中放置了指向它的链接:作者) 3) 谷歌现在以它所谓的“丰富片段”的形式寻找丰富的数据(developers.google.com/structured-data)【参考方案2】:
我构建了一个用于元生成的工具。它预先配置了 Facebook、Google+ 和 Twitter 的条目,您可以在这里免费使用它:http://www.groovymeta.com
为了进一步回答这个问题,OG
标签(Open Graph)标签的工作方式与元标签类似,应该放在 html 文件的 HEAD 部分。有关如何有效使用 OG 标签的更多信息,请参阅Facebook's best practises。
【讨论】:
感谢@Mogsdad,我已经相应地扩展了我的答案。 链接坏了,很遗憾!【参考方案3】:Facebook 使用所谓的Open Graph Protocol 来决定在您分享链接时显示哪些内容。 OGP 会查看您的页面并尝试决定要显示的内容。我们可以伸出援助之手,真正告诉 Facebook 从我们的页面中获取什么。
我们这样做的方式是使用og:meta
标签。
标签看起来像这样 -
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">
您需要将这些或类似的元标记放在 HTML 文件的 <head>
中。不要忘记将值替换为您自己的值!
有关更多信息,您可以在其文档中阅读有关 Facebook 如何使用这些元标记的所有信息。这是那里的教程之一 - https://developers.facebook.com/docs/opengraph/tutorial/
Facebook 为我们提供了一个很棒的小工具来帮助我们处理这些元标记 - 您可以使用 Debugger 查看 Facebook 如何查看您的 URL,它甚至会告诉您是否存在问题。
这里需要注意的一点是,每次您对元标记进行更改时,您都需要再次通过Debugger 提供 URL,以便 Facebook 将清除缓存在其服务器上的所有数据你的网址。
【讨论】:
我在描述中看到了 html 标签,你知道如何解决这个问题吗?以上是关于如何使用“og”(开放图)元标记进行 Facebook 分享的主要内容,如果未能解决你的问题,请参考以下文章