如何使用“ og”(开放图谱)元标记进行Facebook分享


118

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

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

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

Answers:


355

用:

<!-- 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个Meta标签


您是否知道author标签应包含作者姓名或指向个人资料网址的链接?
tobek 2014年

我认为两者都有可能。如果您希望个人资料图片显示在Google搜索页面上帖子的左侧,则应提供指向google +个人资料的链接。
jurihandl 2014年

meta标签author是网站的作者还是当前文章的作者(例如博客文章的用法示例)?
2014年

这是一个好的执行力吗?Google / Facebook / Twitter会不会发现任何错误?
Jeromie Devera 2014年

2
1)Facebook将读取<meta name =“ author”>标记,并在某人共享页面时在预览中显示它。2)Facebook现在支持<meta property =“ article:author”>(在giannopoulos.net/中有详细信息)2015/06/20 /…),并将显示指向您的Facebook个人资料的链接(如果您确实在文章:作者中添加了指向该个人资料的链接)3)Google现在以所谓的“丰富网页摘要”的形式查找丰富的数据(developers.google.com/structured-data
MarkG

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">

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

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


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

这里要注意的一件事是,每次对meta标签进行更改时,您都需要再次通过Debugger馈送该URL ,以便Facebook清除有关其URL缓存在其服务器上的所有数据。


我在说明中看到html标记,您知道如何解决此问题吗?
尼尔

28

我构建了一个用于生成元数据的工具。它可以预先配置Facebook,Google +和Twitter的条目,您可以在此处免费使用它:http : //www.groovymeta.com

为了进一步回答这个问题,OG标记(开放图谱)标记的工作方式与元标记类似,应将其放置在HTML文件的HEAD部分中。有关如何有效使用OG标签的更多信息,请参阅Facebook的最佳做法


1
谢谢@Mogsdad,我相应地扩展了我的答案。
路易·奥托

1
链接断开,很遗憾!
文森特·塞尔斯
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.