如何使用“og”（开放图）元标记进行 Facebook 分享答案

【问题标题】：How to use the 'og' (Open Graph) meta tag for Facebook share如何使用“og”（开放图）元标记进行 Facebook 分享
【发布时间】：2012-07-21 22:26:03
【问题描述】：

Facebook 从我的网站获取所有图片。

我只想分享该页面上的一张图片。

我听说过og 元标记，但我不知道该怎么说。

【问题讨论】：

标签： facebook-opengraph meta

【解决方案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 标签，你知道如何解决这个问题吗？