Facebook帖子链接图片

95

当有人在Facebook上发布链接时，脚本通常会扫描该链接以查找任何图像，并在该帖子旁边显示一个快速缩略图。尽管对于某些URL（包括我的URL），FB似乎没有拾取任何东西，尽管它们是该页面上的许多图像。

我了解到FB偏爱用户希望指定的图像使用“ image_src” rel标签，但是这也不会为我的网站生成该缩略图。

我的网址直接进入了DNS，并且没有转发，因此我也不认为这可能是问题所在。

有谁知道为什么FB无法从我的网站生成任何缩略图？

facebook  thumbnails 
— 乔其
source
如果您给我们提供了指向您网站的链接（或其他无效链接），则可能会有所帮助-可能会激发一些想法。
— 尼克·福特斯库
在这里，您可以看到它的工作原理！我使用PHP + jQuery构建它。可以下载源代码。希望你喜欢！lab.leocardz.com/facebook-link-preview-php--jquery
— Leonardo Cardoso
如果你想要做同样对谷歌加，这里是最好的参考链接我能找到：stackoverflow.com/questions/7985398/...
— cregox
— dcorking

Answers:

119

最简单的方法就是链接标记：

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

但是，您可以将其他一些内容添加到您的站点中，以使其对社交媒体更加友好：

打开图标签

开放图标记是您添加到<head>网站的标记，用于描述页面所代表的实体，无论是乐队，餐厅，博客还是其他东西。

Open Graph标签如下所示：

<meta property="og:tag name" content="tag value"/>

如果使用Open Graph标签，则需要以下六个：

  • og:title -实体的标题。
  • og:type-实体类型。您必须从“打开图”类型列表中选择一种类型。
  • og:image-代表实体的图片的网址。图片必须至少为50 x 50像素。方形图像效果最好，但允许您使用的图像宽度是其高度的三倍。
  • og:url-代表实体的页面的规范，永久URL。当您使用“打开图形”标记时，“喜欢”按钮将发布一个链接，og:url而不是“喜欢”按钮代码中的URL。
  • og:site_name -您网站的可读名称，例如“ IMDb”。
  • fb:admins或fb:app_id-以逗号分隔的列表，其中包括页面管理员的Facebook ID或Facebook Platform应用程序ID。至少只包含您自己的Facebook ID。

有关“开放图谱”标签的更多信息以及“管理页面”的详细信息，可以在“开放图谱”协议文档中找到。

http://developers.facebook.com/docs/reference/plugins/like

— WyrdNEXUS
source
5
我从棉绒工具收到此错误。 All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.。仅供参考的
— 特雷沃-
我已经在代码中添加了og标签，并使用facebook的og对象调试器工具对其进行了测试，当我将其保存在og标签中时，它会向我显示正确的信息，但是当我尝试链接我的fb帐户上的页面时，它会显示仅缓存的副本。fb保留缓存的副本多少时间？还有其他方法可以刷新缓存的副本吗？
— KAsh 2014年
请注意，在Facebook应用程序中使用AppLinks（applinks.org）时，将图像添加到帖子的唯一方法是使用<link>标记，将<meta>标记与og：image一起使用将不起作用。
— emerino
它具有类型等的列表，并具有其他有用的信息。
— 维尔夫，2014年
61

我知道这个问题很旧，但是最近我处理了完全相同的问题，并反复讨论了几个星期。在Google上进行多次搜索后，发现了很多有用的信息，但其中大多数都集中在Open Graph标签上，我对此并不感兴趣。原来我的网站存在多个问题，但这是一些基本知识。

  1. 正如ThreeyEight所说，请确保您的HTML有效-javascript和服务器端代码（PHP，ASP等）也是如此。我在一段代码中有一个小PHP错误，该代码是作为从主页单独调用服务器而执行的。由于许多奇怪的巧合，该代码产生了500个错误-但仅适用于IE6和严格的解析引擎，例如W3C验证程序和Facebook页面搜寻器。该问题并未在现代浏览器（Chrome 4，FF 3.5，IE 8等）中出现，因此我没有立即看到，但较老/更严格的客户端每次都显示500，这是FB出现的主要原因（当其他所有内容似乎都正确时），不要抓取我们的页面。

  2. 关于兰迪的回应，他的正确做法是，Facebook将在您更新页面后很长一段时间内保留页面的旧缓存副本。FB声称只举办了24小时，但是我经历的时间要长得多。幸运的是，FB发布了他们的“URL短绒”工具，它会告诉你的FB上被共享的时候怎么会出现你的页面的预览，而且这将迫使FB立即更新其网页的缓存。这是一种救生工具。您可以在http://developers.facebook.com/tools/lint/中找到它

  3. 关于URL Linter工具，请注意，URL的每个变体都分别缓存在Facebook上，因此“ www.example.com”与“ example.com”不同。另外，还存储唯一的大小写，因此“ ExampleOne.com”与“ exampleone.com”不同。（这对我和我自己的客户造成了很大的困惑，因为在我看来缓存已更新得很好，并且客户声称他们没有看到更新。事实证明，我正在查看exampleone.com并使用了Linter更新了缓存，但是他们正在查看我尚未提交给Linter的exampleOne.com。结果，我最终向Linter提交了很多URL变体，只是为了覆盖基础。）

  4. WyrdNEXUS建议使用image_src链接标记。这样可以确保FB正在为页面抓取最佳图像。关于图像文件应具有的规格，有一些不同的准则，但是我已经成功使用了128px的正方形图像，并且看到了130x97的图像也可以通过。这是来自http://developers.facebook.com/docs/reference/plugins/like/的 Facebook官方文档：

    图片必须至少为50 x 50像素。方形图像效果最好，但允许您使用的图像宽度是其高度的三倍。

    显然，FB会为您调整大图像的大小，但是如果您事先调整大小，您几乎总是会得到更好的结果。

  5. 关于Mike Cooper到eHow文章的链接，请避免使用该文章中的第1步。在撰写本文以及在Mike发布链接时，这是有效的建议，但是现在最好使用URL Linter工具预览页面共享时的外观。通过使用Linter，您将不会使FB在有机会对其进行调整之前就缓存该页面（可能）的错误副本。

— OneRuler
source
我挣扎了好几天，没有正确更新我的缩略图。Facebook Linter工具立即解决了我的问题-它让Facebook更新了其缓存！万岁！
— 哈迪2012年
非常感谢该Linter工具。我的博客上的某些帖子显示的是图片，而其他帖子虽然是数据库驱动的网站，却没有。将有问题的页面的URL放入URL Linter会强制其缓存图像！呜呜！
— kristina childs 2013年
4
皮棉工具更改了名称。现在它只是调试：developers.facebook.com/tools/debug-据我所知，这是所有这些的tl; dr版本：只需使用该工具即可！
— cregox
11

要更改标题，描述和图像，我们需要在head标签下添加一些元标签。

步骤1：在head标签下添加meta标签

<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

下一步：单击下面的链接 https://developers.facebook.com/tools/debug

在您提到标记的文本框中（例如http://www.test.com/）添加您的URL 。单击调试按钮。

完成。

您可以在这里验证https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

在上述网址中，u =您的网站链接

请享用 ！！！！

— 高拉夫123
source
请不要对多个问题发布完全相同的答案：这可能不适合所有问题，或者这些问题是重复的，应如此标记/结束。
— kleopatra 2014年
您好Kleopatra，我当时想发布答案以帮助他人。我认为你的观点是完全正确的。我会照顾的。谢谢朋友
— Gaurav123
@ Gaurav123测试链接已死。但是，我确实通过在Facebook上发消息来进行检查。非常感谢您的帮助！
— gsamaras
2

实际上，如果您在添加“ image_src”链接之前已经尝试在Facebook上链接该页面，Facebook将继续使用旧的缓存副本，甚至看不到您的更改。尝试通过删除或添加“ www”来修改URL，或者复制页面进行测试。

— 兰迪
source
1

我已经注意到，如果Facebook以https开头，它们不会从网站上获取缩略图，那也许是您的情况吗？

— 拉拉拉
source
1

有同样的问题，并发现我的头部闭合标签在错误的位置

— 迭戈
source
0

问题仍然存在，但最近我似乎也遇到了同样的问题，我的链接中的缩略图未显示在Facebook上的状态更新中。我为很多客户发帖，这是相对较新的。

FB似乎不再喜欢长URL了-如果您使用URL缩短程序，例如goo.gl或bitly.com，则来自链接/帖子的缩略图将显示在FB更新中。

— 凯伦·库夫
source
0

尝试使用如下所示的内容：

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

只要您使用映像的完整路径，似乎就可以在Firefox上正常工作。

问题是由于某种原因垂直向下偏移。推荐的图像尺寸为200 x 200。

— 用户名
source
我打算发布一个链接标签的代码，该标签由于我很愚蠢而没有发布。抱歉。
— user2494810 2013年
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.