twitter卡片必填四字段：twitter:card、twitter:site、og:url、og:title；缺一则降级为纯链接，且需validator强制抓取、页面返回200、图片满足尺寸与跨域要求。
Twitter 卡片（Twitter Card）不会自动显示，光写 <meta> 标签没用——必须先在 Twitter Card Validator 上提交 URL 触发抓取，且页面响应头需返回 200、HTML 可被正常解析。
哪些 meta 标签是必填的
Twitter 不会渲染任意 meta，只认特定 name 或 property 前缀。漏掉任一必填项，卡片直接降级为纯链接（no card）。核心四字段缺一不可：
-
<meta name="twitter:card" content="summary_large_image">（或summary） -
<meta name="twitter:site" content="@yourhandle">（账号需已验证域名归属） -
<meta property="og:url" content="https://example.com/page">（必须与分享 URL 完全一致，含协议、尾部斜杠） -
<meta property="og:title" content="Page Title">（建议 ≤ 70 字符）
注意：twitter:site 的值是 Twitter 用户名（带 @），不是网址；og:url 若指向重定向地址（301/302），Validator 会抓取跳转后页面，但 Twitter 客户端仍按原始 URL 匹配卡片——极易不生效。
图片配置为什么总失败
最常见原因是图片不满足硬性要求，而非标签写错。Twitter 对 twitter:image 的校验极严：
- 尺寸必须 ≥ 300×157px（
summary）或 ≥ 1200×630px（summary_large_image），宽高比建议 2:1 - 格式仅支持 JPG、PNG、GIF（动图仅首帧）；WebP 不支持
- URL 必须是绝对路径（
https://...），不能是/img/card.jpg - 服务器需允许跨域：响应头必须含
Access-Control-Allow-Origin: *，否则 Twitter 抓取时视为 403
调试时直接在浏览器访问图片 URL，看能否正常加载且无跨域报错；用 curl 检查响应头：curl -I https://example.com/card.jpg | grep "Access-Control"。
validator 提示 “Unable to render Card” 怎么排查
这个错误不说明具体原因，实际可能是以下任一环节断裂：
- 页面返回非 200 状态码（如 404、503、301 未配置好）
- HTML 中存在未闭合的
<meta>或乱序的结构（Validator 解析器较老，对语法错误零容忍） - 同一页面同时声明了
twitter:card和冲突的og:type（例如og:type=article但没配twitter:creator） - 使用了 HTTP（非 HTTPS）协议——2023 年起 Twitter 强制要求 HTTPS
最稳做法：用 validator 抓取后，点 “View source” 看它实际读到的 HTML，确认 meta 标签是否真的出现在 内、未被 JS 动态注入、且无编码错误（如中文未 UTF-8 编码）。
真正卡住人的往往不是标签怎么写，而是 Twitter 抓取时看到的 HTML 和你本地调试的不一样——CDN 缓存、服务端 A/B 测试、UA 判断屏蔽爬虫，都可能导致 validator 看到空白页或 404。别只盯着代码，先确认它“看得到”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
