twitter card 是x平台分享链接时显示富媒体摘要的元标签机制，虽官方停用预览服务，但部分客户端仍依赖twitter:*标签；必需4个标签为twitter:card、twitter:site、twitter:title、twitter:description，且须置于head中用name属性声明。
Twitter Card 是什么，为什么现在还要设
Twitter（现 X）已停用官方卡片预览服务，但部分第三方工具、旧版客户端、RSS 聚合器或浏览器插件仍会读取 twitter:* 元标签来生成摘要。如果你的内容被转发到 X 平台，且希望链接在分享时显示标题、描述和图片，仍需保留这些标签——否则大概率回退为纯 URL 或抓取错误内容。
关键点：不是“必须”，而是“不设就大概率失效”。X 官方不再主动渲染，但标签本身没被移除，解析逻辑仍在部分链路中运行。
必需的 4 个 twitter:* 标签及取值规则
少于这 4 个，X 客户端基本不会尝试渲染卡片；多加无益，还可能触发校验失败。
-
twitter:card：固定填summary_large_image（推荐）或summary；前者适配大图预览，后者仅小图+文字 -
twitter:site：填你的 X 账号（含 @），如@yourhandle；若不填，卡片右上角不显示账号标识 -
twitter:title：纯文本，建议 ≤ 70 字符；过长会被截断，且不换行 -
twitter:description：纯文本，建议 ≤ 200 字符；避免含 HTML 实体或换行符（&可，<br>不可）
注意：twitter:image 不是必需项，但没它就只剩文字卡片。若设置，URL 必须是绝对路径、HTTPS、尺寸 ≥ 300×157px（推荐 1200×630px），且服务器需允许跨域（Cross-Origin-Resource-Policy: cross-origin 或无限制）。
常见失效原因与调试方法
即使标签写对，卡片也常不生效——多数问题出在部署侧而非代码侧。
- X 不缓存实时更新：改完 HTML 后，必须用 Twitter Card Validator（已归档，但仍有镜像可用）或第三方工具（如
curl -I https://your-url.com看响应头）验证是否返回 200 且 HTML 可访问 - CDN 缓存了旧 HTML：清除 CDN 缓存，或临时禁用，再测试
- 图片 404 或返回 302：X 抓图时不会跟随重定向，
twitter:image必须直出 200 响应 - 页面含多个
twitter:*标签（如 CMS 自动生成 + 手动添加）：以最后出现的一组为准，重复定义会导致解析失败 - 使用了
twitter:domain：该标签已废弃，留着反而干扰解析
HTML 中怎么放才不出错
所有 twitter:* 标签必须放在 内，且优先级高于 Open Graph（og:*）标签——因为 X 会先查 twitter:*，找不到才 fallback 到 og:*。
示例（直接复制可用，替换对应值即可）：
<meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@yourhandle"><meta name="twitter:title" content="这是文章标题"><meta name="twitter:description" content="这是不超过200字的简介"><meta name="twitter:image" content="https://example.com/image.jpg">
别漏掉 name= 属性，写成 property=（那是 Open Graph 的）就完全无效。也别用 <meta property="twitter:card"> —— X 解析器只认 name。
最常被忽略的是：X 不支持动态 JS 注入标签。所有 twitter:* 必须在初始 HTML 中存在，SSR 渲染或静态生成才行；CSR 页面（如 React/Vue SPA）需服务端预渲染或使用 SSR 插件补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
