应用网站的Open Graph图片

更新于2026年10月30日

Open Graph图片，就是别人在X、LinkedIn、Facebook、Slack、iMessage和大多数其他应用里分享你网站链接时显示的那张图。把它做成1200 × 630像素（1.91:1），用og:image标签指定，再把twitter:card设为summary_large_image，让X显示大图；文字要远离边缘，分享链接前先测试一下。

什么是Open Graph图片

Open Graph是一组最早由Facebook推出的meta标签，告诉其他应用如何显示指向你页面的链接：标题、描述、URL和图片。你把链接粘贴到帖子或聊天里时，应用会抓取页面、读取这些标签，生成一张预览卡片。

如果没有图片标签，应用就只能猜。它可能选你的标志、页面上随便一张图，或者什么都不显示。对应用网站来说，这张卡片往往是别人第一次看到你的产品，所以值得自己掌控。

尺寸：1200 × 630

Open Graph协议本身并没有规定像素尺寸。实际上，1200 × 630、即1.91:1的比例，几乎在所有平台上都会显示为全宽卡片；LinkedIn推荐的1200 × 627也足够接近，同一张图在那里也能用。就用这个尺寸，导出为几MB以内的JPEG或PNG，这样应用抓取时能很快加载。

留出安全区

不同的应用对图片的修剪方式略有不同，有的还会把它缩小成缩略图显示。为了在任何地方都看得清：

文字和设备离每条边至少60到80像素。
重要内容放在中间三分之二的区域。
使用大字号：标题不超过五个词，字高至少60像素。
不要在图片里重复页面标题。卡片下方本来就会显示标题。

要添加的标签

把这些标签放进每个页面的<head>里。Open Graph协议把og:title、og:type、og:image和og:url列为必需，并要求在设置图片时一并提供og:image:alt。

标签	示例值
`og:title`	YourApp – 追踪你的习惯
`og:description`	用一句话说明应用的用途。
`og:type`	website
`og:url`	https://yourapp.com/
`og:image`	https://yourapp.com/og.jpg（完整URL，而不是相对路径）
`og:image:width` / `og:image:height`	1200 / 630
`og:image:alt`	iPhone上的应用主屏幕，蓝色背景。
`twitter:card`	summary_large_image

写成HTML是这样的：

<meta property="og:image" content="https://yourapp.com/og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The app's home screen on an iPhone">
<meta name="twitter:card" content="summary_large_image">

当X自己的twitter:标签缺失时，它会读取Open Graph标签里的标题、描述和图片，所以twitter:card通常是你唯一需要的X专用标签。没有它，X可能只显示小卡片，或者不显示卡片。

每个页面一张图

首页用主图。其他页面可以有自己的图：

功能页面：该功能的界面，加上外框。
博客文章和指南：品牌背景上的文章标题，或文章讨论的那张截图。
更新日志或版本说明：该版本的新界面。

专属于页面的图片，会让分享出去的链接看起来像是为这次对话量身定做的，点击量也比每个页面都用同一张标志卡片更高。

测试预览效果

应用会缓存预览，有时一缓存就是好几天，所以在大范围分享链接之前先测试。

在浏览器中打开图片URL。如果它不能公开访问，任何应用都显示不出来。
Facebook的分享调试器会显示Facebook从你的页面读取到的内容，它的“重新抓取”按钮可以刷新已缓存的预览。
LinkedIn的Post Inspector对LinkedIn做同样的事。
X：把链接粘贴到一条新帖子里，先别发送。编辑器会显示X将使用的卡片。
信息和Slack：把链接发给你自己。

如果一直显示旧图片，就修改图片的文件名（例如og-2.jpg）并更新标签。新的URL可以绕过大多数缓存。

常见错误

图片用了相对路径。/og.jpg在浏览器里能用，在预览卡片里却不行。请使用带https://的完整URL。
图片被禁止抓取。如果robots.txt或登录页面挡住了图片，应用就抓取不到。
文字太小。在聊天里，卡片可能只显示原尺寸的三分之一。原图中字高低于约40像素的文字就看不清了。
只放一张又高又窄的手机截图。裁成1.91:1后，手机截图只剩下一条状态栏，几乎什么都看不到。应该把它放在宽画布上。

用加了外框的设备来制作

对应用来说，最有力的Open Graph图片通常就是应用本身：你最好的界面放进设备外框，配上品牌色背景和一行简短标题。因为1.91:1很宽，中间只放一部手机会留下大片空白。可以在手机旁边放标题，或者横排展示两三个界面。

FeatureFrame有1.91:1的画布预设。在Mac上：

拖入你的截图。FeatureFrame会根据尺寸识别iPhone或iPad，把截图放进该设备的3D模型。
选择1.91:1画布，背景用纯色、渐变或你自己的图片。
把设备稍微倾斜一点，或者用“横排”布局加入最多三张截图。
以720p导出为JPEG。1.91:1的画布会导出为1376 × 720，和1200 × 630的比例相同，还更清晰一些。可以直接使用，也可以缩放到准确尺寸。

如果需要标题，交给设计工具或网站模板来加；加了外框的设备才是最难手工做的部分。

同一张图也可以用作发布帖的主图：参见发布配图清单。其他需要的尺寸请看分享应用截图的图片尺寸，单个设备外框请看设备外框库。