OG 图生成器
为博客、落地页与产品发布创建 1200×630 的 Open Graph 链接预览图。
推荐导出尺寸
1200×630 px
推荐模板
每个模板都会在编辑器中应用此格式预设打开。 浏览全部模板
Hero Split
Creator covers, launches, personal branding
Full Image Split
Visual-first covers with a full-bleed image split
Split CTA
Launch posts with a headline and clear call to action
Video Split
Keynote and talk covers with a wide side media panel
Stagger Split
Product stories with a staggered four-card media stack
Communication Pad
Brand-led stories with a hero image and supporting copy
Left Image
Visual-led covers with copy and a clear CTA on the right
Tilted Image
Playful launches with a tilted product visual
Card Split
Offer and launch cards with a bordered white panel and shadow
Diagonal Split
Bold launches with a diagonal text-and-image cut
Clean Editorial
Essays, newsletters, thought leadership
Tutorial Card
Tutorials, guides, how-to content
Data Report
Reports, trends, analysis
Product Update
Product launches, updates, release notes
Creator Bold
Social posts, creator content
使用方法
- 打开 OG 图片生成器,Open Graph 格式已锁定为 1200×630。
- 选择适合你要分享页面的模板(以文字为主或分栏布局)。
- 编辑标题与副标题,再调整背景、对比度以及可选配图。
- 导出 PNG、JPEG 或 WebP,上传到你的网站,并将 og:image 设为该 URL。
最佳实践
- 目标尺寸约 1200×630 px,这是富链接预览的常见默认值。
- 标题尽量简短,确保在信息流与聊天缩略图尺寸下仍可读。
- 使用强对比;平台往往会大幅重新压缩图片。
- 把关键词放在标题前半段,以防边缘被裁切。
- 在不同帖子间复用同一套布局家族,让分享看起来统一、有品牌感。
- 上传后,将 og:image(以及 twitter:image)设为最终公开文件 URL,而不是本地路径。
- 更换图片后,在 Slack 或 LinkedIn 中重新检查预览;部分缓存会保留旧卡片直到刷新。
Implement Open Graph images in your website
After you generate an OG image, upload the file to a public path on your site and set og:image (and usually twitter:image) to that URL. Link previews then show your title, description, and graphic across social platforms and messengers.
<!-- Basic Open Graph tags -->
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://yourdomain.com/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og-image.png" />常见问题
相关指南
了解此格式的尺寸、最佳实践,以及如何做出更好的图片。
- How-to guides
How to Create an Open Graph Image
Learn how to create an Open Graph image for blog posts, landing pages, product launches, and social shares. Use templates to design a clean link preview image online.
- Design ideas
Open Graph Image Examples
Explore Open Graph image examples for blog posts, landing pages, product launches, and social shares. Learn what makes a better link preview image.
- Size guides
Open Graph Image Size: 1200×630 for Link Previews
OG image size cheat sheet: 1200×630 px (~1.91:1). Cropping tips for Slack, LinkedIn & Meta—plus a free OG generator preset that exports the right canvas.
