Open Graph 生成器

Open Graph 生成器，构建 OG 和 Twitter Card meta 标签，并提供实时社交卡片预览。

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

由 Udit Agarwal 开发和维护

需要查看链接的各部分？试试 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 标签（og:title、og:description、og:type、og:url、og:image、og:site_name）
• 添加匹配的 Twitter Card 标签（twitter:card、title、description、image）
• 实时社交卡片预览，随输入即时更新
• 输出整洁、可直接复制的 HTML meta 代码块
• 正确转义标题、描述和 URL 中的特殊字符
• 可选择 og:type 和 twitter:card 样式（如 summary_large_image）
• 复制到剪贴板，或将标签下载为 meta-tags.html
• 跳过空字段，使生成的标记保持整洁

如何使用 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。

常见错误与故障排除

• og:image 未在 Facebook 或 LinkedIn 的预览中显示。 — 为图片使用完整的绝对 URL（https://...），而非相对路径，并确保图片可公开访问。
• Twitter 显示小图而非大卡片。 — 将 twitter:card 值设为 summary_large_image，平台便会渲染全宽图片布局。
• 标题或描述在预览中看起来被截断。 — 标题保持在 60 字符左右，描述保持在 110-160 字符左右，平台才不会截断它们。
• & 或 < 等特殊字符破坏了标记。 — 直接输入原始字符；生成器会在输出中自动将它们转义为有效的 HTML 实体。
• 更新标签后平台仍显示旧的预览数据。 — 用平台的调试工具（如 Facebook Sharing Debugger）重新抓取 URL，以清除缓存的预览。

常见问题

什么是 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 生成器中输入的内容是否保密？

是的。标签在你的浏览器本地构建，你的数据绝不会离开你的设备，你输入的任何内容都不会上传到任何服务器。

相关工具

• HTML 格式化工具 — 美化或压缩 HTML，格式化内联 CSS/JS 并预览结果。
• URL 解析器 — 将 URL 拆解为各个部分并列出查询参数。
• URL 编码 / 解码 — 编码和解码 URL 组件。
• HTML 转义 / 反转义 — 转义和反转义 HTML 特殊字符与实体。
• 二维码生成器 — 从文本或 URL 生成二维码；可下载为 PNG 或 SVG。
• Markdown 预览 — 将 Markdown 渲染为 HTML 并实时预览。
• 图片格式转换工具 — 在浏览器中完整地在 PNG、JPEG 和 WebP 之间转换图片。

更多Web 与 DevOps工具

• robots.txt 生成器 — 可视化构建带 User-agent 规则与 sitemap 的 robots.txt。
• XML Sitemap 生成器 — 将一组 URL 转换为符合标准的 sitemap.xml。
• .htaccess 生成器 — 通过开关构建 Apache 重写、重定向与安全响应头。
• Nginx 配置生成器 — 通过简单开关构建完整的 nginx server 块。
• Semver 计算器 — 解析、比较、范围检查、递增并强制转换语义化版本。
• Cache-Control 头生成器 — 用简单开关构建正确的 HTTP Cache-Control 头。
• Meta 标签生成器 — 在浏览器中通过表单生成 SEO、Open Graph 和 Twitter Card meta 标签。
• CSP 生成器 — 在浏览器中逐条指令地构建 Content-Security-Policy 请求头，并生成 meta、nginx 和 Apache 片段。
• htpasswd 生成器 — 在浏览器中用用户名和密码以 bcrypt 或 SHA-1 生成一行 .htpasswd 记录。
• Tailwind 配色生成器 — 把一个品牌色转换为完整的 OKLCH 50-950 色阶
• CSS Grid 生成器 — 可视化设计网格并复制 grid-template CSS
• CSS clamp() 计算器 — 把尺寸和视口宽度转换为流式 clamp() 值

查看全部Web 与 DevOps工具 (27) · 全部工具