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 |
否 | 预览的图片地址 | - |