如何为你的博客自动生成 Open Graph 图片（无需设计技能）

Source: Dev.to

为什么 Open Graph 图片很重要

你知道在 Twitter 或 LinkedIn 上分享链接时出现的预览卡片吗？那就是 Open Graph 图片，它们可以决定你的点击率是高是低。

• 没有 OG 图片 – 只有纯文本，没有预览，互动率低。
• 有好的 OG 图片 – 吸睛、专业，点击率更高。

使用 OG Image API

不必手动为每张图片设计，你可以通过一个简单的 API 请求即时生成它们。

curl -X POST https://ogimageapi.io/api/generate \
  -H "Content-Type: application/json" \
  -H "X-API-Key: your_key" \
  -d '{
    "title": "How to Build a SaaS in 2025",
    "subtitle": "A complete guide",
    "template": "blog",
    "theme": "dark"
  }' \
  --output og-image.png

就这么简单——一次请求，一张图片。

在 Next.js 博客中集成

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);

  const ogImageUrl = `https://ogimageapi.io/api/generate?title=${encodeURIComponent(post.title)}&template=blog&theme=dark`;

  return {
    props: { post, ogImageUrl }
  };
}

export default function BlogPost({ post, ogImageUrl }) {
  return (
    <>
      {/* ...post content... */}
    </>
  );
}

可用模板

• blog – 文章专用
• product – 电商产品
• profile – 作者页面
• stats – 指标/仪表盘
• event – 会议/聚会

价格

• 每月免费 25 张图片 – 足以满足大多数个人博客的需求。

试一试

访问 ogimageapi.io 了解更多。

你是怎么处理 OG 图片的？欢迎分享其他方案！