Twitter Card 预览图不显示，90% 是 og:image 或 twitter:image 的路径、尺寸、协议或缓存问题；需确保图片为 HTTPS 绝对 URL、服务器返回 200 状态码及正确 Content-Type，且 Twitterbot 可直连访问。
Twitter Card 预览图不显示，90% 是 og:image 或 twitter:image 的路径、尺寸、协议或缓存出了问题，不是代码漏写，而是部署细节没对齐。
为什么 Twitter 抓不到你的预览图
Twitter 的卡片解析器（twitter:card）不会执行 JavaScript，也不读取相对路径或本地文件。它只认绝对 URL、可公开访问的图片资源，且要求服务器返回 200 状态码和明确的 Content-Type（如 image/jpeg）。
- 常见错误现象：
Card not loaded due to missing image或卡片显示为空白/默认图标 - 最容易被忽略的点：图片 URL 必须是
https://开头，且不能带重定向（比如从http://301 跳转过来） - 如果用 CDN，确认其未屏蔽 Twitter 的 User-Agent（
Twitterbot/1.0） - 图片尺寸建议 ≥ 1200×600 像素；小于 600×314 像素可能被降级为
summary卡而非summary_large_image
twitter:image 和 og:image 要不要都写
要，但作用不同：og:image 是通用 Open Graph 标准，Facebook / LinkedIn 也用；twitter:image 是 Twitter 专用，且优先级更高——当两者冲突时，Twitter 只认自己的。
- 必须同时提供
twitter:card（值为summary或summary_large_image）和twitter:title，否则卡片直接失效 -
twitter:image:width和twitter:image:height不强制，但加了能减少解析延迟，尤其对大图 - 如果图片是 PNG 且含透明通道，部分旧版 Twitter 客户端可能渲染异常，优先用 JPG
本地开发时怎么快速验证卡片是否生效
别靠刷新页面看效果——Twitter 缓存极强，且不重新抓取已解析过的 URL。要用官方调试工具：
- 访问 https://www.php.cn/link/3348eb92c98456b4ef8930705f073148（注意是
cards-dev，不是developer.twitter.com） - 粘贴你页面的完整 URL（必须是线上可访问地址，
localhost或127.0.0.1无效） - 点击
Preview card，看返回日志里有没有INFO: Could not fetch image或WARN: Image may be too small - 改完代码后，务必点页面右上角的
Refresh card按钮强制重抓，否则看到的还是旧缓存
动态页面（React/Vue/Next.js）的特别坑点
服务端没吐出 OG 标签，客户端 JS 补上也没用——Twitterbot 不执行 JS，只读 HTML 初始响应体。
- Next.js 用户：必须用
generateMetadata（App Router）或getServerSideProps（Pages Router）注入标签，不能靠useEffect+document.head.appendChild - Vue SPA：需配置 SSR（如 Nuxt）或预渲染（prerender-spa-plugin），纯静态部署 + 客户端路由 = 卡片必然失败
- 图片 URL 若含 query 参数（如
?v=20260408），确保该 URL 真实存在且可直连，Twitterbot 不会处理重写规则
最常被卡住的地方不是语法，而是图片 URL 能不能被 Twitterbot 直接 curl -A "Twitterbot/1.0" https://yoursite.com/image.jpg 成功返回——先在服务器上跑这行命令，结果不对，其他全是白搭。
