96

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

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

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

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

4

12 回答 12

119

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

<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

于 2010-11-04T22:14:34.200 回答
61

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

  1. 正如EightyEight 所说，确保您的HTML 是有效的——同样适用于您的javascript 和服务器端代码（PHP、ASP 等）。我在一段代码中遇到了一个小的 PHP 错误，该代码作为从主页对服务器的单独调用执行。由于许多奇怪的巧合，该代码生成了 500 错误 - 但仅适用于 IE6 和 W3C 验证器和 Facebook 页面爬虫等严格解析引擎。这个问题没有出现在现代浏览器（Chrome 4、FF 3.5、IE 8 等）中，所以我没有立即看到它，但老/更严格的客户端每次都显示 500，这是 FB 出现的主要原因'不要抓取我们的页面（当其他一切似乎都正确时）。

  2. 关于 Randy 的回应，他是正确的，Facebook 会在您更新页面后很长时间内保留您页面的旧缓存副本。FB 声称它只保留了 24 小时，但我经历的时间要长得多。幸运的是，FB 发布了他们的“URL Linter”工具，该工具将向您展示您的页面在 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 正在为您的页面抓取最佳图像。关于图像文件应具有的规格有一些不同的指导方针，但我已经成功使用了 128 像素的方形图像，并且也看到了 130x97 的图像。这是来自http://developers.facebook.com/docs/reference/plugins/like/的 Facebook 官方文档：

    图像必须至少为 50 像素 x 50 像素。方形图像效果最好，但您可以使用最多三倍于高度的图像。

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

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

于 2011-03-28T23:18:17.787 回答
11

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

第 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 = 您的网站链接

请享用 ！！！！

于 2014-02-20T11:48:50.937 回答
11

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

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

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

于 2011-07-11T16:27:34.870 回答
6

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

于 2009-08-15T15:33:36.093 回答
2

网站的 HTML 是否有效？通过w3c 验证服务运行它。

于 2009-07-03T18:00:28.907 回答
2

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

于 2011-03-24T15:38:43.967 回答
1

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

于 2012-01-09T20:40:36.187 回答
1

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

于 2010-12-21T15:19:24.260 回答
0

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

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

于 2013-05-28T17:22:33.680 回答
0

尝试使用这样的东西：

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

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

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

于 2013-06-17T20:05:44.133 回答
-1

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

于 2016-03-02T20:07:50.907 回答