（实操）如何让link里面的缩略图显得高大上

Laura婷

如何让link里面的缩略图显得高大上

          前段时间接到一个客户的问题， 同样是在专页上发布链接， 为什么Sammydress的链接缩略图是那种小小的的正方图， 而romwe, lightinthebox的却是高大上的长方形， 表现力特别好？



       相信很多电商们都会遇到这样的问题，链接缩略图的展示问题。想要知道如何做成romwe这样的高大上效果，斑马告诉你得从2个方面下手。


第一： 指定链接缩略图

       在浏览器中点击右键， 查看页面源代码， 在head区域你会看到这么一段：
<meta property="og:image" 开头的标签就是让你指定链接中出现的缩略图是哪一张，如果你的页面中没有这个meta标签， 那么把链接复制到Facebook上后， Facebook会读取当前页面的其他图片， 让你选择出现哪一张缩略图。
       指定图片的meta标签通常会和安装Facebook的插件时候一起设定， 当用户点击like或share按钮时， 可以确保链接中展示的图片就是当前产品页面的产品图片， 而不是这个页面其他的产品。

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

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



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



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




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



本文由斑马转载，请仅供参考

丛月教授

此贴必火，高大上啊~