Open Graph Generator

OG（Open Graph）图片生成器可创建用于社交媒体分享预览的自定义图片。工具基于 Canvas/HTML2Canvas 技术，提供预设模板——你可以添加标题文字、副标题、作者信息、LOGO、背景色或渐变、图案装饰等元素。生成的图片严格遵循 Open Graph 推荐的 1200×630 像素尺寸（1.91:1 比例），确保在 Facebook、Twitter/X、LinkedIn、Discord 等平台上显示完美。支持导出 PNG 或 JPEG 格式。

OG 图片在 SEO 和内容营销中至关重要。博客文章在社交媒体分享时，有精心设计的 OG 图片的链接点击率（CTR）远高于没有图片的链接。技术文档网站的每个页面都需要配不同标题的 OG 图片。产品发布页面（Product Hunt）上的封面图直接决定第一印象。个人作品集或简历网站的分享预览是展示个人品牌的机会。开源项目的 GitHub README 在社交媒体分享时的预览图也需要定制。

配合 Meta Tags 生成器 同时配置所有 SEO 标签，或使用 图片缩放器 调整已有图片到 1200×630 尺寸。

社交媒体平台对 OG 图片的严格要求：

• 尺寸：1200×630 px（最小 600×315，但推荐更大以保证清晰度）。比例偏离 1.91:1 过多会被裁剪。
• 格式：JPEG 或 PNG（推荐 JPEG 以获得更小的文件大小）。WebP 支持不广泛，不建议使用。
• 文件大小：Facebook 限制 8MB，Twitter 限制 5MB。建议控制在 300KB 以内以保证加载速度。
• 缓存行为：社交平台会缓存 OG 图片和标签。修改后需要用 Facebook Sharing Debugger 或 Twitter Card Validator 强制刷新缓存。

• 文字安全区：不要在图片边缘 60px 内放置重要文字——部分平台显示时会有轻微的裁剪或叠加元素遮挡。
• CDN 路径：og:image URL 必须是绝对路径（https://example.com/og-image.png），不能使用相对路径。
• 缓存陷阱：社交平台会无限期缓存 OG 数据。如果需要频繁更新，可以在 URL 后加版本参数（如 ?v=2）或使用不同的图片文件名。
• 动态生成 vs 静态图片：对于有成百上千页面的内容站，使用 vercel/og 或 @resvg/resvg-js 等服务端渲染方案按需生成比预生成所有图片更实际。

在为少量页面快速创建社交分享图、设计品牌模板、或 MDN 风格的文档封面时使用此工具。对于大量页面的自动生成需求，推荐使用 Vercel OG Image（Satori）、Cloudinary Transformations 或 Puppeteer 截图方案服务端动态渲染 OG 图片。