Guide: Open Graph & Meta Preview
↑ Back to toolWhat is this tool?
This Open Graph meta tag generator builds the HTML for og:* and twitter:* tags from a simple form, shows a live social preview card, and can parse existing meta tags from a pasted HTML head so you can edit them. It runs entirely in your browser.
Good social metadata decides whether a shared link looks like a polished card or a bare URL. Use this tool to get the tags right before you ship.
💡 Quick tip
Use an absolute https image URL around 1200×630 and pick summary_large_image for the biggest preview.
Why use an OG tag generator?
- Avoid typos in property names (
og:site_name,twitter:card) - Catch missing images and overlong titles before sharing
- Properly escape quotes and ampersands in attribute values
- Audit tags copied from a live site by importing them into the form
Key features
- Form fields — Title, description, URL, image, alt text, site name, Twitter @site.
- og:type and twitter:card chips — website, article, product, profile and more; summary, large image, app, player.
- Live preview — Open Graph or Twitter style, large or compact layout.
- Import — Paste a head snippet and fill the form from existing tags.
- Length hints — Counters for title (60) and description (160).
- History and sharing — Reopen past tag sets or share them via link.
How to use
- Fill the form — Or load the example, or import an existing head snippet.
- Choose type and card — Use the chips for og:type and twitter:card.
- Check the preview — Fix warnings about images, URLs, and lengths.
- Copy tags — Paste them into your page
<head>or framework metadata.
Tag reference
| Tag | Purpose |
|---|---|
og:title | Headline in the card (aim for ≤ 60 characters). |
og:description | Summary text (aim for ≤ 160 characters). |
og:image | Absolute image URL, ideally 1200×630. |
og:url | Canonical URL for the shared object. |
twitter:card | Layout on X/Twitter: summary, summary_large_image, app, or player. |
Best practices
- Unique tags per page — Do not reuse the homepage card for every URL.
- Match the canonical URL — og:url and rel=canonical should agree.
- Add image alt text for accessibility.
- Render tags server-side — Crawlers generally do not run client JavaScript.
Common mistakes
- Relative image paths —
/og.pngwill not resolve for crawlers. - Images behind auth or blocked by robots.txt — The crawler cannot fetch them.
- Using name= for og tags — Open Graph uses
property=; Twitter tags usename=. - Forgetting to re-scrape — Old previews stay cached.
FAQ
What are Open Graph tags?
Open Graph (og:*) meta tags tell Facebook, LinkedIn, Slack, Discord, iMessage, and others which title, description, and image to show when your URL is shared.
Do I still need Twitter Card tags?
X/Twitter falls back to Open Graph tags for title, description, and image, but twitter:card is needed to choose the layout (summary vs summary_large_image). Adding twitter:* tags explicitly is safest.
What image size should I use?
Use about 1200×630 px (1.91:1) for large cards, under about 5 MB, served over https from an absolute URL. Square images of at least 144×144 work for the small summary card.
Why does the platform show an old preview?
Platforms cache link previews. After changing tags, re-scrape the URL with the platform's debugger (for example Facebook Sharing Debugger or LinkedIn Post Inspector).
Is the preview exact?
No. It is an approximation to catch obvious problems like missing images or overlong text. Real crops and truncation differ per platform and app.
Related terms
open graph generator, og meta tags, social share preview, twitter card generator, og:image size, meta tag parser, link preview debugger, facebook sharing debugger, next.js metadata openGraph.
Similar tools
You might also find these developer tools useful:
Conclusion
This Open Graph and meta preview tool helps you ship accurate social cards. Preview the full page with the HTML Preview, make clean URLs with the Slug Generator, or check the final link with the URL Parser.