Twitter Card 图片尺寸与预览检查清单

Q: Twitter 卡片图片的理想尺寸是多少？

理想尺寸是 1200 × 630 像素，正好匹配 summary_large_image 卡片所期待的 1.91:1 裁切。

Q: Twitter 卡片图必须是 HTTPS 吗？

是的。twitter:image 和 og:image 都必须指向绝对 HTTPS 地址，否则抓取器可能取不到预览。

Q: 想要大图预览，twitter:card 该设成什么？

当图片本身就是分享链接的主要视觉时，把 twitter:card 设为 summary_large_image。

Q: 怎么检查 Twitter 卡片图是否正常加载？

对最终的 CDN 图片 URL 跑 curl -I，发布前确认返回 HTTP 200 且 content type 是图片类型。

最后更新: July 12, 2026

Twitter 卡片图片是当有人在 X 上分享 URL 时出现的预览图。它应该足够大以看起来清晰锐利，又足够小让爬虫能快速获取，并且必须使用元数据声明，确保即使平台回退到 Open Graph tags 也能正常工作。

本指南为您提供了一个实用的发布检查清单：包括尺寸、标签、文件格式、CDN 检查，以及解决卡片无法更新问题的方案。

快速答案：应该使用什么 Twitter 卡片图片？

对于大多数分享链接，特别是当你想要一个大型图片卡片时，请使用 1200 by 630 pixel WebP 或 JPEG。将重要主体远离边缘，确保缩略图尺寸下的文字可读性，并在 twitter:image 和 og:image 中都使用绝对 HTTPS URL。

对于 X，当图片是主要亮点时，将 twitter:card 设置为 summary_large_image。确保文件大小远低于文档记录的卡片图片限制，并在发布前验证最终 CDN URL 是否返回 HTTP 200。

可靠的设置很简单：

为预览导出一张 1200 by 630 图片。
使用最终的 CDN URL，而不是相对路径。
添加 twitter:title、twitter:description 和 twitter:image。
添加匹配的作为备用方案的 og:title、og:description 和 og:image。
部署后测试实时 URL，如果旧图片仍然出现，则刷新平台缓存。

什么是 Twitter card 图片？

Twitter card 图片是在页面元数据中声明的图片 URL，以便 X 可以构建丰富的预览。它与文章中的第一张图片不是一回事。爬虫会读取 HTML head，找到卡片标签，获取图片，并为分享的 URL 存储一个缓存预览。

X 自己的卡片标记示例仍在其开发者文档和示例中描述 summary 和 summary_large_image 卡片类型。实际的区别在于预览尺寸：summary_large_image 为图片提供了足够的空间来承载博客、产品、工具或活动链接。

Open Graph 很重要，因为许多社交平台、聊天应用和链接预览系统会读取 og:image。Open Graph protocol 将 og:title、og:type、og:image 和 og:url 定义为核心元数据。请同时使用 Twitter/X 标签和 Open Graph 标签，以防缺少某个解析器导致所有预览都失效。

元数据字段	用途	实用提示
`twitter:card`	选择摘要或大图布局	大多数文章和落地页分享使用 `summary_large_image`
`twitter:image`	X 主要预览图	使用绝对 HTTPS 图片 URL
`og:image`	社交和消息应用的备用预览图	通常与 `twitter:image` 一致，除非平台需要不同的裁剪
`og:url`	分享页面的规范 URL	与公开的规范页面 URL 一致
`title` 和 `description` 标签	浏览器和搜索上下文	保持与社交元数据一致

有关相关的图片元数据工作，请结合 Image Optimization for SEO 指南和 Complete Image Optimization Checklist。

Twitter 卡片图片应该是什么尺寸？

从 1200 by 630 pixels 开始。它符合常见的 1.91:1 社交预览裁剪比例，为平台提供了足够的像素进行干净的缩放，并且当同一图片用作 og:image 时效果很好。

避免设计只能在全尺寸下效果良好的卡片。信息流会裁剪、调整大小并在图片周围放置文本。小型标签、纤细的 UI 截图和复杂的背景在设计工具中通常看起来很好，但在实际分享卡片中可能会变得难以阅读。

用例	推荐图片	工作原理	注意事项
博文或指南	1200 x 630 WebP	大型预览裁剪，广泛的平台兼容性	过小的标题文本
产品发布	1200 x 630 WebP 或 JPEG	缩放后产品仍可见	裁剪掉产品的边缘
工具页面	1200 x 630 基于截图的图形	在点击前展示工具的功能	UI 文本过小无法阅读
仅有 Logo 的页面	1200 x 630 并留出充足的填充空间	防止 Logo 显得拥挤	看起来空荡的预览图
适合方形的活动	需要时使用单独的 1200 x 1200 版本	对具有方形裁剪比例的平台很有用	不要盲目将其作为 X 卡片重用

当你需要多个平台裁剪时，请使用 Best Image Resizer for Social Media 文章；当相同的创意内容也用于付费社交时，请使用 Facebook Ad Image Sizes。

如何编写元数据？

将标签放入服务器渲染的 HTML 中，放在页面的 <head> 内。不要依赖客户端 JavaScript 在加载后注入社交标签。链接预览爬虫可能不会像浏览器那样执行你的应用。

对于普通文章或工具页面，请使用此模式：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size and Preview Checklist">
<meta name="twitter:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta name="twitter:image" content="https://cdn.example.com/blog/twitter-card-image.webp">

<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size and Preview Checklist">
<meta property="og:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta property="og:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:url" content="https://example.com/blog/twitter-card-image">

在代码审查中保留以下检查项：

图像 URL 是绝对的，并以 https://. 开头。
图像 URL 是最终的 CDN URL，而不是本地构建路径。
页面标题和社交标题描述的是同一个页面。
社交描述足够简短，可以在预览中浏览。
canonical URL 和 og:url 指向同一个公共页面。
卡片图像未被 robots.txt、身份验证或热链接规则阻止。
服务器响应包含正确的图像内容类型。

Google 的图像 SEO 指南还在 Google Images best practices 中推荐了描述性的图像上下文、可抓取的图像 URL 和支持的格式。这些建议并非 Twitter 特有的，但它们属于相同的发布规范：让重要的图像易于爬虫发现、获取和理解。

为 Twitter 卡片图片应该使用 WebP、JPEG 还是 PNG？

当您的平台和预览目标支持时，请使用 WebP，特别是用于包含混合颜色的文章图形、产品预览和截图。如果需要广泛兼容性或卡片内容以照片为主，请使用 JPEG。只有当透明度或无损边缘足够重要，值得接受更大的文件大小，才使用 PNG。

MDN 的 image file type guide 解释说 WebP 支持有损和无损压缩。这种灵活性对于社交卡片很有用，因为一张图片可以包含照片纹理、平坦的品牌颜色和文字类型。

对于本文，我使用 ImageMagick 在本地对四张 1200 by 630 WebP 图形进行了编码和测试，并在发布前检查了输出大小。由于它们是纹理有限的干净图形，因此大小在 14 KB 到 28 KB 之间。真实的商品照片和详细截图通常会更大。

格式	适合	典型风险	实用起点
WebP	大多数社交预览图和混合图像卡片	某些旧工具可能无法预览本地草稿	导出有损 WebP 约 q80
JPEG	照片为主的预览和保守兼容需求	无透明度、文字周围可能有振铃	导出约 q85
PNG	Logo、透明度、锐利扁平图形	文件较大	仅在必须无损时使用
AVIF	极小的现代图像	预览生态可能不太可预测	作为唯一卡片图前仔细测试

如果卡片图片同时也是页面英雄图，请遵循 Image Compression Ratio 指南，以确保预览看起来干净而不使页面过重。如果您正在比较现代格式，请阅读 AVIF vs WebP Comparison。

如何让图片在信息流中易于阅读？

设计卡片时，要考虑它在实际展示的最小空间，而不是编辑器中的画板。信息流预览版可能比原始尺寸窄，周围的用户界面（UI）也会争夺用户的注意力。

请遵循这些设计规则：

将主要主体或标题放在中心安全区域。
在面部、产品、标志和文本周围留出足够的填充空间（padding）。
使用一个简短的信息，而不是完整的文章标题加上副标题再加徽章。
在批准图片之前，请检查其宽度是否为 600 pixels。
避免使用带有微小标签的截图，除非用户界面（UI）本身就是故事的主角。
保持足够的对比度，以便快速浏览。
当页面内容是关于工具、产品或技术工作流程时，不要使用通用库存图片。

一张有用的卡片图片，应该在读者研究标题之前就回答“这个链接是关于什么的？”。对于博客文章，它可能是一个简单的图表。对于电商指南，它可能是一个产品照片示例。对于转换器或缩放器，它可能是一张裁剪过的工具截图。

为什么我的 Twitter 卡片图片不显示？

大多数卡片图片显示错误的原因有四个：爬虫无法获取 URL，元数据指向了错误的图片，平台缓存了旧版本，或者图片技术上是有效的但作为预览候选不理想。

在更改创意素材之前，请执行以下步骤：

打开最终页面源代码，确认是否存在 twitter:image 标签。
从渲染的 HTML 中复制确切的图片 URL。
对图片 URL 运行 curl -I 并确认 HTTP 200。
确认响应内容类型是图片类型。
检查图片 URL 是否没有通过认证墙进行重定向。
确保图片文件不是巨大的。
确认 robots.txt 没有阻止该图片或页面。
当需要强制刷新缓存时，更改图片文件名。
测试已部署的页面，而不是本地预览 URL。
如果卡片在一个应用中工作但在另一个应用中不工作，请检查 Open Graph tags。

症状	可能原因	修复方法
没有图片显示	缺少或相对的 `twitter:image`	使用完整的 HTTPS CDN URL
显示旧图片	缓存预览	发布新文件名并刷新分享 URL
图片裁剪得不好	不安全的构图	重新导出时增加填充物和中心主体
预览标题错误	元数据不匹配	对齐 `twitter:title`、`og:title` 和页面标题
本地工作但在线上不行	本地路径、认证或被阻止的 CDN	使用 `curl -I` 测试生产 URL

当主体需要更安全的裁剪时，Crop Image Online Guide 非常有用；而 Image Aspect Ratio Changer 则涵盖了将创意素材从方形或肖像转换为社交预览框的方法。

发布前检查清单

在发布依赖于社交分享的页面之前，请同时检查图片和元数据。即使 WebP 文件完美无瑕，如果标签指向的是昨天的 URL，它仍然会失败。完美的元数据，如果图片在信息流中无法阅读，也会令人失望。

使用此最终检查清单：

前置元数据或 CMS 图片与用于社交元数据的图片相同。
图片是该页面的唯一内容，或者与页面内容明显相关。
图片 URL 是 HTTPS 且公开的。
文件扩展名与实际响应格式匹配。
图片从 CDN 返回 HTTP 200。
标题和描述没有过度堆砌关键词。
在文章主体中出现的预览图片具有描述性的 alt text。
图片在桌面和移动预览尺寸下进行了视觉检查。
页面拥有稳定的 canonical URL。
部署后重新测试卡片。

一张好的 Twitter card 图片是一个小型发布系统：一个清晰的视觉元素、稳定的元数据、快速的 CDN URL，以及最终的获取检查。一旦这些部分到位，预览在发布或内容刷新期间发生故障的可能性就会大大降低。

常见问题

Twitter 卡片图片的理想尺寸是多少？

理想尺寸是 1200 × 630 像素，正好匹配 summary_large_image 卡片所期待的 1.91:1 裁切。

Twitter 卡片图该用什么格式？

多数社交预览图用 WebP 是最佳默认；以照片为主的卡片可以用 JPEG 作为稳妥的兜底。

Twitter 卡片图必须是 HTTPS 吗？

是的。twitter:image 和 og:image 都必须指向绝对 HTTPS 地址，否则抓取器可能取不到预览。

想要大图预览，twitter:card 该设成什么？

当图片本身就是分享链接的主要视觉时，把 twitter:card 设为 summary_large_image。

我换了图，为什么卡片还显示旧的？

X 按 URL 缓存预览。发布一个新文件名的图片再重新测试线上页面，通常是最快的刷新方式。

og:image 和 twitter:image 能用同一张图吗？

可以。两个标签用同一张 1200 × 630 的图，能让 X、Facebook 以及读取 Open Graph 的聊天应用之间的预览保持一致。

怎么检查 Twitter 卡片图是否正常加载？

对最终的 CDN 图片 URL 跑 curl -I，发布前确认返回 HTTP 200 且 content type 是图片类型。

PNG 适合做 Twitter 卡片图吗？

需要透明或无损边缘的标志和图形适合用 PNG，但对典型卡片来说，它的体积比 WebP 或 JPEG 都大。