更新:所有答案都很好,所以我给他们投了赞成票并选择了一个,尽管似乎没有更好的方法。我将尝试使用最大的图片和在低分辨率客户端上看起来像什么的屏幕截图。谢谢大家!
PS:我发现相当多的页面似乎已经有og:image或link rel img_source了。比我想象的要多。
将网站以最小的形式截图,在笔记本电脑甚至移动设备上查看(但不是移动站点版本),这是一种非随机的方法。
大多数优秀的网络设计师会尽力确保用户在加载页面时能够立即看到页面的内容,并将最重要和相关的信息包含在“折叠区域”之上。
选择您页面的标志作为og:image。这样,您的品牌将与所有帖子相关联,而无需担心哪张图像最好地定义每个单独的页面。
对于其他页面,您无法控制它们所具有的图像。
您可以调查sharer.php的工作原理,但除此之外,在选择没有可定义图像的网页的图像方面并没有银弹。
我没有使用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
专注于标志通常是错误的方式。从您网站用户的角度来看,我宁愿没有图像,也不想一直看到标志。这与Google+或Facebook链接中的情况相同。只有在确实有意义时才显示图像。
然而,如果没有提供og:image
或rel="image_source"
,找到相应的图像可能并不总是容易的。
文章通常有一个标题,以<h1>
或<h2>
标记呈现。最近的图像可能是正确的选择。但是,最近的图像也可能是标志,因此这可能会出错。
我会非常务实地处理。我会首先获取最有可能的图像,并读取给定的EXIF
数据,如果这是真正的图像,则提供了信息。如果这只是标志、间隔符或其他类型的布局图形,则没有EXIF数据,因此不相关。如果第一张图片不正确,我会获取下一张图片,以此类推。
另一个线索可能是HTML5的<article>
标签,通常嵌套了帖子的相应图像。
尽管如此,仍有一些网页设计师没有使用标准,导致他们的网页可能无法很好地进行比较。
我通常建议您只需抓取带有img
标签的页面。然而,现在,CSS背景图像经常应用于h1
/header
/div
/a
/等标签中,以显示徽标代替文本。
一个可能的解决方案是获取所有ID/类名中带有“logo”的元素:
var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]');
img
标签,很有可能你有网站的标志。否则,如果它是一个div
或其他容器,你需要深入子元素的CSS属性,看看它们是否有背景图像。