OG图片的理想尺寸是什么？

推荐尺寸是1200x630像素，宽高比为1.91:1。这在Facebook、Twitter、LinkedIn和大多数消息平台上都能很好地显示。

如何测试我的OG图片？

使用Facebook的分享调试工具（developers.facebook.com/tools/debug）或Twitter的Card验证器。您也可以使用可预览Open Graph标签的浏览器扩展程序。

OG图片会影响SEO吗？

OG图片不会直接影响搜索排名，但它们能显著提高来自社交媒体的点击率，增加参与度，并为您的网站带来更多流量。

OG图片：为什么你的链接在社交媒体上看起来很难看（以及如何修复）

什么是Open Graph以及为什么它重要

Open Graph（OG）是Facebook在2010年创建的一种协议，允许网页控制其内容在社交媒体平台上分享时的显示方式。当有人在Facebook、Twitter、LinkedIn、Slack或消息应用上分享URL时，平台会读取页面HTML中嵌入的Open Graph元标签，生成带有标题、描述和图片的丰富预览卡片。

没有Open Graph标签，平台会尝试抓取您的页面并猜测显示什么内容。结果往往是损坏的预览，包括缺失的图片、截断的标题或不相关的描述。由于用户不太可能点击看起来不完整或不可信的链接，这会导致更低的参与度。

精心制作的OG图片可以显著提高点击率。研究表明，有适当预览图片的社交媒体帖子比没有的获得更高的参与度。对于依赖社交流量的任何网站来说，正确设置Open Graph不是可选项，而是必须的。

OG图片规格

格式和文件大小

支持的格式：JPEG、PNG、GIF（仅第一帧）和WebP（有限支持）
推荐格式：照片使用JPEG，带有文字或透明度的图形使用PNG
最大文件大小：Facebook保持在5MB以下，Twitter也在5MB以下。实际上，为了快速加载，目标是低于1MB
最小尺寸：Facebook要求至少200x200像素，但小于600x315的图片将显示为小缩略图而非大预览卡片

宽高比详情

宽高比	尺寸	最适合
1.91:1	1200 x 630	Facebook、LinkedIn、一般分享
2:1	1200 x 600	Twitter summary_large_image
1:1	1200 x 1200	Twitter摘要卡、部分应用

各平台特定要求

Facebook

Facebook使用标准Open Graph协议，是最宽容的平台。图片必须至少200x200像素，但低于600x315的图片会以小缩略图呈现。要获得大预览卡片格式，请使用1200x630像素。Facebook会主动缓存OG图片，因此更新图片后需要使用分享调试工具清除缓存。

Twitter（X）

Twitter除Open Graph标签外还使用自己的Card系统。除了标准OG标签，还需要包含twitter:card元标签。Twitter支持两种与图片相关的卡片类型：

summary：显示小正方形缩略图（最小144x144，1:1比例）
summary_large_image：显示大矩形图片（最小300x157，推荐2:1比例）

如果没有Twitter特定标签，Twitter会回退到读取标准OG标签。

LinkedIn严格遵循Open Graph标准。推荐图片尺寸为1200x627像素。LinkedIn对图片尺寸很严格——太小的图片根本不会显示。LinkedIn也会缓存共享URL，您可以使用他们的Post Inspector工具刷新缓存的预览。

Slack和消息应用

Slack、Discord、Telegram、WhatsApp和iMessage都读取Open Graph标签来生成链接预览。这些平台通常能很好地处理1200x630的图片。Slack特别受益于og:image:width和og:image:height标签，因为它在图片完全加载之前使用这些标签来渲染预览。

OG图片的HTML元标签

以下是您应该在HTML的<head>部分包含的完整元标签集：

<!-- 基本Open Graph标签 -->
<meta property="og:title" content="您的页面标题" />
<meta property="og:description" content="页面内容的简短描述。" />
<meta property="og:image" content="https://example.com/images/og-preview.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

<!-- 推荐图片标签 -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="无障碍访问的图片描述" />

<!-- Twitter Card标签 -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="您的页面标题" />
<meta name="twitter:description" content="页面内容的简短描述。" />
<meta name="twitter:image" content="https://example.com/images/og-preview.jpg" />
<meta name="twitter:image:alt" content="无障碍访问的图片描述" />

关于标签的要点

og:image必须使用绝对URL。/images/og.jpg这样的相对路径不起作用。始终包含带协议（https://）的完整URL。
og:image:width和og:image:height技术上是可选的，但强烈推荐。它们允许平台在图片加载之前分配正确的空间，防止布局偏移。
twitter:card决定Twitter使用的布局。设置为summary_large_image以获得大预览格式。
og:image:alt为屏幕阅读器提供无障碍访问，被认为是最佳实践。

多个图片

您可以通过重复og:image标签来指定多个OG图片。平台通常使用第一个，但有些可能允许用户选择：

<meta property="og:image" content="https://example.com/images/primary.jpg" />
<meta property="og:image" content="https://example.com/images/secondary.jpg" />

有效OG图片的设计最佳实践

保持文字精简且足够大

社交媒体预览卡片根据平台、设备和上下文以不同尺寸显示。OG图片上的文字应该大到即使图片以400像素宽渲染也能阅读。限制自己只写一个标题和可选的简短副标题。避免段落或小字。

使用安全区

平台可能会在不同设备上略微裁剪您的图片。将所有关键内容——文字、徽标、关键视觉元素——保持在图片中央80%范围内。在每侧留出至少60像素的边距。

保持品牌一致性

在每个OG图片上包含您的徽标或品牌标识，使共享链接立即可辨认。在所有页面上使用一致的品牌颜色、字体和布局模板。这在社交信息流中建立视觉认知度。

选择高对比度颜色

OG图片出现在充满照片、广告和其他内容的繁忙社交媒体信息流中。文字和背景之间的高对比度确保可读性。深色背景上的浅色文字或浅色背景上的深色文字都效果很好。避免在没有颜色叠加的情况下将文字放在复杂的照片背景上。

避免文字过多的图片

Facebook历史上对文字过多的广告（20%规则）进行了处罚，尽管这现在没有严格执行，但原则仍然适用。主要是文字的图片看起来像广告，获得的参与度较少。使用图片来补充您的标题，而不是重复它。

针对深色模式进行设计

许多用户在深色模式下浏览社交媒体。测试您的OG图片在浅色和深色背景下的外观。避免在深色模式下会消失的透明背景或白色边框图片。

如何创建OG图片

创建OG图片有几种方法，从手动设计到完全自动化生成不等。

手动设计工具

Figma、Canva和Adobe Express等设计工具提供1200x630像素大小的模板。这种方法给您完全的创意控制，但如果您有数百或数千个页面则不具备可扩展性。

自动化生成

对于博客和动态内容，以编程方式生成OG图片是最有效的方法。许多框架提供内置或社区解决方案：

Next.js：@vercel/og包使用类JSX语法在边缘生成图片
静态站点：构建脚本可以使用sharp或canvas等库在构建过程中生成图片
API服务：专用OG图片API接受参数并按需返回渲染的图片

使用在线生成器

如果您需要快速创建OG图片而不设置任何基础设施，在线生成器是最快的途径。试用我们的免费OG图片生成器，使用自定义文字、颜色和品牌创建正确尺寸的Open Graph图片。只需输入您的标题，调整样式，下载准备好使用的图片。

测试和调试OG图片

在向页面添加Open Graph标签后，在分享之前务必进行测试。以下是必要的调试工具：

Facebook分享调试工具

访问Facebook分享调试工具，输入您的URL，然后点击"调试"。该工具准确显示Facebook检测到的OG标签，显示预览图片，并报告任何警告或错误。进行更改后使用"重新抓取"按钮清除Facebook的缓存。

Twitter Card验证器

Twitter Card验证器预览您的链接在推文中的显示方式。输入您的URL并验证正确的卡片类型、图片、标题和描述都能正确显示。

LinkedIn Post Inspector

LinkedIn的Post Inspector工作方式类似。输入您想要检查的页面URL，它会显示LinkedIn将生成的预览卡片。在更新标签后使用它来刷新LinkedIn的缓存。

浏览器扩展程序

多个浏览器扩展程序让您可以在任何页面上检查Open Graph标签而无需离开浏览器。这些工具显示所有元标签，展示预览图片，并标记常见问题。它们对于快速检查竞争对手页面或审计您自己的网站很有用。

手动检查

您可以通过检查页面的HTML源代码来查看原始元标签。在Chrome中，右键单击页面，选择"查看页面源代码"，然后搜索og:以找到所有Open Graph标签。验证og:imageURL是绝对的且可访问的。

要避免的常见错误

使用相对图片URL

最常见的OG图片错误是使用相对路径如/images/og.jpg而不是绝对URL如https://example.com/images/og.jpg。社交媒体爬虫从单独的服务器获取图片，无法解析相对路径。

忘记更新缓存图片

所有主要平台在第一次抓取后都会缓存OG图片。如果您更新了图片但没有清除平台的缓存，旧图片会继续出现在预览中。更改后务必使用平台的调试工具强制重新抓取。

使用太小的图片

低于最小尺寸（Facebook为200x200，Twitter为300x157）的图片要么根本不显示，要么以微小缩略图而非大预览卡片呈现。始终使用1200x630确保大卡片格式。

缺少twitter:card标签

没有twitter:card元标签，Twitter默认显示带有小正方形图片的基本"summary"卡片。如果您想在Twitter上显示大图片预览，必须明确包含<meta name="twitter:card" content="summary_large_image" />。

通过HTTP提供图片

如果您的网站使用HTTPS但og:imageURL指向HTTP资源，由于混合内容限制，一些平台会阻止或忽略图片。始终通过HTTPS提供OG图片。

忽视图片文件大小

8MB的OG图片可能技术上满足尺寸要求，但爬虫在下载时可能会超时。将JPEG图片压缩到80-85%质量或使用优化的PNG文件，将文件大小保持在1MB以下。

不包含alt文字

og:image:alt标签经常被忽视，但它有重要的无障碍目的。屏幕阅读器使用此文字向视障用户描述图片。只需几秒钟添加，就能为所有用户改善体验。

结论

Open Graph图片是您可以为社交媒体分享做的最简单、最有影响力的优化之一。通过使用正确的1200x630尺寸、包含适当的元标签并遵循设计最佳实践，您确保每个共享链接都以最佳方式呈现您的内容。

从使用上面提到的调试工具审计现有页面开始，修复任何问题，并为新内容建立一致的模板。如果您需要快速生成OG图片，试用我们的免费OG图片生成器，在几秒钟内创建专业预览卡片。