如果搜索结果中能展现出预览图，那用户体验会大大提高，点击率自然也会提高。
SEO 的诀窍就是不放过每一次尝试的可能。所以，我决定动手把目前的 Markdown 博客后台改造一下，以支持 MIP/AMP 结构化展现图片。
MIP 结构化展现图片的主要要求有两点
- 搜索结果结构化信息展示，仅允许提供0张，1张图或3张图
- 图片清晰度高，所提交图片长宽比为3:2，图片大小不得低于300*200px；
所以最佳的尺寸应该是 600:400 px。
数据库的改造
文章表需要增加一个 JSON 字段 images，用于保存封面图片信息
{
"all": ["A.jpg", "B.jpg"], // Markdown 中的所有图片
"preview": ["A.jpg"] // MIP/AMP 结构化展现图片
}
文章编辑功能的改造
上传图片至 CDN 之后，除了要插入 Markdown，还需要自动更新到 images 字段中。
功能组件的选择上，使用 element ui 的 vuejs 图片列表缩略图组件
http://element-cn.eleme.io/#/zh-CN/component/upload#tu-pian-lie-biao-suo-lue-tu
MIP JSON-LD 的生成逻辑
由于仅允许提供0张，1张图或3张图，所以需要在 controller 中进行一次校验及过滤
- 没有预览图片的置 0
- 1~2 张的选第一张
- 3张及以上的选前三张
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式