twitter-cards

SEO 页面内优化：Twitter Cards

负责 X/Twitter Card 的文案编写和实施规则。page-metadata 负责完整的页面生命周期和发布验证。各平台可能会回退使用 Open Graph，因此只有在 X 专属文案能带来价值时，才定义此类文案。

调用时：首次使用时，如果有帮助，可以先用 1–2 句话介绍此技能涵盖的内容及其重要性，然后提供主要输出。后续使用或用户要求跳过时，直接提供主要输出。

范围（社交分享）

• Twitter Cards：X 专属元标签；控制链接在 X/Twitter 上的分享展示方式

Card 类型

类型	使用场景
summary	带缩略图的小型 Card
summary_large_image	大幅醒目图片（推荐；1200×675px）
app	推广移动应用
player	视频/音频内容

推荐标签（summary_large_image）

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Your description">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:creator" content="@authorusername">
<meta name="twitter:image:alt" content="Alt text for image">

标签	指南
twitter:card	必填；大多数页面使用 summary_large_image
twitter:title	简洁的社交标题；与 SEO/OG 文案表达相同的页面身份，但文本不必完全一致
twitter:description	准确概述内容，不包含缺乏依据的声明
twitter:image	绝对 URL；每个页面使用独有图片
twitter:site	网站的 @username
twitter:creator	内容创作者的 @username
twitter:image:alt	替代文本；最多 420 个字符；用于无障碍访问

图片要求

项目	指南
宽高比	2:1
最小尺寸	300×157 px
推荐	使用适合所选 Card 的高分辨率图片，并核实平台当前的行为
投放	使用绝对 HTTPS URL，且图片响应成功
格式和大小	若实施依赖精确限制，请对照 X 当前文档进行核实

常见错误

• 缺少 Twitter Card 标签（没有这些标签，Twitter 将无法正确显示图片）
• 使用相对图片 URL，而非绝对 https:// URL
• 图片尺寸过小或宽高比错误
• 标题/描述过长（会被截断）
• 不顾分享场景是否需要不同措辞，机械照搬 SEO 文案
• 在 SEO、OG 和 X 元数据之间改变产品身份或承诺

实施

Next.js（App Router）

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: '...',
    description: '...',
    images: ['https://example.com/twitter.jpg'],
    site: '@yourusername',
    creator: '@authorusername',
  },
};

HTML（通用）

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Your description">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:image:alt" content="Alt text">

测试

检查已部署的初始 HTML，并使用当前 X 产品提供的实际分享/预览工作流进行测试。不要将已停用的公开 Card Validator 作为发布门槛。请考虑预览可能会缓存。

相关技能

• social-share-generator：用户分享时，分享按钮会使用 Twitter Cards 生成 X 预览；必须设置 Cards，分享按钮才能显示正确的预览
• open-graph：OG 标签；缺少 Twitter 标签时，Twitter 会回退使用 OG
• title-tag、meta-description：搜索文案；在保持页面身份一致的同时，内容可以有所不同
• page-metadata：完整生命周期、权威来源实施和生产环境验证
• twitter-x-posts：X 帖子文案和互动（不同于链接预览）
• twitter-card-image-generator：以编程方式生成 Twitter Card 图片——1200×675px、2:1 宽高比、player card 封面图、针对约 40% X 用户的深色模式适配、适用于移动设备 1:1 裁剪的时间线安全区域设计，以及 og-image-generator 的全部 6 种视觉样式。此技能介绍如何设置 twitter:image 标签；twitter-card-image-generator 则介绍如何创建图片。