入门指南
从卡片入门
要从实施卡片标记开始,你需要在本页标题部分添加以下 HTML 标记,从而为你的内容指定卡片类型:
<meta name="twitter:card" content="summary"></meta>
卡片属性为简单的键值对,各键值均在 HTML 元标记中定义,如上所示。属性集的组合定义了 Twitter 上的整体卡片体验,各种卡片类型都支持并要求一组特定的属性。
所有卡片均有一个基本的共同属性——卡片类型值:
卡片属性 | 说明 |
twitter:card |
卡片类型,可以是“summary”、“summary_large_image”、“app”或“player”中的任何一种。 |
每页只支持一种卡片类型。如果页面上有一个twitter:card
以上的值,则按照先后顺序,以“最后”一个值为准。
卡片和内容属性
各卡片均有内置的内容属性。针对你指定的内容,该属性将显示在合适的 Twitter 账号。用户能够直接从卡片上关注和查看有该属性的账号的资料。属性有两种:
网站属性:表示内容所发布网站或平台的 Twitter 账号。请注意,网站的不同页面/部分可能会设置单独的 Twitter 账号,而最合适的账号应用于为用户提供最佳的情境。例如,nytimes.com 可以为头版文章设置“@nytimes”的网站属性,而为艺术和娱乐版块设置“@NYTArts”的网站属性。
创建者属性:表示在卡片内创建内容的个体用户。此属性适用于大图像卡片的概要。
使用以下属性设置卡片属性:
卡片属性 | 说明 | 必填 |
twitter:site |
卡片页脚中所使用网站的 @username。 | 否 |
twitter:creator |
内容创建者/作者的 @username。 | 否 |
URL 爬行和缓存
当扫描 URL 时,Twitter 爬虫遵守 Google 的 robots.txt 规范 。如果带卡片标记的页面被屏蔽,则不会显示任何卡片。如果图像 URL 被屏蔽,则不会显示任何缩略图或照片。
Twitter 使用 Twitterbot(版本,例如 Twitterbot/1.0)的用户代理。用户代理可用于在robots.txt
文件中创建例外情境。
例如,此处的robots.txt
不允许所有机器人爬行,但 Twitter 的抓取器除外:
User-agent: Twitterbot Disallow: User-agent: * Disallow: /
这里还有一个例子,它规定了哪些目录允许 Twitterbot 爬行(在这种情况下,除图像和档案目录外,不允许其他所有爬行):
User-agent: Twitterbot Disallow: * Allow: /images Allow: /archives
服务器的robots.txt
文件必须保存为 ASCII 字符编码的纯文本。为验证这一要求,运行以下命令:
$ file -I robots.txt robots.txt: text/plain; charset=us-ascii
当带卡片标记页面的链接发布在推文中后,Twitter 会将内容缓存 7 天。
如果你遇到推文中的卡片未能正常显示的问题,那么请参见卡片疑难解答指南。
卡片显示
只有在时间线中扩展推文(在网页上)或在推文的个人永久链接页面查看推文(通过网页或移动设备在时间线中点击日期)时,才会出现由元标签生成的 Twitter 卡片。
在有限的情况下,卡片可能出现在时间线上,例如在 Twitter 上发布图像、广告格式和 Twitter 发起的试验。
如果你希望将媒体(照片、视频和卡片)加入时间线,则可以考虑以下任一选项:
- 账号可以将推文置顶于其时间线上,从而自动扩展推文并显示卡片。(这只能在网页上实现)。
- 对于照片和 GIF 动图,可直接将媒体和推文一起上传,或考虑使用 Twitter API 来上传媒体。
- 对于带行动号召的广告格式,请访问网站卡片 Twitter 广告 。
推文中包含多个 URL
在某些情况下,用户可能希望发包含多个 URL 的推文。在一条推文中,只能显示一张卡片。以下为处理多个 URL 时的先后顺序:
- 附于推文的图像或媒体,其优先权高于附于 URL 的任何卡片。
- 带卡片的 URL,按照在推文中的显示顺序从第一个到最后一个进行处理。
Twitter 卡片和开放图谱
Twitter 卡片标签看上去与开放图谱标签相似,基于与开放图谱协议相同的约定。当使用开放图谱协议描述页面上的数据时,很容易生成 Twitter 卡片,而无需复制标签和数据。当 Twitter 卡片处理器在页面上寻找标签时,它会首先检查 Twitter 特定的属性;如果不存在,则会返回受支持的开放图谱属性。它允许在页面上独立定义这两种属性,并最大程度减少描述内容和体验所需的标记复制量。
请注意,尽管开放图谱建议通过<html prefix="og: http://ogp.me/ns#">
指定 “og” RDFa Core 1.1 CURIE 前缀映射,但对于 Twitter 卡片及其在 HTML 母体元素名称属性中的twitter:
前缀使用,并不要求此等标记。开放图谱协议也为标记 (<meta property="og:image" content="http://example.com/ogp.jpg"/>
) 规定使用property
和content
属性,但 Twitter 卡片使用的是name
和content
。Twitter 的解析器会返回使用property
和content
。因此,如果已经存在开放图谱协议标记,则无需对其修改。
以下示例结合使用 Twitter 和开放图谱标签来定义摘要卡片:
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@nytimesbits" /> <meta name="twitter:creator" content="@nickbilton" /> <meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" /> <meta property="og:title" content="A Twitter for My Sister" /> <meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." /> <meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />