Facebook 发布链接图片答案

【问题标题】：Facebook Post Link ImageFacebook 发布链接图片
【发布时间】：2010-11-07 22:52:43
【问题描述】：

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

我读到 FB 更喜欢用户希望指定的图像的“image_src”rel 标签，但这也不会为我的网站生成该缩略图。

我的 url 直接进入 DNS，没有被转发，所以我认为这也不是问题。

有人知道为什么 FB 不能从我的网站生成任何缩略图吗？

【问题讨论】：

如果您向我们提供指向您网站的链接（或另一个不起作用的网站）会有所帮助 - 它可能会激发一些想法。
在这里你可以看到它是如何工作的！我使用 PHP + jQuery 构建它。源代码可供下载。希望你喜欢！ lab.leocardz.com/facebook-link-preview-php--jquery
如果你想在 google plus 上做同样的事情，这里是我能找到的最佳参考链接：stackoverflow.com/questions/7985398/…
How does Facebook Sharer select Images? 的可能副本

标签： facebook thumbnails

【解决方案1】：

最简单的方法就是一个链接标签：

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

但您还可以向您的网站添加一些其他内容，使其对社交媒体更加友好：

打开图表标签

Open Graph 标签是您添加到您网站的<head> 的标签，用于描述您的页面所代表的实体，无论是乐队、餐厅、博客还是其他。

Open Graph 标记如下所示：

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

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

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

有关 Open Graph 标记的更多信息和有关管理页面的详细信息，请参阅 Open Graph 协议文档。

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

【讨论】：

我从 lint 工具收到了这个错误。 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 保留缓存副本多长时间？有没有其他方法可以刷新缓存的副本？
只是让您知道，在 facebook 应用程序中使用 AppLinks (applinks.org) 时，将图像添加到帖子的唯一方法是使用标签，使用带有 og:image 的标签将不起作用。
This 有一个类型列表等，还有一些其他有用的信息。

【解决方案2】：

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

正如EightyEight 所说，确保您的HTML 有效——您的javascript 和服务器端代码（PHP、ASP 等）也是如此。我在一段代码中遇到了一个小的 PHP 错误，该代码作为从主页对服务器的单独调用执行。由于许多奇怪的巧合，该代码生成了 500 错误 - 但仅适用于 IE6 和 W3C 验证器和 Facebook 页面爬虫等严格解析引擎。这个问题没有出现在现代浏览器（Chrome 4、FF 3.5、IE 8 等）中，所以我没有马上看到它，但是老/更严格的客户端每次都显示 500，这是 FB 出现的主要原因'不抓取我们的页面（当其他一切似乎都正确时）。
关于 Randy 的回应，他说得对，Facebook 会在您更新页面后很长时间内保留旧的缓存副本。 FB 声称它只保留了 24 小时，但我经历的时间要长得多。幸运的是，FB 发布了他们的“URL Linter”工具，该工具将向您展示您的页面在 FB 上共享时的外观预览，并且它将强制 FB 立即更新其页面缓存。这是一个救生工具。你可以在http://developers.facebook.com/tools/lint/
关于 URL Linter 工具，请注意 URL 的每个变体都在 Facebook 上单独缓存，因此“www.example.com”与“example.com”不同。此外，还存储了唯一的大写，因此“ExampleOne.com”与“exampleone.com”不同。（这导致我的客户和我自己之间很多感到困惑，因为在我看来缓存已经更新得很好并且客户声称他们没有看到更新。原来我正在寻找在 exampleone.com 并使用 Linter 更新缓存，但他们正在查看我没有提交给 Linter 的 exampleOne.com 结果，我最终向 Linter 提交了相当多的 URL 变体只是为了覆盖基地。）
WyrdNEXUS 对使用 image_src 链接标签的建议很明确。这使您可以确保 FB 正在为您的页面抓取最佳图像。关于图像文件应具有的规格有一些不同的指导方针，但我已经成功使用了 128 像素的方形图像，并且也看到了 130x97 的图像。这是来自http://developers.facebook.com/docs/reference/plugins/like/的Facebook官方文档：

图片必须至少为 50 x 50 像素。方形图片效果最好，但您可以使用宽度不超过其高度三倍的图片。

显然，FB 会为您调整大图像的大小，但如果您事先自行调整大小，您几乎总能得到更好的结果。
关于 Mike Cooper 指向 eHow 文章的链接，请避免在该文章中使用步骤 #1。在撰写文章时以及在 Mike 发布链接时，这是有效的建议，但现在最好使用 URL Linter 工具来预览您的页面在共享时的显示方式。通过使用 Linter，您不会导致 FB 在您有机会对其进行调整之前缓存（可能）错误的页面副本。

【讨论】：

我苦苦挣扎了好几天，没有正确更新我的缩略图。 Facebook Linter 工具立即解决了我的问题 - 它让 facebook 更新其缓存！万岁！
非常感谢这个 linter 工具。我博客上的一些帖子显示了图像，尽管是数据库驱动的站点，但其他的却没有。将违规页面的 URL 放入 URL Linter 会强制它缓存图像！呜呜！
lint 工具已更名。 now it's just debug：developers.facebook.com/tools/debug - 据我所知，这是所有这些的 tl;dr 版本：只需使用该工具！

【解决方案3】：

使用此处提供的 facebook lintter。 http://developers.facebook.com/tools/lint/

这将检查您的链接并重新获取任何图像。这也会清除任何旧缓存。

或者试试这个 - https://developers.facebook.com/tools/debug

【讨论】：

【解决方案4】：

要改变Title、Description和Image，我们需要在head标签下添加一些meta标签。

第 1 步：在 head 标签下添加元标签

<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

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

完成了。

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

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

享受吧！！！！

【讨论】：

请不要对多个问题发布完全相同的答案：它要么不适合所有人，要么问题是重复的，应该这样标记/关闭。
您好 Kleopatra，我想发布答案以帮助他人。我认为你的观点是完全正确的。我会处理好这个。谢谢朋友
@Gaurav123 测试链接已失效。但是，我确实通过在 Facebook 上给自己发消息来检查它。非常感谢您提供非常有帮助的答案！

【解决方案5】：

试试这个：http://www.ehow.com/how_4938148_thumbnail-show-up-facebook-share.html

【讨论】：

【解决方案6】：

网站的 HTML 是否有效？通过w3c validation service 运行它。

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

我注意到如果网站以 https 开头，Facebook 不会从网站中获取缩略图，这可能是您的情况吗？

【讨论】：

【解决方案9】：

遇到了同样的问题，发现我的头部结束标签放错了地方

【讨论】：

【解决方案10】：

老问题，但最近我似乎遇到了同样的问题，我的链接中的缩略图没有显示在 Facebook 的状态更新中。我为许多客户发帖，这是相对较新的。

FB 似乎不再喜欢长 URL — 如果您使用 URL 缩短器，例如 goo.gl 或 bitly.com，您的链接/帖子的缩略图将出现在您的 FB 更新中。

【讨论】：

【解决方案11】：

尝试使用这样的东西：

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

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

问题是由于某种原因它垂直向下偏移。图片是 200 x 200，正如我在某处看到的推荐的那样。

【讨论】：

我打算发布一个链接标签的代码，因为我很愚蠢而没有发布。对不起。

【解决方案12】：

如果你使用了任何 seo 插件，那么首先检查你的 seo 插件设置。然后找出 Noindex 设置，如果 Enable Media for Noindex 然后禁用它。

【讨论】：