OG Image 生成器/ 社交预览图
纯前端 Canvas 渲染，多模板可选。一键生成 1200x630 社交媒体分享预览图，自定义标题、配色、布局。图片不上传服务器。
模板风格
主题色
字号
HTML Meta 标签
将下载的图片上传到你的服务器，然后把 URL 填入以下标签
<!-- Open Graph --> <meta property="og:image" content="https://yoursite.com/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.com/og.png" />
预览 · 1200 x 630
这个工具有帮到你吗？
代码示例
HTML
<!-- Open Graph meta tags --> <meta property="og:title" content="Your Title" /> <meta property="og:description" content="Description" /> <meta property="og:image" content="https://example.com/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:type" content="article" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://example.com/og.png" />
Next.js (App Router)
// app/page.tsx
export const metadata: Metadata = {
openGraph: {
title: "My Page Title",
description: "Page description",
images: [
{
url: "https://example.com/og.png",
width: 1200,
height: 630,
alt: "Preview image",
},
],
},
twitter: {
card: "summary_large_image",
},
};React (Helmet)
import { Helmet } from "react-helmet-async";
function SEOHead({ title, image }) {
return (
<Helmet>
<meta property="og:title" content={title} />
<meta property="og:image" content={image} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
name="twitter:card"
content="summary_large_image"
/>
</Helmet>
);
}WordPress (functions.php)
// Add OG Image to WordPress
function add_og_image() {
if (is_singular()) {
$image = get_the_post_thumbnail_url(
get_the_ID(), 'full'
);
if ($image) {
echo '<meta property="og:image"
content="' . esc_url($image) . '" />';
echo '<meta property="og:image:width"
content="1200" />';
echo '<meta property="og:image:height"
content="630" />';
}
}
}
add_action('wp_head', 'add_og_image');常见问题
什么是 OG Image？为什么需要它？
OG Image（Open Graph Image）是网页在社交媒体上被分享时显示的预览图。当你把链接发到微信、Twitter、Facebook、LinkedIn 时，平台会自动抓取 og:image 标签中的图片作为分享卡片。一张精心设计的 OG 图能显著提升链接的点击率，是 SEO 和社交传播的关键要素。
OG Image 的标准尺寸是多少？
推荐尺寸为 1200x630 像素（宽高比 1.91:1），这是 Facebook 和大多数社交平台的最佳显示尺寸。Twitter 的 summary_large_image 卡片也使用此尺寸。LinkedIn 推荐 1200x627，差异极小可以通用。本工具默认生成 1200x630，兼容所有主流平台。
生成的图片会上传到服务器吗？
不会。图片完全在你的浏览器中通过 Canvas API 渲染生成，不涉及任何服务器端处理。点击下载后图片直接保存到你的本地设备。你的标题、描述等内容不会被传输或存储。
如何在网页中使用生成的 OG Image？
将下载的图片上传到你的网站服务器或 CDN，然后在 HTML 的 <head> 中添加 meta 标签：<meta property="og:image" content="图片URL" />。同时建议添加 og:image:width 和 og:image:height 标签加速平台解析。如果用 Next.js，可在 generateMetadata 中设置 openGraph.images。
为什么分享到社交媒体后图片没有更新？
社交平台会缓存 OG Image。Facebook 可以用 Sharing Debugger 工具清除缓存（输入 URL 后点 Scrape Again）；Twitter 使用 Card Validator；LinkedIn 用 Post Inspector。更新 og:image URL 时加个版本参数（如 ?v=2）也能强制刷新缓存。
支持哪些模板风格？
目前提供 4 种模板：渐变（适合技术博客）、深色（适合开发者内容）、简约（适合商务文档）、分栏（适合产品展示）。每种模板都支持自定义主题色（10 个预设色 + 任意取色）和 3 档字号调节，组合出数百种视觉效果。