让你的贴文链接缩略图立马高大上-教程

  • A+
摘要

想要链接图片高大上, 怎么办?图片尺寸是关键

前段时间接到一个朋友的问题, 同样是在专页上发布链接, 为什么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的指定缩略图哦!

 

讲到这里,  给大家留一个问题。  在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

让你的贴文链接缩略图立马高大上-教程

 

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

也有人说这是Facebook的一个bug, 子域名跟https的问题,子域名的图不能指定,FB会随机选取。 如果你有更确切的答案或者猜想,欢迎联系@蔷薇工作室ada, 或加入QQ群107080320参与讨论, 进群暗号404.

转载请注明来源yaosocial.com,强烈鄙视不注明来源的转载!

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: