跳转到主内容

什么是Twitter Card?

image

定义​

Twitter Card是一个元数据系统,用于在Twitter(现已更名为X)上分享链接时提供丰富的媒体体验。通常,在推文中包含URL只会显示简单的链接,但配置了Twitter Card后,会以包含图片、标题和描述的视觉吸引力卡片格式显示。

Twitter Card在HTML文档的<head>部分使用<meta name="twitter:xxx">格式的标签实现。类似于开放图谱(Open Graph),它提供Twitter平台特有的功能。Twitter支持四种主要卡片类型,各有不同的用途和布局:摘要卡(Summary Card)、带大图的摘要卡(Summary Card with Large Image)、应用卡(App Card)和播放器卡(Player Card)。

正确配置的Twitter Card可以显著提高链接点击率。研究表明,带图片的推文比纯文本推文的转发率高达150%。Twitter Card已成为必不可少的营销工具,特别是对新闻媒体、博客和电商网站而言。如果没有Twitter Card,您的链接很容易在时间线中被忽略。

特点​

  • 多种卡片类型: 可根据内容类型在Summary、Summary with Large Image、App和Player中选择合适的卡片。每种类型提供不同的布局和功能。
  • 高互动率: 带Twitter Card的链接比普通链接的点击率和转发率高2-3倍。视觉元素吸引用户注意力。
  • 与开放图谱兼容: 如果没有Twitter Card标签,Twitter会使用开放图谱标签作为备选。但为了获得最佳效果,建议使用Twitter Card专用标签。
  • 提供验证工具: Twitter提供名为Card Validator的官方工具来预览卡片的显示方式。
  • 富媒体支持: Player Card允许在Twitter时间线中直接播放视频和音频,大大提升用户体验。

使用方法​

以下是有效实现和使用Twitter Card的方法。

步骤1: 选择卡片类型 选择与内容性质匹配的Twitter Card类型。对于博客文章或新闻文章,带大图的摘要卡最有效。大图卡片也适合产品页面或作品集。视频内容使用Player Card,移动应用推广使用App Card。

步骤2: 添加基本Twitter Card标签 在网页的<head>部分添加Twitter Card元标签。至少必须包含四个标签:twitter:card、twitter:title、twitter:description和twitter:image。

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="博客SEO完整指南">
  <meta name="twitter:description" content="提升搜索排名的实战SEO策略">
  <meta name="twitter:image" content="https://example.com/seo-guide.jpg">
</head>

步骤3: 包含附加信息标签 添加网站或作者的Twitter账号会在卡片上显示,有助于增加关注者。twitter:site是网站的Twitter账号,twitter:creator是内容作者的账号。

<meta name="twitter:site" content="@zerocoke">
<meta name="twitter:creator" content="@zhangsan">

步骤4: 图片优化 Twitter Card图片非常重要。摘要卡需要至少120x120px(1:1比例),带大图的摘要卡需要至少300x157px(2:1比例)。最佳尺寸为1200x628px,文件大小必须低于5MB。支持JPG、PNG和WEBP格式。

步骤5: 使用Card Validator测试 在Twitter Card Validator(https://cards-dev.twitter.com/validator)中输入URL以检查卡片是否正确显示。如有错误立即修正并重新测试。预览显示在实际Twitter上的外观。

步骤6: 与开放图谱一起使用 虽然Twitter优先使用Twitter Card标签,但如果缺失会使用开放图谱标签。为了优化其他社交平台,也要实现开放图谱。同时使用两者是可以的,这是推荐的最佳实践。

示例​

示例1: 带大图的摘要卡(最常见)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>反向链接建设策略指南</title>

  <!-- Twitter Card基本标签 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@zerocoke">
  <meta name="twitter:creator" content="@zhangsan">
  <meta name="twitter:title" content="反向链接建设策略: 达到第1页排名">
  <meta name="twitter:description" content="通过真实案例学习有效的反向链接建设方法和应避免的错误。">
  <meta name="twitter:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta name="twitter:image:alt" content="反向链接建设策略信息图">

  <!-- 同时使用开放图谱(用于其他平台) -->
  <meta property="og:title" content="反向链接建设策略: 达到第1页排名">
  <meta property="og:description" content="通过真实案例学习有效的反向链接建设方法和应避免的错误。">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta property="og:url" content="https://zero-coke.com/blog/backlink-strategy">
  <meta property="og:type" content="article">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

示例2: 摘要卡(小图)

<head>
  <!-- 适合小缩略图的内容 -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@mynewssite">
  <meta name="twitter:title" content="今日SEO新闻摘要">
  <meta name="twitter:description" content="Google算法更新、搜索趋势、行业新闻一览">
  <meta name="twitter:image" content="https://example.com/logo-square.jpg">
  <meta name="twitter:image:alt" content="新闻网站标志">
</head>

示例3: 播放器卡(视频内容)

<head>
  <!-- 直接播放视频的卡片 -->
  <meta name="twitter:card" content="player">
  <meta name="twitter:site" content="@videosite">
  <meta name="twitter:title" content="博客变现完整指南(15分钟)">
  <meta name="twitter:description" content="用博客每月赚1000美元。从AdSense到联盟营销">
  <meta name="twitter:image" content="https://example.com/video-thumbnail.jpg">
  <meta name="twitter:player" content="https://example.com/embed/player?video=123">
  <meta name="twitter:player:width" content="1280">
  <meta name="twitter:player:height" content="720">
  <meta name="twitter:player:stream" content="https://example.com/video-123.mp4">
  <meta name="twitter:player:stream:content_type" content="video/mp4">
</head>

示例4: 应用卡(移动应用推广)

<head>
  <!-- 移动应用下载推广 -->
  <meta name="twitter:card" content="app">
  <meta name="twitter:site" content="@myappcompany">
  <meta name="twitter:title" content="博客管理器 - 一目了然查看博客统计">
  <meta name="twitter:description" content="在手机上实时查看博客表现">
  <meta name="twitter:image" content="https://example.com/app-icon.png">

  <!-- iOS应用信息 -->
  <meta name="twitter:app:name:iphone" content="博客管理器">
  <meta name="twitter:app:id:iphone" content="123456789">
  <meta name="twitter:app:url:iphone" content="blogmanager://open">

  <!-- Android应用信息 -->
  <meta name="twitter:app:name:googleplay" content="博客管理器">
  <meta name="twitter:app:id:googleplay" content="com.example.blogmanager">
  <meta name="twitter:app:url:googleplay" content="blogmanager://open">
</head>

示例5: 电商产品页面

<head>
  <!-- 产品页面优化 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@myshop">
  <meta name="twitter:title" content="高级无线耳机XYZ-2000 - 50%特别折扣">
  <meta name="twitter:description" content="降噪、30小时播放。仅限今日$129 → $64.50">
  <meta name="twitter:image" content="https://shop.example.com/products/xyz-2000-promo.jpg">
  <meta name="twitter:image:alt" content="XYZ-2000无线耳机产品照片">

  <!-- 产品标签(可选) -->
  <meta name="twitter:label1" content="价格">
  <meta name="twitter:data1" content="$64.50">
  <meta name="twitter:label2" content="库存">
  <meta name="twitter:data2" content="数量有限">
</head>

示例6: 新闻文章

<head>
  <!-- 为新闻文章优化的卡片 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@newsmedia">
  <meta name="twitter:creator" content="@journalist_kim">
  <meta name="twitter:title" content="2024年SEO趋势: AI搜索改变游戏规则">
  <meta name="twitter:description" content="Google的SGE和Bing的AI聊天正在从根本上改变搜索格局。SEO策略也必须演变。">
  <meta name="twitter:image" content="https://news.example.com/2024/ai-seo-trends.jpg">
  <meta name="twitter:image:alt" content="AI搜索引擎界面">

  <!-- 同时使用开放图谱文章标签 -->
  <meta property="og:type" content="article">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:author" content="记者金">
  <meta property="article:section" content="技术">
</head>

示例7: 活动/网络研讨会推广

<head>
  <!-- 活动推广页面 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@eventorganizer">
  <meta name="twitter:title" content="2024 SEO会议 | 9月15日COEX">
  <meta name="twitter:description" content="20位国内外SEO专家的实战经验。早鸟票50%折扣!">
  <meta name="twitter:image" content="https://event.example.com/seo-conference-2024.jpg">
  <meta name="twitter:image:alt" content="SEO会议2024主视觉">

  <!-- 用标签强调关键信息 -->
  <meta name="twitter:label1" content="日期">
  <meta name="twitter:data1" content="2024年9月15日">
  <meta name="twitter:label2" content="地点">
  <meta name="twitter:data2" content="COEX会展中心">
</head>

优缺点​

优点​

  • 点击率大幅增加: 带Twitter Card的链接比普通链接的点击率高2-3倍。视觉吸引力的卡片在时间线中吸引用户注意力。

  • 品牌知名度提升: 用一致的图片和信息专业地表达品牌。Twitter账号信息显示在卡片上,有助于增加关注者。

  • 富媒体体验: Player Card允许在Twitter上直接播放视频,让用户无需访问网站即可消费内容。这大大增加了互动。

缺点​

  • 需要额外工作: 除开放图谱外还要添加单独的Twitter Card标签,增加了工作量。优化所有社交平台会产生许多元标签。

  • 平台依赖性: Twitter Card仅在Twitter(X)上工作。其他平台需要开放图谱或各自的专有标签。

  • 图片制作负担: 有效的Twitter Card需要高质量图片。为每个内容创建或选择合适的图片需要时间和资源。

常见问题​

问: 应该使用Twitter Card还是开放图谱? 答: 最好两者都使用。Twitter优先使用Twitter Card标签,如果缺失则使用开放图谱标签作为备选。但开放图谱也被Facebook、LinkedIn、KakaoTalk等平台使用,所以要同时实现两者。Twitter Card标签用于Twitter优化,而开放图谱用于通用社交媒体优化。

问: 我的Twitter Card没有显示。为什么? 答: 可能有几个原因:1)元标签语法错误 - 用Card Validator检查。2)图片尺寸问题 - 确认满足最小尺寸要求。3)图片访问被阻止 - 确保robots.txt没有阻止图片。4)HTTPS问题 - 尽可能使用HTTPS URL。5)缓存问题 - 在Card Validator中重新抓取URL可能会解决。

问: 摘要卡和带大图的摘要卡有什么区别? 答: 摘要卡是紧凑格式,在文本旁边显示小正方形缩略图(120x120px+)。主要适合标志或图标。带大图的摘要卡在卡片顶部突出显示大长方形图片(推荐1200x628px)。对于大多数情况,包括博客文章、新闻文章和产品页面,带大图的摘要卡更有效。它有更大的视觉冲击力和更高的点击率。

问: 我更改了Twitter Card但没有反映更改。 答: Twitter会缓存卡片信息,因此更改可能不会立即反映。在Card Validator(https://cards-dev.twitter.com/validator)中输入URL并点击"Preview card"按钮,用最新信息重新抓取。已发推文链接上的卡片不会更新,因此重要更改应该用新推文分享。Twitter的缓存通常会保留约7天。