如何使用“ og”(Open Graph) meta 标签来分享 Facebook

小开

Facebook 使用所谓的开放图形协议来决定当你分享一个链接时要显示什么内容。OGP 查看您的页面并试图决定显示什么内容。我们可以伸出援手，实际上说吧 Facebook 从我们的网页。

The way we do that is with og:meta tags.

标签看起来像这样

  <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>中放置这些或类似的 meta 标记。不要忘记替换你自己的值！

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

Facebook 为我们提供了一个很好的小工具来帮助我们处理这些元标签——你可以使用调试器来查看 Facebook 如何看待你的 URL，它甚至会告诉你它是否有问题。

这里需要注意的一点是，每次更改 meta 标签时，都需要再次通过调试器提供 URL，这样 Facebook 就会清除缓存在他们服务器上的有关 URL 的所有数据。

小开

用途:

<!-- 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="" />

根据页面的内容填写内容 = “ ...”。

欲了解更多信息，请访问 译自: 美国《科学》杂志网站(2013)原著: http://www.iacqure.com/blog/18-Meta-tag-Every-Webpage-Should-Have-in-2013/。

小开

我建立了一个元生成工具。它预先配置了 Facebook、 Google + 和 Twitter 的条目，你可以在这里免费使用它: http://www.groovymeta.com

为了更好地回答这个问题，OG标记(Open Graph)的工作方式与 meta 标记类似，应该放在 HTML 文件的 HEAD 部分。有关如何有效地使用 OG 标记的更多信息，请参见 Facebook's best practises。