Markdown 中图片提取为 MIP 封面图片

更新日期: 2018-03-21 阅读次数: 3692 分类: SEO

如果搜索结果中能展现出预览图,那用户体验会大大提高,点击率自然也会提高。

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张及以上的选前三张

爱评论不评论

近期节日

2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
2020年05月01日 国际劳动节
2020年05月04日 五四青年节
2020年05月05日 立夏
2020年05月08日 世界红十字日
查看更多节日