0. 概述
这几天同事说我的文章分享到 Twitter 上没有出现常见的预览情况,就是一个链接,然后我就了解了一下推特的预览机制,然后适配了一番,这里做个记录。
1. 推特预览
什么是推特预览呢?就是说你发了一个文章或者新闻的链接,然后别人(你自己也行)刷推的时候可以直接看到概述,就像这样:
图 1:推特预览示例 |
---|
2. 预览规格
要想让推特识别你的文章,那么你得按照人家的规范走,在推特的规范中,支持 4 中不同格式的预览:
- Summary Card: 就是我在 图1 中的示例那样,图片+Title+概述+链接
- Summary Card with Large Image: 其实和 Summary Card 一样,不过就是图片特别大
- App Card: 可以直接下载一个移动 app
- Player Card: 预览视频/音频等多媒体
反正都差不多,我就直接讲 Summary Card 的使用规范了。
3. Summary Card 规范
Twitter 的规范就是在 HTML 的头部加入特别的表示,可以认为是 Key-Value 型,例如:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
这里每个字段的意思大概是这样的:
字段 | 必选 | 含义 | 可选项 |
---|---|---|---|
twitter:card |
是 | 预览类型(就是上面的 4 种类型) | summary / summary_large_image / app / player |
twitter:site |
否 | 作者的推特用户名 | - |
twitter:title |
是 | 预览的标题 | - |
twitter:description |
否 | 预览的概述 | - |
twitter:image |
否 | 预览的图片地址 | - |