如何使用Facebook分享的“OG”(开放图表)元标记

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

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

我听说过meta标签,但是我不知道如何放置它。

使用:

 <!-- 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年每个网页应具有的18个元标记

Facebook使用所谓的“ 开放graphics协议”来决定在共享链接时要显示的内容。 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"> 

您需要将这些或类似的meta标签放在HTML文件的<head>中。 不要忘记用你自己的价值取代!

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


Facebook为我们提供了一个很好的小工具来帮助我们处理这些元标记 – 您可以使用debugging器来查看Facebook如何看到您的URL,甚至可以告诉您是否有问题。

这里需要注意的一点是,每次对元标签进行更改时,都需要通过debugging器再次提供URL,以便Facebook将清除服务器上caching的有关URL的所有数据。

我build立了一个元代的工具。 它预先configurationFacebook,Google+和Twitter的条目,您可以在这里免费使用它: http : //www.groovymeta.com

为了回答这个问题, OG标签(Open Graph)标签的工作方式与元标签类似,应该放在HTML文件的HEAD部分。 有关如何有效使用OG代码的更多信息,请参阅Facebook的最佳实践 。