自定义 Twitter 链接预览：Twitter Cards 详解

2025年5月9日 星期五 11:53:01

当我们在 Twitter 上分享一个 URL 时，Twitter 会尝试抓取这个 URL 的信息，并以一种特定的卡片形式展示出来，这就是 Twitter Card。正确配置 Twitter Cards 可以显著改善链接在 Twitter 上的展示效果，并可能提高用户互动。

本文将介绍 Twitter Cards 的基本概念、主要类型、实现方式以及一些注意事项。

什么是 Twitter Cards？

Twitter Cards 是一种通过在网页 HTML 的 <head> 部分添加特定 meta 标签来实现的富媒体展示功能。当有人分享你的网页链接到 Twitter 时，Twitter 的爬虫会读取这些 meta 标签，并根据其内容生成一个包含标题、描述、图片甚至视频播放器的卡片。

为什么使用 Twitter Cards？

  1. 控制展示内容：你可以精确控制分享链接时显示的标题、描述和图片，而不是让 Twitter 自动抓取。
  2. 提升视觉吸引力：相比纯文本链接，带有图片或视频的卡片更吸引眼球。
  3. 提高点击率 (CTR)：更丰富和相关的预览信息通常能带来更高的点击率。
  4. 品牌一致性：确保分享内容符合你的品牌形象。

Twitter Cards 的类型

Twitter 提供了几种不同类型的 Card，以适应不同的内容需求：

  1. Summary Card (摘要卡片)

    • 用途：通用型卡片，适用于博客文章、新闻、产品页面等。
    • 特点：包含标题、描述、缩略图以及 Twitter 账户归属。
    • 关键 meta 标签：twitter:card 值为 summary。

  2. Summary Card with Large Image (带大图的摘要卡片)

    • 用途：与 Summary Card 类似，但图片展示区域更大，更突出。
    • 特点：图片是卡片的主要视觉元素。
    • 关键 meta 标签：twitter:card 值为 summary_large_image。

  3. App Card (应用卡片)

    • 用途：推广移动应用。
    • 特点：直接显示应用名称、图标、评分、价格，并提供直接下载链接（指向应用商店）。
    • 关键 meta 标签：twitter:card 值为 app。

  4. Player Card (播放器卡片)

    • 用途：分享音频或视频内容。
    • 特点：允许用户直接在 Twitter 信息流中播放媒体内容。
    • 关键 meta 标签：twitter:card 值为 player。需要提供视频/音频播放器 URL。

如何实现 Twitter Cards？

实现 Twitter Cards 的核心是在你网页的 <head> 部分添加一系列 meta 标签。

以下是一个 summary_large_image 类型的基本示例：

1
2
3
4
5
6
7
8
9
<head>
    <meta name=\"twitter:card\" content=\"summary_large_image\">
    <meta name=\"twitter:site\" content=\"@你的Twitter用户名\">
    <meta name=\"twitter:creator\" content=\"@内容创作者的Twitter用户名\">
    <meta name=\"twitter:title\" content=\"页面标题 - 最多70个字符\">
    <meta name=\"twitter:description\" content=\"页面描述 - 最多200个字符\">
    <meta name=\"twitter:image\" content=\"https://example.com/path/to/your/image.jpg\">
    <meta name=\"twitter:image:alt\" content=\"图片的描述文字\">
</head>

关键 Meta 标签详解

虽然不同类型的 Card 有其特定的标签，但以下是一些通用的和核心的标签：

  • twitter:card: 定义 Card 的类型。这是必需的。
    • 可选值: summary, summary_large_image, app, player。
  • twitter:site: 网站或公司的 Twitter 用户名，例如 @mytwitterhandle。通常是发布者的用户名。
  • twitter:creator: 内容创作者的 Twitter 用户名，例如 @authorhandle。可选，适用于多作者网站。
  • twitter:title: Card 的标题。对于 summary 类型，建议最多 70 个字符。
  • twitter:description: Card 的描述。对于 summary 类型，建议最多 200 个字符。如果描述为空，Twitter 可能会从页面内容中提取。
  • twitter:image: Card 中显示的图片的 URL。图片必须小于 5MB。
    • 对于 summary 卡片，图片宽高比应为 1:1，最小尺寸 144x144px，最大尺寸 4096x4096px。
    • 对于 summary_large_image 卡片，图片宽高比应为 2:1，最小尺寸 300x157px，最大尺寸 4096x4096px。
  • twitter:image:alt: 图片的描述性文本，用于可访问性 (Accessibility)。
  • twitter:player (Player Card 特有): 指向你的播放器 iframe 的 HTTPS URL。
  • twitter:player:width, twitter:player:height (Player Card 特有): 播放器的尺寸。
  • twitter:app:name:iphone, twitter:app:id:iphone, twitter:app:url:iphone (App Card 特有): 针对 iPhone 的应用信息。类似地，还有 ipad 和 googleplay 的对应标签。

调试和验证

实现 Twitter Cards 后，务必使用 Twitter 官方提供的 Card Validator (卡片验证器) 进行测试。

地址：https://cards-dev.twitter.com/validator

通过验证器，你可以：

  1. 输入你的页面 URL。
  2. 预览 Card 在 Twitter 上的显示效果。
  3. 查看 Twitter 爬虫抓取到的 meta 标签信息以及任何错误或警告。

首次分享一个 URL 时，如果 Twitter 之前没有缓存过该页面的 Card 数据，可能需要几秒钟到几分钟来抓取和生成 Card。验证器可以帮助预先抓取和缓存。

⚠️ 废弃提示：这个验证器现在已经被废弃，官方推荐直接在发帖窗口中预览 Card，无需额外操作。

注意事项

  1. 图片尺寸和格式：严格遵守 Twitter 对图片尺寸、宽高比和文件大小的规定，否则图片可能无法正确显示或被裁剪。支持 JPG, PNG, WEBP, GIF (GIF 只会显示第一帧作为静态图)。
  2. URL 必须是绝对路径：所有 URL (如 twitter:image, twitter:player) 都应该是绝对路径，并正确编码。
  3. HTTPS：对于 twitter:player 和 twitter:image 等资源，强烈建议使用 HTTPS 链接，以避免混合内容警告。Player Card 的 twitter:player URL 必须 是 HTTPS。
  4. robots.txt：确保你的 robots.txt 文件没有禁止 Twitter 的爬虫 (Twitterbot) 访问你的页面和相关资源（如图片）。
  5. 缓存：Twitter 会缓存 Card 数据。如果你更新了页面的 meta 标签，可能需要一段时间才能在 Twitter 上看到更新。使用 Card Validator 可以帮助刷新缓存。
  6. 内容唯一性：每个页面应该有其自己独特的 Card 信息，以准确反映页面内容。
  7. Open Graph (OG) 标签兼容性：如果页面上同时存在 Open Graph (OG) 标签 (如 og:title, og:image) 而没有相应的 Twitter Card 标签，Twitter 会尝试使用 OG 标签来生成 Card。但为了获得最佳控制，建议明确设置 Twitter Card 标签。如果两者都存在，Twitter Card 标签优先。

总结

Twitter Cards 是一个简单但有效的工具，可以优化你的内容在 Twitter 上的传播效果。通过添加几个 meta 标签，就能让分享的链接更具吸引力，从而可能带来更高的用户参与度。花点时间正确配置它们是值得的。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×