快速优化贴文链接缩略图技巧

     不知道大家是否遇到过这个问题,同样是在专页上发布链接,为什么Sammydress的链接缩略图是那种小小的的正方图,而romwe, lightinthebox的却是高大上的长方形,表现力特别好?

image.png

    相信很多网站都会遇到这样的问题,链接缩略图的展示问题。想要知道如何做成romwe这样的高大上效果,大家得从2个方面下手。

    第一:指定链接缩略图

    在浏览器中点击右键,查看页面源代码,在head区域你会看到这么一段:

image.png

<meta property="og:image" 开头的标签就是让你指定链接中出现的缩略图是哪一张,如果你的页面中没有这个meta标签,那么把链接复制到脸书上后, 脸书会读取当前页面的其他图片,让你选择出现哪一张缩略图。

    指定图片的meta标签通常会和安装脸书的插件时候一起设定,当用户点击like或share按钮时,可以确保链接中展示的图片就是当前产品页面的产品图片,而不是这个页面其他的产品。如果你是蔷薇工作室的客户,或许已经改造好了。

    第二:图片宽度- 大于400px

    第一步只是个开始,想要图片高大上,必须在图片尺寸上下工夫。还记得在粘贴链接时,链接缩略图是可以指定的吗?而脸书建议的上传图片尺寸是600*315px.

image.png

    而在脸书实际读取链接时,只要图片宽度大于400px,图片就会展现出自动调整后的宽图缩略图。大家下载下来了上图中所示sammydress和lightinthebox的指定展示图片,结果尺寸对比如下

image.png

    当链接po到脸书上后,阿卡曼服务器会对图片进行修整,将图片修正成符合Link 缩略图的图片比例,并将图片缓存在服务器上,而不是直接从网站调取。而sammydress由于本身图片宽度小于400px,连377px都不够,而无法展示出宽图。见下图所示:

image.png

因此想要高大上的宽图,大家记得使用宽度大于400px的指定缩略图哦!

    讲到这里,给大家留一个问题:在romwe的那个链接http://www.romwe.com/leggings-alien-galaxy-print-bodycon-purple-skirt-p-86665.html,meta图片中指定的图片宽度小于400px,为什么也能展示出高大上的宽图呢?该缩略图的url是:http://image.romwe.com/images/product16/NCSTYSD0025/small_image/NCSTYSD0025.jpg

image.png

    只有89*135px,图片宽度甚至小于方形缩略图的最低尺寸,猜想脸书在读取链接缩略图时并没有读取romwe指定的89*135缩略图,而是使用另外一套算法选取了该页面上相同文件名上这张宽度大于400px的图片。




文章来源:yaosocial.com

必发88倡导敬重与保护常识产权,如发现必发88文章存在版权问题请联系站长services@cnsellers.cn,大家将及时进行处理。


点击收起

XML 地图 | Sitemap 地图