Softonic

Open Graph 标签生成器

步 1 / 2
下一步

填写标题、描述、规范（canonical）URL、预览图片和 og:type，该生成器会写出对应的 Open Graph <meta> 标签，可直接粘贴到页面的 <head> 中。留空的字段会被直接省略，文本中的引号和 & 符号会被转义，以保证标签有效。生成器只写出五个核心 og: 属性，不写 Twitter Card 或文章标签。

如何生成你的 OG 标签

  1. 1

    选择 og:type

    首页用 website，文章用 article，商店页用 product，嵌入内容用 video.other。该字段为自由文本，任何有效的 og:type 值都可用。

  2. 2

    填写核心字段

    标题、描述、规范 URL 和绝对路径的图片 URL。任何留空的字段都会从输出中省略。

  3. 3

    生成标签

    引号和 & 符号会自动为你转义，你填写的每个字段会生成一行 meta。

  4. 4

    把代码块复制到 head 中

    粘贴到页面模板的 `<head>` 内，放在你已有的社交标签之上。

该生成器产生的标签

<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A one-line description.">
<meta property="og:url" content="https://example.com/post/123">
<meta property="og:image" content="https://example.com/og-image.jpg">

这就是全部输出。og:type 总是会写出，而 og:title、og:description、og:url 和 og:image 只有在你填写时才会添加。这五个属性是 Facebook、LinkedIn、Slack、Discord、WhatsApp 和 X 最先读取的，所以覆盖了常见情形。

该生成器不会写出 twitter: 卡片标签、og:image:width / og:image:height、og:site_name、og:locale 或 article: 标签。如果你需要它们，请在生成的代码块旁手动添加。

重要的 og:type 值

类型 使用时机
website 首页、着陆页、静态内容
article 博客文章、新闻、编辑页面
product 电商产品详情页
video.other 视频内容和嵌入
profile 作者或用户资料页
music.song 单曲页面

值得手动添加的标签

标签 作用 示例值
og:site_name 整个网站的名称 Example
og:locale 页面的语言和地区 en_US
og:image:width 帮助抓取工具更快地排布卡片 1200
og:image:height 帮助抓取工具更快地排布卡片 630
twitter:card X 上的卡片布局 summary_large_image

当没有 twitter: 标签时，X 会回退到 og: 标签，因此仅带这五个生成属性的页面在那里也能正确预览。只有当你想在 X 上使用不同的标题、描述或图片时，才添加 twitter: 标签。

该生成器帮助你避免的常见错误

  • 用 name 而非 property。 Open Graph 属性应放在 property="og:..." 中。生成器总是写出正确的属性。
  • 未转义的引号和 & 符号。 标题中原始的 " 或 & 会破坏标签。生成器会替你转义。
  • 相对路径的图片 URL。 社交抓取工具只接受绝对 URL。请粘贴图片完整的 https:// 地址，因为生成器不会为你加上域名。
  • 错误的图片尺寸。 1200 × 630 像素是通用的安全尺寸。小于 200 × 200 像素时，图片通常会被拒绝。

常见问题

放在 HTML 的 <head> 内、靠上的位置，最好靠近 <title>。抓取工具会读取 head 并常常提前停止，所以把 OG 标签放在靠上位置可以避免在非常大的页面上被遗漏。

不会。它只写五个核心 og: 属性。当缺少 twitter: 标签时，X 会回退到 Open Graph，所以你的预览仍然有效。只有当你想在 X 上使用不同的标题、描述或图片时，才手动添加 twitter: 标签。

1200 × 630 像素的 JPG 或 PNG 是通用的安全尺寸。它在 Facebook、LinkedIn、X 大卡片、Slack、Discord 和 iMessage 上都能正常显示。小于 200 × 200 像素则有被完全拒绝的风险。

让每个语言版本都有自己的页面和自己的 og: 标签，并手动添加 og:locale（例如 en_US）以及用于其他版本的 og:locale:alternate。该生成器不会替你写出 locale 标签。

相关工具

坏链检查器

粘贴页面 URL，检查其出站链接中的 404 和其他 HTTP 错误，并显示每个链接的状态码。

HTTP安全头检查器

粘贴 HTTP 响应标头，在浏览器本地检查 HSTS、CSP、点击劫持、MIME、referrer 和跨源策略。

XML 站点地图检查器

在浏览器中检查站点地图 XML，发现解析错误、缺少地址、重复 URL 以及常用站点地图字段值问题。

元描述长度检查器

测量元描述的字符数和估算像素宽度，对照编辑参考，并查看桌面端与移动端版式示意。

规范URL验证器

粘贴页面的 HTML 并检查其 rel=canonical 标签：是否存在、是否为有效的绝对 URL、是否与页面 URL 一致。

外部链接提取器

粘贴原始HTML，可选设置基础URL，即可获得代码中所有外部 http/https 链接的干净、去重列表，用于链接审计和SEO审查。

此工具还提供其他语言版本