4种Twitter card社交标签添加方法
twitter:card卡片类型有四种：“summary”、“summary_large_image”、“app”、“player”，可以使用其中的任何一种。
1
Summary摘要卡twitter card
标签包括card, site, title, creator, description, image, image alt.
<meta name="twitter:card" content="summary">
<meta property="twitter:site" content="@***"/>
<meta property="twitter:title" content="***"/>
<meta name=”twitter:creator” content=”@yourtwitterhandle”>
<meta property="twitter:description" content="***"/>
<meta property="twitter:image" content="***_.jpg"/>
<meta property="twitter:image:alt" content="***"/>
示例：
备注：
twitter:title 最多70个字符
Twitter:description 最多200个字符
twitter:image:alt：最多 420 个字符
Twitter 卡片的理想图像大小为800px x 418px，比率为 1.91:1。对于 App Cards，您可以使用 800px x 800px 的 1:1 比例。视频也可以用在 Twitter 卡片中。网站卡片视频的推荐大小为 1200 像素 x 1200 像素，或 1:1 纵横比。
2
summary_large_image大图摘要卡twitter card
标签包括card, site, title, creator, description, image, image alt.
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:site" content="@***"/>
<meta property="twitter:title" content="***"/>
<meta name=”twitter:creator” content=”@yourtwitterhandle”>
<meta property="twitter:description" content="***"/>
<meta property="twitter:image" content="***_.jpg"/>
<meta property="twitter:image:alt" content="***"/>
示例：https://www.imdb.com/title/tt0117500/
3
应用于APP的 twitter card
标签包括card, site, description, country, 还有google play，iphone，ipad 所需的 name，url，id.
<meta name=”twitter:card” content=”app”>
<meta name=”twitter:site” content=”@yourwebsite”>
<meta name=”twitter:description” content=”你的描述”>
<meta name=”twitter:app:country” content=”你的国家如美国”>
<meta name=”twitter:app:name:googleplay” content=”你的 googleplay 应用名称”>
<meta name="twitter:app:url:googleplay" content="你的googleplay应用URL">
<meta name=”twitter:app:id:googleplay” content=”你的googleplay 应用 ID”>
<meta name=”twitter:app:name:iphone” content=”你的 iPhone 应用名称”>
<meta name=”twitter:app:url:iphone” content=”你的 iPhone 应用 URL”>
<meta name=”twitter:app:id:iphone” content=”你的 iPhone 应用 ID”>
<meta name=”twitter:app:name:ipad” content=”你的 ipad 应用名称”>
<meta name=”twitter:app:url:ipad” content=”你的 ipad 应用 URL”>
<meta name=”twitter:app:id:ipad” content=”你的 ipad 应用 ID”>
示例：
https://play.google.com/store/apps/details?id=com.rovio.baba
备注:
twitter:app:id:iphone 为 https://apps.apple.com/gb/app/angry-birds-2/id880047117 后面的880047117
4 应用于Video的 twitter card
标签包括card, site, url, title, description, image, player, width, height
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@youtube">
<meta name="twitter:url" content="videolink">
<meta name="twitter:title" content="video name">
<meta name="twitter:description" content="video description">
<meta name="twitter:image" content="***.jpg">
<meta name="twitter:player" content="videolinnk">
<meta name="twitter:player:width" content="1280">
<meta name="twitter:player:height" content="720">
示例：https://www.youtube.com/watch?v=Kauv7MVPcsA
备注：长度超过 10 秒的内容不得自动播放
以下是结合Twitter 和fb开放图谱标签来定义摘要卡片：
<metaname="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url"content="http://***.com/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="***" />
<meta property="og:image" content="***.jpg" />
备注：
fb开放图谱协议使用property和content属性，Twitter 卡片使用的是name和content。
当网站使用fb开放图谱协议描述页面上的数据时，很容易生成 Twitter 卡片，而无需复制标签和数据。当 Twitter 卡片处理器在页面上寻找标签时，它会首先检查 Twitter 特定的属性；如果不存在，则会返回受支持的fb开放图谱属性。
测试工具，添加的twitter card是否正常：
https://cards-dev.twitter.com/validator
目前这个工具twitter官方暂停使用了。
官方资料参考：
https://developer.twitter.com/en/docs/twitter-for-websites/cards/
本篇文章来源于微信公众号: 喃姐SEO日志
