Open Graph 生成器

生成 Open Graph 和 Twitter 元标签，并预览社交卡片。

你的字段值在浏览器本地转换为 meta 标签，你输入的任何内容都不会上传到任何服务器。

需要查看链接的各部分？试试 URL 解析器。

关于 Open Graph 生成器

这款 open graph 生成器可构建页面所需的 Open Graph 和 Twitter Card meta 标签，让链接在社交平台上呈现丰富的预览效果。填写标题、描述、规范 URL、og:image、类型、站点名称和 Twitter 卡片样式，在复制最终 HTML 之前，可一边输入一边观看实时社交卡片预览的更新。它适合希望无需手写每个属性即可获得正确社交 meta 标签的开发者、营销人员和内容团队。作为 og meta 标签生成器和 twitter card 生成器，它涵盖常见的 og:image 标签和社交 meta 标签，让在 Facebook、LinkedIn、Slack 和 X 上分享的链接显得精美。一切都在你的浏览器本地运行，你的输入在设备上处理，不会上传到任何服务器。

功能特性

如何使用 Open Graph 生成器

  1. 在输入字段中填写页面标题、描述、URL 和图片 URL。
  2. 设置 og:type 和 Twitter 卡片样式，然后添加你的站点名称。
  3. 查看实时社交卡片预览，确认链接的呈现效果。
  4. 点击复制获取 HTML，或使用下载保存 meta-tags.html。
  5. 将生成的标签粘贴到页面的 <head> 区段中。

示例

输入

title: Launch Day
url: https://acme.dev/launch
image: https://acme.dev/og.png

输出

<title>Launch Day</title>
<!-- Open Graph -->
<meta property="og:title" content="Launch Day" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://acme.dev/launch" />
<meta property="og:image" content="https://acme.dev/og.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Launch Day" />
<meta name="twitter:image" content="https://acme.dev/og.png" />

空字段会被省略，og:type 默认为 website。

常见错误与故障排除

常见问题

什么是 Open Graph 生成器？
Open Graph 生成器是一款工具，可根据你的标题、描述、URL、图片、类型和站点名称，生成可直接粘贴的 Open Graph 和 Twitter Card meta 标签 HTML 代码块。
如何使用 Open Graph 生成器创建 meta 标签？
填写页面标题、描述、规范 URL、og:image、类型和站点名称，观看实时预览更新，然后点击复制或下载，并将标签粘贴到页面的 <head> 中。
Open Graph 和 Twitter Card 标签有什么区别？
Open Graph（og:）标签由 Facebook、LinkedIn、Slack 等许多平台读取，而 twitter: 标签专用于 X/Twitter。本工具同时输出两者，让预览在各处都能正常工作。
哪种 og:image 尺寸最合适？
对于 summary_large_image 卡片，使用 1200x630 像素、带绝对 URL 的图片是在多数平台上的稳妥选择。
为什么我分享链接时更改没有生效？
社交平台会缓存预览，请将你的 URL 粘贴到它们的分享调试工具中，以在更新 meta 标签后强制重新抓取。
我在 Open Graph 生成器中输入的内容是否保密？
是的。标签在你的浏览器本地构建，你的数据绝不会离开你的设备，你输入的任何内容都不会上传到任何服务器。

相关工具

全部 ArrayKit 工具