Open Graph 标签生成工具 — 免费在线

生成 Open Graph 元标签,用于在 Facebook、LinkedIn 等平台上展示丰富的社交媒体预览。

结果仅供参考,可能包含错误。请自行核实重要信息。使用本工具风险自负。

这个工具能做什么

Open Graph 标签生成工具编写 og: 元标签,用于控制链接在 Facebook、LinkedIn、WhatsApp、Slack、Discord、Telegram 等众多应用中分享时的显示效果。输入标题、描述、规范 URL 和图片 URL,选择类型(website、article、product 或 profile),然后把标签复制到页面的 <head> 中。

只会输出你填写了的字段,特殊字符会被转义。如果没有 Open Graph 标签,应用只能猜测标题,并从页面中随便挑一张图片,或者干脆不显示预览。最重要的标签是 og:image:一张清晰的 1200 × 630 像素图片能让分享出去的链接获得多得多的点击。

适用场景

  • 为博客文章、产品页面或落地页做好社交分享准备。
  • 修复显示错误图片或旧标题的链接预览。
  • 为用 JavaScript 渲染内容的单页应用添加分享预览。
  • 为在 Slack 或 Discord 中分享的文档网站设置链接卡片。

示例

输入

标题:Free JSON Formatter
描述:Format and validate JSON in your browser.
URL:https://4dev.net/json-formatter
图片 URL:https://4dev.net/og/json-formatter.png
类型:website

输出

<meta property="og:title" content="Free JSON Formatter"/>
<meta property="og:description" content="Format and validate JSON in your browser."/>
<meta property="og:url" content="https://4dev.net/json-formatter"/>
<meta property="og:image" content="https://4dev.net/og/json-formatter.png"/>
<meta property="og:type" content="website"/>

关于这个工具的问题

我已经更新了标签,为什么显示的还是旧预览?

各平台会缓存预览。用 Facebook Sharing Debugger 或 LinkedIn Post Inspector 重新抓取页面即可。Slack 和 WhatsApp 过一段时间会自行刷新。

还需要 Twitter Card 标签吗?

X(Twitter)会回退使用 Open Graph 标签,但要获得大图布局,需要添加 <meta name="twitter:card" content="summary_large_image"/>。

图片 URL 必须是绝对地址吗?

是的。请使用完整的 https:// 地址。大多数爬虫不会解析相对路径,而且图片必须无需登录即可公开访问。

Open Graph 标签对 SEO 有帮助吗?

没有直接帮助,搜索引擎依据标题、描述和内容进行排名。但它们能提高社交分享的点击率,从而带来访客。搜索相关的标签请用元标签生成工具设置。

这个工具免费吗?

是的,完全免费。无需注册或电子邮箱。结果直接显示在本页。

如何获取结果?

在此页面使用工具即可查看结果,无需通过电子邮件接收。