免费 Open Graph 与 Twitter Card 元标签生成器

填写页面标题、描述、URL 与分享图，即可生成可粘贴的 Open Graph 与 Twitter Card 标签。右侧提供简易卡片预览，全程在浏览器内完成。

og:url 与 og:image 请使用完整的 https 地址。大图卡片建议图片尺寸 1200×630。

标题描述页面 URL图片 URL

图片宽度图片高度

站点名称语言区域（可选）

Open Graph 类型

Twitter 卡片

My Site

My page title

A short summary for social previews and search snippets.

HTML 元标签

<meta property="og:title" content="My page title" />
<meta property="og:description" content="A short summary for social previews and search snippets." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="My Site" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My page title" />
<meta name="twitter:description" content="A short summary for social previews and search snippets." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

Loading…

如何使用

1
打开 OG 元标签生成器
为新页面准备社交分享标签。
2
填写页面与图片信息
输入标题、描述、规范 URL，尽量提供 1200×630 图片。
3
复制 HTML 到站点
将 meta 标签粘贴到 HTML 或模板的 head 区域。

要点

可离线？	是，仅在浏览器内拼装标签。
会上传吗？	不会，文案与链接留在本标签页。
Next.js metadata？	可复制 HTML 到 head，或在框架 metadata API 中填入对应字段。
图片预览？	若图片 URL 允许外链引用，右侧会显示粗略卡片预览。

典型用途

生成 Open Graph 与 Twitter Card 元标签，实时预览，复制 HTML，仅本地。
可离线？: 是，仅在浏览器内拼装标签。
会上传吗？: 不会，文案与链接留在本标签页。
Next.js metadata？: 可复制 HTML 到 head，或在框架 metadata API 中填入对应字段。
图片预览？: 若图片 URL 允许外链引用，右侧会显示粗略卡片预览。

常见问题

包含哪些标签？▾

常用 og:* 属性，以及 twitter:card、title、description、image（若填写）。

必须要图片吗？▾

分享链接建议提供图片；可接受纯文字预览时可留空。

locale 格式？▾

使用 Open Graph 区域代码，如 en_US、zh_CN。

预览与平台一致吗？▾

各平台会缓存和裁剪，请用官方调试工具实测。

标题含特殊字符？▾

引号与 & 等会在 content 属性中自动转义。

article 与 website？▾

文章页用 article，首页与落地页用 website。