Back to Details

twitter-cards

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SEO On-Page: Twitter Cards

站内SEO：Twitter Cards

Guides implementation of Twitter Card meta tags for X (Twitter) link previews. Twitter falls back to Open Graph if Twitter-specific tags are missing; add both for best results.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
本指南介绍如何为X（Twitter）链接预览实现Twitter Card元标签。如果缺少Twitter专属标签，Twitter会回退使用Open Graph标签；建议同时添加两种标签以获得最佳效果。
调用时机：首次使用时，如有需要，先用1-2句话说明本技能涵盖的内容及其重要性，再提供主要输出内容。后续使用或用户要求跳过介绍时，直接提供主要输出内容。

Scope (Social Sharing)

适用范围（社交分享）

  • Twitter Cards: X-specific meta tags; control how links appear when shared on X/Twitter
  • Twitter Cards：X专属元标签；用于控制链接在X/Twitter上分享时的展示样式

Card Types

卡片类型

TypeUse case
summarySmall card with thumbnail
summary_large_imageLarge prominent image (recommended; 1200×675px)
appMobile app promotion
playerVideo/audio content
类型使用场景
summary带缩略图的小型卡片
summary_large_image大图突出展示（推荐使用；尺寸1200×675px）
app移动应用推广
player视频/音频内容

Recommended Tags (summary_large_image)

推荐标签（summary_large_image类型）

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:creator" content="@authorusername">
<meta name="twitter:image:alt" content="Alt text for image">
TagGuideline
twitter:cardRequired; 
summary_large_image
for most pages
twitter:titleMax 70 chars; concise title
twitter:descriptionMax 200 chars; summary
twitter:imageAbsolute URL; unique per page
twitter:site@username of website
twitter:creator@username of content creator
twitter:image:altAlt text; max 420 chars; accessibility
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:creator" content="@authorusername">
<meta name="twitter:image:alt" content="Alt text for image">
标签规范
twitter:card必填；大多数页面使用
summary_large_image
twitter:title最多70字符；简洁明了的标题
twitter:description最多200字符；内容摘要
twitter:image绝对URL；每个页面使用唯一图片
twitter:site网站的@用户名
twitter:creator内容创作者的@用户名
twitter:image:alt图片替代文本；最多420字符；提升可访问性

Image Requirements

图片要求

ItemGuideline
Aspect ratio2:1
Minimum300×157 px
Recommended1200×675 px
Max4096×4096 px
File sizeUnder 5MB
FormatsJPG, PNG, WebP, GIF (first frame only); SVG not supported
项目规范
宽高比2:1
最小尺寸300×157 px
推荐尺寸1200×675 px
最大尺寸4096×4096 px
文件大小小于5MB
支持格式JPG、PNG、WebP、GIF（仅第一帧）；不支持SVG

Common Mistakes

常见错误

  • Missing Twitter Card tags (Twitter won't display images properly without them)
  • Using relative image URLs instead of absolute https://
  • Images too small or wrong aspect ratio
  • Title/description too long (gets truncated)
  • 缺少Twitter Card标签（没有这些标签，Twitter无法正常显示图片）
  • 使用相对图片URL而非绝对https://链接
  • 图片尺寸过小或宽高比错误
  • 标题/描述过长（会被截断）

Implementation

实现方式

Next.js (App Router)

Next.js（App Router）

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

HTML (generic)

HTML（通用）

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
<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">

Testing

测试方法

Related Skills

相关技能

  • social-share-generator: Share buttons use Twitter Cards for X previews when users share; Cards must be set for share buttons to show proper previews
  • open-graph: OG tags; Twitter falls back to OG if Twitter tags missing
  • title-tag: Title tag often mirrors twitter:title
  • meta-description: Meta description often mirrors twitter:description
  • page-metadata: Hreflang, other meta tags
  • twitter-x-posts: X post copy and engagement (different from link previews)
  • social-share-generator：当用户分享时，分享按钮会使用Twitter Cards生成X预览；必须先设置好Cards，分享按钮才能显示正确的预览效果
  • open-graph：OG标签；如果缺少Twitter标签，Twitter会回退使用OG标签
  • title-tag：Title标签通常与twitter:title一致
  • meta-description：元描述通常与twitter:description一致
  • page-metadata：Hreflang及其他元标签
  • twitter-x-posts：X帖子文案与互动（与链接预览不同）