Open Graph preview
Generate and check Open Graph tags: required and recommended og:* checklist, missing properties, image ratio problems and a Facebook-style share card preview.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Open Graph tags
Generates tags and a preview only — no URL is requested and pasted HTML is never rendered.
Generated tags
<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" />
Property checklist
og:titlepresentog:typepresentog:imagepresentog:urlpresentog:descriptionpresentog:site_namepresentog:localepresentog:image:widthpresentog:image:heightpresentog:image:altpresentShare card preview
All required and recommended properties are present and look valid.
What this tool does
- Add Open Graph tags before shipping a page: fill in a few fields and copy the whole og:* block into your <head>.
- Debug a share card that shows no image: verify og:image is absolute and the dimensions are 1200×630, and see every missing required property listed.
- Inherit a project by pasting its existing meta tags and instantly seeing which required properties are absent or declared twice.
Example
Input
og:title=UniKit 工具箱：全部在浏览器本地运行的开发者小工具, og:type=website, og:url=https://unikit.cc/, og:image=https://unikit.cc/og-en.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
Output
<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-en.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" />
The order is fixed (title → type → URL → image → image size → description → site name → locale) and empty fields produce no tag at all.
Frequently asked questions
Why must og:image be an absolute URL?
Facebook, Slack and most other crawlers do not resolve relative paths against your domain, so /og/cover.png effectively means “no image”. The tool flags those cases directly.
What size should the share image be?
1200×630 (about 1.91:1) is the safe choice, with 200×200 as the minimum. Ratios outside 1.7–2.1 or very small images are flagged because most platforms crop to 1.91:1 anyway.
Is zh-CN acceptable for og:locale?
OGP specifies a language_territory form with an underscore, such as zh_CN or en_US. zh-CN still works on most platforms, but it is not spec-compliant, so the tool suggests the underscore form.
Which og:type values are valid?
OGP defines website, article, book, profile, product, place and event, plus subtypes like video.* and music.*. A custom value will not break the card, but you lose the semantics of subtype properties such as article:published_time.
Is pasted HTML executed?
No. The tool scans <meta> attributes with a small parser — nothing is injected into the DOM, rendered or executed, and no URL inside the tags is ever requested.
Keywords：og previewopen graphog:imagefacebook share previewsocial cardog tags generatorOG 标签Open Graph 预览分享卡片社交分享预览og:title图片比例