生成 og:image HTML 和 Open Graph Meta 标签

生成 og:image HTML 和完整 Open Graph Meta 标签。可复制用于 Next.js、WordPress 和静态站点。

<meta property="og:title" content="社交分享的页面标题" />
<meta property="og:description" content="链接在社交网络上分享时显示的简短描述。" />
<meta property="og:image" content="https://ogimage.run/og.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="ogimage.run" />
<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="社交分享的页面标题" />
<meta name="twitter:description" content="链接在社交网络上分享时显示的简短描述。" />
<meta name="twitter:image" content="https://ogimage.run/og.png" />

什么是

og:image HTML 是一种 Meta 标签，告诉社交平台在页面被分享为链接预览时应显示哪张图片的 URL。它使用 meta 属性语法 <meta property="og:image" content="...">，应放在 HTML 文档的 <head> 区段内，与 og:title 和 og:description 等相关标签并列。这些 Open Graph 标签共同构成一个完整的代码块，社交爬虫会读取它们来构建你在 Facebook、LinkedIn、X 等平台上的预览卡片。如果没有正确的标记，平台无法可靠地判断哪张图片代表你的内容，往往导致链接被分享时出现缺失或错误的缩略图。

什么是 OG 图片？

了解 og image 是什么、链接预览为何需要它，以及如何创建。

如何使用 Open Graph

Open Graph 标签、工具与 1200×630 检查清单完整指南。

og:image HTML 代码示例

一个完整的 Open Graph meta 代码块通常包含 og:url、og:type、og:title、og:description、og:image、og:image:width、og:image:height、twitter:card 和 twitter:image 标签。每个标签都是 <head> 内的一个独立 <meta> 元素，它们共同为社交爬虫提供渲染预览所需的全部信息。在 Next.js 中，你可以通过 metadata 导出自动生成这些标签；WordPress 的 Yoast 和 Rank Math 等插件也提供专用字段来输出相同的标签。我们的生成器会生成一段可直接粘贴的代码片段，包含所有必需属性，你无需手动编写标记。

完整的 og:image HTML Meta 标签代码块

使用方法

  1. 在上方表单中填写页面标题、描述和图片 URL，生成 Meta 标签代码块。
  2. 复制生成器输出的完整 Meta 标签代码，包括所有 Open Graph 和 Twitter Card 标签。
  3. 将代码粘贴到网站的 <head> 区段，或粘贴到 CMS 的 SEO 设置面板中。
  4. 使用我们的验证工具预览线上 URL，确认社交爬虫能正确读取你的标签。

为什么选择

手动编写 Meta 标签容易出错——缺少引号、属性名写错、使用 HTTP URL 等都是常见问题，会导致链接预览失效。生成器能确保正确的引号转义、强制 HTTPS 和 Twitter 回退标签，使你的标记在每个平台上都能正常工作。使用生成器还会自动填入标准的 og:image:width 和 og:image:height 值，帮助爬虫更快、更可靠地渲染预览。

常见问题