Facebook如何知道从一篇文章中解析出哪张图片？

Question

首先，我想说我不是很确定在哪里发布这篇文章，但它与编程非常相关。如果放错了位置，我很抱歉，请告诉我应该在哪里发布。

当在朋友的墙上分享一篇文章时，Facebook会获取文章的缩略图。他们是如何总是从文章中获取正确的缩略图呢？

例如，在http://www.nytimes.com/2010/06/07/world/asia/07convoys.html?hp上，它不会抓取logo img元素，而是选择与文章对应的正确图像元素。

我想做类似的事情，想知道通过解析HTML找到给定示例中的图片的好方法。谢谢。

- Travis

---

可能是重复的问题：Facebook Sharer如何选择图片？ - bkaid

Answer 1

实际上，Facebook 找到缩略图的方式并不神奇。它会搜索一组指定标题、描述和图片的 <meta> 和 <link> 标签。

如果它找不到任何需要的 <meta> 和 <link> 标签，它就会要求用户选择适合的 <img> 标签。

在纽约时报的情况下，它使用以下标签：

<meta name="thumbnail" content="whatever.jpg" />

Facebook建议您使用<link>标签来设置缩略图。

<meta name="title" content="title" />
<meta name="description" content="description " />
<link rel="image_src" href="thumbnail_image" />

来源：Facebook分享/指定元标签

- Andrew Moore

---

但例如，我找到了一篇tomshardware的文章： http://www.tomshardware.com/picturestory/538-computex-2010-booth-babes.html 该文章在没有meta标签或其他指示符的情况下，最初选择了正确的缩略图。 - Travis

@Travis：哪个<img>标签更靠近页面上最大的文本块...或者哪个<img>标签占用了最多的空间。它在某些页面上猜对了，但在其他一些页面上则没有。 - Andrew Moore

好的，现在非常清楚了，感谢你的帮助 Andrew。 - Travis

@AndrewMoore 它不是猜测，而是寻找 opengraph 元标签。<meta property="og:image" content="http://media.bestofmicro.com/W/B/249995/gallery/SAM_0072_w_500.JPG"> - Macchiato

@Macchiato：是的，这已经在我的回答中说明了。然而，如果元标签或链接标签不存在，他们将会猜测。 - Andrew Moore

我建议，如果您找不到元标记，您的解析器应在DOM中查找所有图像，检查其大小，并向用户呈现面积（宽度x高度）最大的3个图像。在大多数情况下，页面上所需的特色图像是页面上最大的图像。但是，如果由于某种原因（在具有自己的图像的文章上不良实践）存在站点外壳头，则可能不需要该头。因此，多个选项是一个不错的解决方案。这并不完美，但Facebook的实现也不完美。 - Chadwick Meyer

Answer 2

尽管Facebook的解析器中肯定有一些好的逻辑，但它们并不总是选择正确的图片。

在许多情况下，我看到了一个缩略图列表供选择，这意味着Facebook的解析器认为它们同样相关。

我猜他们（可能还有其他因素）查看dom结构，并找到与“可共享”内容相近的图片。

更新：

经过一些实证测试，似乎图像尺寸起着重要作用。太小或太宽的图像不会被视为缩略图。如果你的徽标大小合适，那么它有望显示为缩略图。例如，在http://www.e24.se上分享一些内容。

- Lauri Lehtinen

Answer 3

这些只是猜测，因为我没有关于Facebook内部操作的任何知识，但如果我要从页面解析缩略图，我会考虑以下几点：

• 图片大小，如前所述
• href或alt属性中的相关关键字
• <img>标签在页面上的位置，越靠近相关内容越好，但对于复杂的布局可能不总是有效
• <img>标签或附近标签中没有与广告相关的关键字（双击等）

此外，据我所知，Facebook元标记相当新，因此我的猜测是链接页面爬取器仍然以较困难的方式获取图像；）但是，如果您正在运行网站并希望Facebook在抓取页面时获取正确的信息，我强烈建议实施它们。

- johnny_bgoode