如何使用Facebook共享的'og'(Open Graph)元标记

Vig*_*M D 115 meta facebook-opengraph

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

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

我听说过ogmeta标签,但我不知道怎么说.

小智 350

使用:

<!-- 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="" />
Run Code Online (Sandbox Code Playgroud)

根据您网页的内容填写内容="...".

有关更多信息,请访问2013年每个网页应具有的18个元标记.

  • 1)Facebook将阅读<meta name ="author">标签,并在有人共享页面时在预览中显示2)Facebook现在支持<meta property ="article:author">(详情请访问http:// giannopoulos.net/2015/06/20/how-to-add-authorship-information-for-facebook-pinterest-and-google-on-your-blog/)并显示指向您的Facebook个人资料的链接(如果您确实在文章中添加了一个链接:作者)3)Google现在以所谓的"Rich Snippets"(https://developers.google.com/structured-data/)的形式查找丰富的数据 (2认同)

Lix*_*Lix 41

Facebook使用所谓的开放图谱协议来决定共享链接时要显示的内容.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">
Run Code Online (Sandbox Code Playgroud)

您需要在<head>HTML文件中放置这些或类似的元标记.不要忘记替换自己的值!

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


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

这里需要注意的一点是,每次更改元标记时,都需要再次通过调试器提供URL ,以便Facebook清除其服务器上缓存的所有关于URL的数据.


Lou*_*tto 28

我为meta生成了一个工具.它预先配置了Facebook,Google +和Twitter的条目,您可以在这里免费使用:http://www.groovymeta.com

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

  • 链接坏了,可惜! (2认同)