OG & Meta Tag Generator
Fill in title, description, URL and image to generate complete Open Graph + Twitter Card + standard meta code, with live WeChat / Telegram / X card previews and JSON-LD.
>_ USAGE GUIDE
When building share cards, platforms read OG / Twitter Card tags to decide the title, description and cover image. Fill four fields and get complete code plus three live card previews.
Typical steps:
- Fill info: title, description, page URL and image URL (image is required). Aim for a 1200×630 cover
- Live preview: the right side shows pure-CSS mock cards for WeChat / Telegram / X; images appear as placeholder boxes showing the URL, with no external requests
- Copy code: the Meta block holds standard
<title>, Open Graph and Twitter Card snippets; the JSON-LD block holds structured data — copy both - Embed: drop both blocks into the page
<head>and addog:typeper platform needs
>_ FAQ
Q1 · Why is the image a placeholder box?
The preview is a frontend-only CSS mock that deliberately does not load external images (no requests to your CDN, no broken external links). In production use the real URL and serve a 1200×630 cover.
Q2 · Why is the image URL required?
The Open Graph cover depends entirely on og:image; without it platforms show a grey block or skip the card. The tool enforces it and warns when empty.
Q3 · Open Graph vs Twitter Card?
Open Graph is adopted by Facebook, WeChat, Telegram and others; Twitter (X) prefers the twitter:* tags. Providing both makes the large-image card work on X as well.
Q4 · What is JSON-LD for?
JSON-LD is the structured data search engines use to understand the page, complementing OG by adding semantic title/description/URL/image for indexing and rich results.
Q5 · What cover size is recommended?
1200×630 (aspect 1.91:1) is the sweet spot for most platforms; smaller images get stretched or grey-bordered, larger ones load slower.