我打造了一个免费 OG Image 生成器——使用方法与原因

Source: Dev.to

问题

你在社交媒体上分享的每个链接都会使用 Open Graph 元标签来生成预览卡片。如果没有 og:image，你的链接看起来就像是垃圾信息，和其他人精美的卡片形成鲜明对比。

大多数开发者要么：

• 完全跳过（不好）
• 为每张图片在 Figma 上花 30 分钟（浪费）
• 为 Cloudinary/imgix 转换付费（对博客文章来说大材小用）

解决方案：免费工具

我构建了一个免费 OG 图片生成器，它可以让你：

• 从 6 种模板中选择（渐变、分割、极简、粗体、暗色、图案）
• 自定义标题、副标题、作者、表情符号、颜色、字体大小
• 下载 PNG（1200 × 630 — 标准 OG 尺寸）

将 HTML 元标签复制粘贴到你的 “ 中。

它完全在客户端运行。无需注册、无水印、无附加条件。

工作原理

生成器使用原生 JavaScript 和 HTML Canvas API 构建。核心思路如下：

const canvas = document.createElement("canvas");
canvas.width = 1200;
canvas.height = 630;
const ctx = canvas.getContext("2d");

const gradient = ctx.createLinearGradient(0, 0, 1200, 630);
gradient.addColorStop(0, primaryColor);
gradient.addColorStop(1, secondaryColor);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 1200, 630);

ctx.fillStyle = "#ffffff";
ctx.font = "bold 56px Inter, sans-serif";
wrapText(ctx, title, 80, 280, 1040, 68);

const dataUrl = canvas.toDataURL("image/png");

关键决策

• 1200 × 630 是通用的 OG 图片尺寸（在 Twitter、Facebook、LinkedIn、Discord 上均可使用）。
• 仅客户端 意味着零服务器成本，生成即时完成。
• 无依赖 — 只使用 Canvas API。

为什么免费提供？

因为我正在构建 Rendly，一个截图和图片生成 API。免费工具帮助个人用户；API 则帮助需要以编程方式生成数百甚至数千张 OG 图片的团队。

只有一篇博客文章？使用免费工具。一个拥有 500 篇文章且需要动态 OG 图片的 CMS？这时就需要 API：

const response = await fetch("https://rendly.dev/api/v1/screenshots", {
  method: "POST",
  headers: { "Authorization": "Bearer YOUR_API_KEY" },
  body: JSON.stringify({
    html: ogImageTemplate(post.title, post.author),
    width: 1200,
    height: 630,
    format: "png"
  })
});

还有：检查你现有的标签

在此过程中，我还构建了一个元标签检查工具。输入任意 URL，它会显示：

• 你的所有 OG 和 Twitter Card 标签
• 每个平台上链接的视觉预览
• 完整度评分
• 缺失的内容

生成 OG 图片只是战斗的一半——你还需要验证标签是否真正起作用。

试一试

🎨 免费 OG 图片生成器
🔍 元标签检查工具

无需注册。告诉我你希望添加哪些模板。