Open Graph Image Sizes and Dimensions: The Complete 2026 Guide
Open Graph Image Sizes and Dimensions: The Complete 2026 Guide
Open Graph 图片尺寸与规格：2026 年完整指南
When you paste a link into Slack, X, or iMessage and it unfurls into a rich card with a big image, that image comes from your page’s Open Graph tags. Get the size wrong and the card collapses into a tiny thumbnail or, worse, shows nothing at all. This guide gives you the exact dimensions and the meta tags to use. 当你将链接粘贴到 Slack、X 或 iMessage 中，它会展开成一张带有大图的富媒体卡片，这张图片正是来自你网页的 Open Graph 标签。如果尺寸设置错误，卡片可能会缩成一个小缩略图，甚至什么都不显示。本指南将为你提供确切的尺寸规格及所需的元标签。
The short answer: Use 1200 by 630 pixels. That is an aspect ratio of roughly 1.91 to 1, and it is the size every major platform renders as a full-width preview card. If you only remember one number, remember 1200 by 630. 简短的回答是：使用 1200 x 630 像素。这大约是 1.91:1 的宽高比，也是各大主流平台渲染全宽预览卡片所采用的标准尺寸。如果你只能记住一个数字，请记住 1200 x 630。
Platform-by-platform sizes
各平台尺寸对照表
| Platform | Recommended size | Notes |
|---|---|---|
| 1200 x 630 | Under 600 x 315 drops to a small thumbnail | |
| X (Twitter) | 1200 x 630 | Needs twitter:card set to summary_large_image |
| 1200 x 627 | Treats 1200 x 630 the same in practice | |
| Slack | 1200 x 630 | Reads standard og:image |
| Discord | 1200 x 630 | Reads standard og:image |
| iMessage | 1200 x 630 | Reads standard og:image |
| 平台 | 推荐尺寸 | 备注 |
|---|---|---|
| 1200 x 630 | 低于 600 x 315 会降级为小缩略图 | |
| X (Twitter) | 1200 x 630 | 需将 twitter:card 设置为 summary_large_image |
| 1200 x 627 | 实际应用中与 1200 x 630 无异 | |
| Slack | 1200 x 630 | 读取标准 og:image |
| Discord | 1200 x 630 | 读取标准 og:image |
| iMessage | 1200 x 630 | 读取标准 og:image |
The takeaway: one 1200 by 630 image satisfies all of them. You do not need a different file per platform. 结论：一张 1200 x 630 的图片即可满足所有平台的需求。你不需要为每个平台准备不同的文件。
Minimum, maximum, and file size
最小、最大及文件大小限制
- Minimum for a large card: 600 by 315. Below this, Facebook and LinkedIn render a small square thumbnail next to the text instead of the big card.
- 大卡片的最小尺寸： 600 x 315。低于此尺寸，Facebook 和 LinkedIn 会在文字旁显示一个小方形缩略图，而不是大卡片。
- Aspect ratio: keep it at 1.91 to 1. If your image is a different ratio, platforms crop it, usually from the center, and your text can get cut off.
- 宽高比： 保持在 1.91:1。如果图片比例不同，平台通常会从中心进行裁剪，导致你的文字被切掉。
- File size: keep it under 8 MB for Facebook, but aim for well under 1 MB so the card loads fast. WebP or optimized PNG and JPEG all work.
- 文件大小： Facebook 要求在 8 MB 以下，但建议控制在 1 MB 以内，以确保卡片加载迅速。WebP、优化后的 PNG 和 JPEG 格式均可使用。
- Safe zone: keep important text and logos away from the outer edges, since some apps crop a few pixels.
- 安全区域： 将重要的文字和 Logo 远离边缘，因为某些应用会裁剪掉边缘的几个像素。
The meta tags you actually need
你真正需要的元标签
Put these in the <head> of every page you want to share:
将以下代码放入你想要分享的每个页面的 <head> 中：
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A one-line summary." />
<meta property="og:image" content="https://yoursite.com/og/your-page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og/your-page.png" />Setting og:image:width and og:image:height is the detail most people skip. It lets the platform reserve the right space and render the large card immediately instead of guessing.
设置 og:image:width 和 og:image:height 是大多数人容易忽略的细节。它能让平台预留正确的空间并立即渲染大卡片，而无需进行猜测。
How to generate OG images from a URL
如何通过 URL 生成 OG 图片
Designing a unique image for every page by hand does not scale. The pattern that does: build one small HTML template that renders the title and your branding, then capture that page as an image at 1200 by 630. A screenshot API turns that into a single request. 为每个页面手动设计独特的图片是无法扩展的。可行的模式是：构建一个小型 HTML 模板来渲染标题和品牌信息，然后将该页面截取为 1200 x 630 的图片。截图 API 可以将其转化为一个简单的请求。
Point it at your template URL with a fixed viewport: 将其指向你的模板 URL 并设置固定视口：
curl https://api.grabbit.live/v1/grabs \
-H "Authorization: Bearer sk_live_..." \
-H "Content-Type: application/json" \
-d '{ "url": "https://yoursite.com/og/my-post", "width": 1200, "height": 630 }'The response gives you a hosted image_url you can drop straight into your og:image tag. Because the source is a real web page, you can style it with the same CSS as the rest of your site, pull in dynamic titles, and never open a design tool. This is exactly what Grabbit’s screenshot API is built for, and you can wire it up with a free test key first.
响应会返回一个托管的 image_url，你可以直接将其放入 og:image 标签中。由于源文件是一个真实的网页，你可以使用与网站其他部分相同的 CSS 进行样式设计，引入动态标题，而无需打开任何设计工具。这正是 Grabbit 截图 API 的用途，你可以先使用免费测试密钥进行配置。
Common mistakes
常见错误
- Using a logo as the OG image: Logos are square and get cropped or shrunk. Use a 1200 by 630 card with the title.
- 将 Logo 直接用作 OG 图片： Logo 通常是方形的，容易被裁剪或缩小。请使用带有标题的 1200 x 630 卡片。
- Forgetting
summary_large_imagefor X: Without it, X shows the small card no matter how big your image is. - 忘记为 X 设置
summary_large_image： 如果不设置，无论你的图片多大，X 都只会显示小卡片。 - A relative image URL:
og:imagemust be an absolute URL, includinghttps://. Crawlers do not resolve relative paths. - 使用相对路径的图片 URL：
og:image必须是绝对路径，包含https://。爬虫无法解析相对路径。 - Not testing: Always preview the card before you publish.
- 不进行测试： 发布前务必预览卡片效果。
Wrapping up
总结
One size, 1200 by 630, covers every major platform. Set the width and height tags, use an absolute URL, add summary_large_image for X, and generate the image from an HTML template so it scales across your whole site.
1200 x 630 这一种尺寸即可覆盖所有主流平台。设置好宽高标签，使用绝对 URL，为 X 添加 summary_large_image，并从 HTML 模板生成图片，这样你的整个网站都能实现自动化扩展。
Originally published on the Grabbit blog. 原文发布于 Grabbit 博客。