2026-03-28

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

选择合适的 Twitter Card 图片尺寸、元数据、WebP 导出和排查步骤，让链接在 X 和其他社交信息流中清晰显示。

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

最后更新: June 28, 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 标签，以防缺少某个解析器导致所有预览都失效。

Metadata field Use it for Practical note
twitter:card Chooses summary or large-image layout Use summary_large_image for most article and landing-page shares
twitter:image Primary X preview image Use an absolute HTTPS image URL
og:image Fallback preview image for social and messaging apps Usually match twitter:image unless a platform needs a different crop
og:url Canonical URL for the shared page Match the public canonical page URL
title and description tags Browser and search context Keep them consistent with social metadata

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

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

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

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

显示一张带有 WebP、文件大小、HTTPS 和安全边缘设计说明的 1200 by 630 Twitter 卡片图片图表

用例 推荐图片 工作原理 注意事项
博文或指南 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 在加载后注入社交标签。链接预览爬虫可能不会像浏览器那样执行你的应用。

显示用于社交预览的 twitter card、twitter image 和 open graph image 标签的三行元数据图表

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

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

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

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

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 之间。真实的商品照片和详细截图通常会更大。

Format Good fit Typical risk Practical starting point
WebP Most social preview graphics and mixed image cards Some older tools may not preview local drafts Export lossy WebP around quality 80-85
JPEG Photo-heavy previews and conservative compatibility needs No transparency, possible ringing around text Export around quality 82-88
PNG Logos, transparency, sharp flat graphics Large file size Use only when lossless is necessary
AVIF Very small modern images Preview ecosystem can be less predictable Test carefully before using as the only card image

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

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

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

请遵循这些设计规则：

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

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

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

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

显示相对图片 URL、爬虫阻止、陈旧缓存卡片和超大文件故障排除清单图表

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

  1. 打开最终页面源代码，确认是否存在 twitter:image 标签。
  2. 从渲染的 HTML 中复制确切的图片 URL。
  3. 对图片 URL 运行 curl -I 并确认 HTTP 200。
  4. 确认响应内容类型是图片类型。
  5. 检查图片 URL 是否没有通过认证墙进行重定向。
  6. 确保图片文件不是巨大的。
  7. 确认 robots.txt 没有阻止该图片或页面。
  8. 当需要强制刷新缓存时，更改图片文件名。
  9. 测试已部署的页面，而不是本地预览 URL。
  10. 如果卡片在一个应用中工作但在另一个应用中不工作，请检查 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，以及最终的获取检查。一旦这些部分到位，预览在发布或内容刷新期间发生故障的可能性就会大大降低。

阅读指南的同时，欢迎使用这些免费工具。

压缩图片移除背景

继续阅读

如何批量调整图片尺寸：免费工具和脚本对比比较 的封面图片

Tue Mar 03 2026 19:00:00 GMT-0500 (北美东部标准时间)

如何批量调整图片尺寸：免费工具和脚本对比比较

本文教您如何使用免费在线工具、ImageMagick、XnConvert和Python脚本，一次性批量调整数百张图片的尺寸。内容涵盖了从复制粘贴命令到预设尺寸的设置，提供了一个实用且完整的图片处理工作流程指南。

最佳社交媒体图片尺寸调整器，优化工作流程 的封面图片

Tue Mar 03 2026 19:00:00 GMT-0500 (北美东部标准时间)

最佳社交媒体图片尺寸调整器，优化工作流程

用于社交媒体图像的专业缩放工具。您可以精确调整比例、裁剪安全区域、设置导出大小和压缩参数，并为各大平台提供可重复、高效的工作流解决方案。