OG Image Generator - 一键轻松生成专业美观的OG图片

为什么选择 MyOGImage.com？

专业的 Open Graph 图片，提升你的社交媒体影响力

完全免费的 OG 图片生成器

无需注册、订阅或水印，创建专业的 Open Graph 图片，是付费社交媒体设计工具的最佳免费替代品。

完美的社交媒体尺寸

为 Facebook、Twitter/X、LinkedIn 和 Discord 生成正确尺寸的图片。支持 1200x630 的 OG 图片、Twitter 头图和自定义尺寸。

开箱即用的 OG 模板

跳过设计工作，使用为博客、产品、公告和企业网站预构建的模板，经过优化的模板，确保你的网站获得高点击率。

高质量图片导出

下载为网络性能优化的 PNG、JPEG 或 WebP 文件，获得清晰、专业的图片，加载快速，在所有设备上都美观。

品牌一致的 Meta 图片

上传你的 logo，使用品牌颜色，在所有社交平台上保持视觉一致性，完美适合企业和内容创作者。

无需设计技能

使用我们直观的编辑器创建引人注目的社交媒体图形，无需 Photoshop 也能实现专业排版、渐变和效果。

移动端友好体验

我们的响应式设计确保你无论在桌面、平板还是智能手机上都能制作完美的社交预览。

即时社交媒体图片

在30秒内生成专业的 meta 图片，完美适合博主、营销人员和需要快速结果的开发者。

如何将 Open Graph 图片添加到你的网站

详细步骤指南，帮你实现社交媒体预览图功能。适用于任何网站：从静态 HTML 到现代框架如 Next.js、React 和 Vue。

1. 保存生成的图片

根据你的使用场景选择最佳的 OG 图片存放位置：

public/og.png - 用于静态图片（大多数情况下推荐）
app/og.png - 在app目录结构中用作资源文件

2. 在 layout.tsx 中配置 Metadata

// app/layout.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Your Site Name',
  description: 'Your site description',
  openGraph: {
    title: 'Your Site Name',
    description: 'Your site description',
    images: [{
      url: '/og.png',  // Next.js automatically prepends your domain
      width: 1200,
      height: 630,
      alt: 'Site preview'
    }],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Site Name',
    description: 'Your site description',
    images: ['/og.png'],
  },
}

Next.js 将自动处理图片托管和路径解析，框架优化了传输以实现更快的社交媒体爬取和更好的 SEO 性能。

为每个页面生成动态 OG 图片

为博客文章、产品页面或用户资料生成独特的社交预览图：

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const { slug } = await params // Next.js 15 or later
  // const slug = params.slug // Next.js 13 or 14

  return {
    openGraph: {
      images: [{
        url: `/blog/${params.slug}/og.png`,
        width: 1200,
        height: 630,
      }],
    },
    // ... other metadata
  }
}

用户评价

我们的用户对 MyOGImage.com 的评价

选择模板

为什么选择 MyOGImage.com？

如何将 Open Graph 图片添加到你的网站

1. 保存生成的图片

2. 在 layout.tsx 中配置 Metadata

为每个页面生成动态 OG 图片

更多技巧

高级技巧

学习资源

2025 年免费 Open Graph 图片生成器完整指南

25 个提升社交分享的 OG 图片最佳实践

OG 图片设计心理学：什么让用户点击

用户评价