Open Graph Meta 标签生成器

为 Facebook、LinkedIn、WhatsApp、Slack 和 Discord 的链接预览创建 Open Graph meta 标签：标题、描述、图片及尺寸和 alt、类型、URL、语言区域。

og:title

og:type

og:url

og:site_name

og:image

绝对 URL；1200×630 像素适用于大多数平台。

og:image:alt

og:image:width

og:image:height

og:locale

en_US, vi_VN, fr_FR…

og:description

放入 <head> 的 HTML

<meta property="og:type" content="article">
<meta property="og:title" content="My Awesome Article">
<meta property="og:description" content="A short summary shown when the link is shared.">
<meta property="og:url" content="https://example.com/article">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:secure_url" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Article cover">

Facebook、LinkedIn、WhatsApp、Slack、Discord 等众多平台都会读取 Open Graph 标签。修改后，社交平台可能在重新抓取页面前继续显示缓存的预览。

什么是 Open Graph 生成器？

这个工具会生成 Open Graph 的 <meta property="og:…"> 标签，用来控制链接在 Facebook、LinkedIn、WhatsApp、Slack、Discord、Telegram 以及许多其他应用中分享时的显示效果。它涵盖 og:type、标题、描述、URL、站点名称、语言区域，以及带安全 URL、宽度、高度和 alt 文本的图片，并在缺少必需属性时给出警告。

如何使用 Open Graph 生成器

填写 og:title、og:type、og:url 和 og:image（四个必需属性）。
添加描述、站点名称、语言区域，以及图片尺寸和 alt 文本。
修复所有缺少属性的警告。
把标签复制到页面的 <head> 中。

何时使用 Open Graph 生成器

只要页面会被分享，并且你想自己控制预览效果而不是让各个应用去猜，就可以使用它。社交网络会缓存预览；修改标签后，请使用各平台的调试工具（如 Facebook 分享调试器）刷新。对于 X（Twitter），另请参阅 Twitter Card 生成器。

Open Graph 生成器的工作原理

每个非空字段都会生成一个 <meta property="og:…" content="…"> 标签，内容经过 HTML 转义，顺序遵循 Open Graph 协议的推荐。当图片 URL 使用 https 时，会添加一个同一 URL 的 og:image:secure_url 标签；只有设置了图片，才会写入图片的宽度、高度和 alt。