如何使用“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 文件的 &lt;head&gt; 中。不要忘记将值替换为您自己的值!

有关更多信息,您可以在其文档中阅读有关 Facebook 如何使用这些元标记的所有信息。这是那里的教程之一 - https://developers.facebook.com/docs/opengraph/tutorial/


Facebook 为我们提供了一个很棒的小工具来帮助我们处理这些元标记 - 您可以使用 Debugger 查看 Facebook 如何查看您的 URL,它甚至会告诉您是否存在问题。

这里需要注意的一点是,每次您对元标记进行更改时,您都需要再次通过Debugger 提供 URL,以便 Facebook 将清除缓存在其服务器上的所有数据你的网址。

【讨论】:

我在描述中看到了 html 标签,你知道如何解决这个问题吗?

以上是关于如何使用“og”(开放图)元标记进行 Facebook 分享的主要内容,如果未能解决你的问题,请参考以下文章

每个joomla文章添加不同元标记

Facebook 开放图元标记 og:图像问题

如何从 URL 响应中删除 OG 元标记值

使用 lxml 有效地解析元标记?

Facebook 开放图元标签最大内容长度

元标记内的属性 property="og:title" 是啥?