从HTML中选择用作页面缩略图/预览的最佳方式

5
假设没有og:image或link rel img_source,有没有任何真实世界的经验或建议,可以选择最能代表网页的图片?
更新:所有答案都很好,所以我给他们投了赞成票并选择了一个,尽管似乎没有更好的方法。我将尝试使用最大的图片和在低分辨率客户端上看起来像什么的屏幕截图。谢谢大家!
PS:我发现相当多的页面似乎已经有og:image或link rel img_source了。比我想象的要多。

1
你想要“Google即时预览”风格的图片还是其他的图片? - Kiril
即时预览(例如屏幕截图)是备选方案,但我正在创建相当小的缩略图(大约100像素宽),因此照片效果更好。 - Jamona Mican
2
我会选择页面上最大的图像,因为它可能是页面上最重要/相关的。这在每个页面上都可能不是真的,但应该大部分时间是正确的。您可以使用JavaScript / jQuery获取每个图像的宽度/高度。 - Billy Moat
5个回答

2

将网站以最小的形式截图,在笔记本电脑甚至移动设备上查看(但不是移动站点版本),这是一种非随机的方法。

大多数优秀的网络设计师会尽力确保用户在加载页面时能够立即看到页面的内容,并将最重要和相关的信息包含在“折叠区域”之上。


1

选择您页面的标志作为og:image。这样,您的品牌将与所有帖子相关联,而无需担心哪张图像最好地定义每个单独的页面。

对于其他页面,您无法控制它们所具有的图像。

您可以调查sharer.php的工作原理,但除此之外,在选择没有可定义图像的网页的图像方面并没有银弹。


我指的不是我的页面,而是分析别人的页面。如果这不够清楚,很抱歉。 - Jamona Mican
嘿pwhd。Facebook的算法似乎相当不错,但我找不到任何详细介绍它如何工作的资源:( - Jamona Mican

1

我没有使用Facebook opengraph的经验,但我以前用过的一个技巧是抓取我链接到的网站的favicon并将它们用作链接按钮图标...它们很小,通常与公司名称和/或标志相关联,并且在大多数专业网站上都是相当普遍的。而且通常的文件名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


1

专注于标志通常是错误的方式。从您网站用户的角度来看,我宁愿没有图像,也不想一直看到标志。这与Google+或Facebook链接中的情况相同。只有在确实有意义时才显示图像。

然而,如果没有提供og:imagerel="image_source",找到相应的图像可能并不总是容易的。

文章通常有一个标题,以<h1><h2>标记呈现。最近的图像可能是正确的选择。但是,最近的图像也可能是标志,因此这可能会出错。

我会非常务实地处理。我会首先获取最有可能的图像,并读取给定的EXIF数据,如果这是真正的图像,则提供了信息。如果这只是标志、间隔符或其他类型的布局图形,则没有EXIF数据,因此不相关。如果第一张图片不正确,我会获取下一张图片,以此类推。

另一个线索可能是HTML5的<article>标签,通常嵌套了帖子的相应图像。

尽管如此,仍有一些网页设计师没有使用标准,导致他们的网页可能无法很好地进行比较。


1

我通常建议您只需抓取带有img标签的页面。然而,现在,CSS背景图像经常应用于h1/header/div/a/等标签中,以显示徽标代替文本。

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

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

如果这是/包含一个img标签,很有可能你有网站的标志。否则,如果它是一个div或其他容器,你需要深入子元素的CSS属性,看看它们是否有背景图像。
从这里,您可以构建一组候选图像,当与基于启发式的(例如)图像尺寸结合使用时,应该每次都能输出一个标志。
希望这能帮助您走上成功之路!

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接