OG 标签预览

生成并检查 Open Graph 标签：输出必需与推荐的 og:* 清单、缺失项、图片比例问题，并预览 Facebook 分享卡片效果。

浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。

Open Graph 标签

只生成标签与预览，不会访问任何 URL，也不会渲染粘贴进来的 HTML。

标题（og:title）类型（og:type）规范链接（og:url）分享图片（og:image）图片宽度（og:image:width）推荐 1200×630（约 1.91:1），最小 200×200图片高度（og:image:height）图片替代文本（og:image:alt）站点名（og:site_name）描述（og:description）语言地区（og:locale）

生成的标签

<meta property="og:title" content="UniKit 工具箱：全部在浏览器本地运行的开发者小工具" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://unikit.cc/" />
<meta property="og:image" content="https://unikit.cc/og-zh.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="UniKit 工具箱首页预览图" />
<meta property="og:description" content="JSON 格式化、URL 编解码、哈希计算、二维码生成……两百多个在线工具，输入不离开浏览器。" />
<meta property="og:site_name" content="UniKit" />
<meta property="og:locale" content="zh_CN" />

标签清单

必需

og:title已提供

og:type已提供

og:image已提供

og:url已提供

分享卡片预览

https://unikit.cc/og-zh.png · 1200×630

unikit.ccUniKit 工具箱：全部在浏览器本地运行的开发者小工具JSON 格式化、URL 编解码、哈希计算、二维码生成……两百多个在线工具，输入不离开浏览器。

检查结果

必需与推荐标签齐全，取值也没发现问题。

这个工具能做什么

给新页面上线前补 Open Graph 标签：填几个字段就得到一整块 og:* 代码，直接贴进 <head>。
排查分享卡片不显示图片的问题：检查 og:image 是不是绝对地址、宽高是否写成 1200×630，缺失的必需属性会逐条列出。
接手别人的项目时把现有 meta 标签整段粘进来，立刻看到哪些必需属性没写、哪些属性重复声明了。

示例

输入

og:title=UniKit 工具箱：全部在浏览器本地运行的开发者小工具、og:type=website、og:url=https://unikit.cc/、og:image=https://unikit.cc/og-zh.png、og:image:width=1200、og:image:height=630、og:image:alt=UniKit 工具箱首页预览图、og:description=JSON 格式化、URL 编解码……、og:site_name=UniKit、og:locale=zh_CN

输出

<meta property="og:title" content="UniKit 工具箱：全部在浏览器本地运行的开发者小工具" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://unikit.cc/" />
<meta property="og:image" content="https://unikit.cc/og-zh.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="UniKit 工具箱首页预览图" />
<meta property="og:description" content="..." />
<meta property="og:site_name" content="UniKit" />
<meta property="og:locale" content="zh_CN" />

输出顺序固定（标题 → 类型 → 链接 → 图片 → 图片尺寸 → 描述 → 站点名 → 语言），空字段不会生成标签。

常见问题

og:image 为什么必须是绝对地址？

Facebook、微信、Slack 等抓取方不在你的域名下解析相对路径，写 /og/cover.png 基本等于没有图片。工具会直接标出这类问题。

分享图片要多大？

推荐 1200×630（约 1.91:1），最小不要低于 200×200。比例偏离 1.7–2.1 或尺寸过小都会被提示，因为大部分平台会强行裁剪成 1.91:1。

og:locale 写成 zh-CN 可以吗？

OGP 规定用「语言_地区」的下划线写法，例如 zh_CN、en_US。写成 zh-CN 大部分平台仍然能识别，但不符合规范，工具会提示改成下划线形式。

og:type 有哪些可选值？

OGP 定义了 website、article、book、profile、product、place、event，以及 video.*、music.* 等子类型。留空或写自定义值不会让分享卡片失效，但会丢掉 article:published_time 这类子属性的语义。

粘贴 HTML 会被执行吗？

不会。工具只是用正则扫描 <meta> 标签的属性，不注入 DOM、不渲染、不执行脚本，也不会访问标签里写的任何 URL。

关键词：og previewopen graphog:imagefacebook share previewsocial cardog tags generatorOG 标签Open Graph 预览分享卡片社交分享预览og:title图片比例

这个工具能做什么

示例

常见问题

同类工具