5

假设没有 og:image 或链接 rel img_source，是否有人对优于随机技术的实际经验或建议来选择最能代表网页的图像？

更新：所有答案都很好，因此全部投票并选择了一个，尽管似乎没有很好的方法可以做到这一点。我将在低分辨率客户端上尝试最大的图片和屏幕截图。谢谢大家！

PS：我发现很多页面似乎都有 og:image 或 link rel img_source 反正。超出我的预期

4

5 回答 5

2

以尽可能小的形式截取网站的屏幕截图，看看它在笔记本电脑甚至移动设备（但不是移动网站版本）上的外观，将是一种非随机方法。

大多数优秀的网页设计师都会尝试确保用户能够在加载后立即看到页面内容，并按照他们所说的“首屏”包含最重要和最相关的信息。

于 2012-07-18T22:45:12.067 回答
1

选择您页面的徽标作为 og:image。这样一来，您的品牌就会与您的所有帖子相关联，而不必担心哪个图像最能定义每个单独的页面。

对于其他页面，您无法控制它们拥有的图像。

您可以研究sharer.php 的工作原理，但除此之外，没有灵丹妙药可以为没有可定义图像的网页选择哪个图像。

于 2012-07-10T05:31:53.427 回答
1

我对 Facebook opengraph 没有任何经验，但我之前使用过的一个技巧是抓取我链接到的网站的图标并将它们用作链接按钮图标......它们很小，通常总是与公司名称和/或徽标，它们在大多数专业网站中都非常普遍。通常通用的文件名 favicon.ico 使得从 html 中挑选出来（或链接属性，如果他们更改文件名）变得非常容易。

如果可以适应您正在尝试做的事情，可能会试一试。如果你觉得这看起来不太好，你可以尝试更“web 2.0”并检查 iPhone/iPad 按钮 apple-touch-icon png 图像（虽然可能只能在大牌网站上找到它们）

http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

于 2012-07-18T08:41:43.533 回答
1

我通常会建议你简单地刮掉img标签页。但是，这些天来，CSS背景图像经常应用于h1/ header/ div/ a/等。标签以显示徽标代替文本。

一种可能的解决方案是获取 ID/类名中带有“logo”的所有元素：

var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]');

如果这是/包含img标签，那么您很可能拥有该网站的徽标。否则，如果它是一个div或其他此类容器，您需要深入研究子元素的 CSS 属性以查看它们是否具有背景图像。

由此，您可以构建一组候选图像，当与基于（例如）图像尺寸的启发式方法结合使用时，应该希望每次都能吐出一个徽标。

我希望这对您有所帮助！

于 2012-07-18T09:50:32.410 回答
1

寻找标志通常是错误的方式。从您网站的用户的角度来看，我一直宁愿没有图像而不是徽标。这与 Google+ 或 Facebook 链接中的相同。仅在确实有意义时才显示图像。

但是，如果没有og:image或rel="image_source"提供相应的图像，找到相应的图像可能并不总是微不足道的。

一篇文章通常有一个显示为<h1>或<h2>标签的标题。最近的图像可能是正确的图像。但是，最近的也可能是徽标，因此可能会出错。

我会这样做非常务实。我会首先获取最有可能的图像并读取给定的EXIF数据，如果这是真实图像，则提供信息。如果这只是一个标志、间隔或其他类型的布局图形，它没有 EXIF 数据，因此不相关。如果第一张照片不合适，我会拿下一张，依此类推。

另一个线索可能是 HTML5<article>标记，它通常具有嵌套的帖子的相应图像。

然而，有几个网页设计师不使用标准，他们的网页可能不是很好的比喻。

于 2012-07-19T13:13:06.937 回答