Open Graph Meta Tag Generator — OG Tags for Social Sharing
Generate Open Graph + Twitter Card meta tags for rich social sharing previews. Live preview for Facebook, LinkedIn, Twitter/X. Free, instant.
About Open Graph Generator
Open Graph (OG) meta tags tell social platforms how to render a link preview when someone shares your URL — title, description, hero image, site name, type. Without them, shared URLs render as bare links with no image; with them, they become rich preview cards driving 2–3× higher click-through. The ZTools OG Generator emits the standard `og:title`, `og:description`, `og:image`, `og:url`, `og:type`, `og:site_name` tags plus matching `twitter:card`, `twitter:title`, `twitter:description`, `twitter:image` for X/Twitter — and shows live previews of how the link will render on Facebook, LinkedIn, X, Slack, Discord, and iMessage.
Use cases
- Marketing landing pages. Every campaign URL needs an OG image — clicks from social drop ~50% without one. The hero image is the single biggest CTR factor on shared links.
- Blog posts. Per-post OG tags with title + featured image + summary. Drives rich previews in Slack/Discord when team members share articles internally.
- Product pages / e-commerce. Product title + price + photo as OG tags. When customers share to Pinterest/Instagram/WhatsApp, the link renders as a shoppable card.
- Documentation links. Docs sites with OG tags get richer Slack/Discord previews when devs share API docs — teammates see the topic without clicking through.
How it works
- Enter title + description. Title ≤ 60 chars, description 110–160 chars. Both visible in preview cards.
- Set canonical URL. Absolute URL (https://...). Used by `og:url` and Twitter card.
- Set OG image URL. Absolute URL to a hero image; recommended 1200×630 px for Facebook/LinkedIn, 1200×675 for Twitter summary-large-image.
- Pick OG type. website, article, product, video, music — controls what extra fields apply.
- Pick Twitter card style. summary (small square image) or summary_large_image (full-width hero).
- Copy <head> snippet. Multi-line meta block — paste into your page <head>.
Examples
Input: Blog post: "How AI Search Changes SEO" + 1200×630 image
Output: 12 meta tags covering OG + Twitter — preview cards on every social platform.
Input: Product: "Wireless Headphones $199" + product image
Output: OG type=product, includes price and currency; renders as shoppable card on Pinterest.
Input: Default site (homepage)
Output: OG type=website + site_name; minimum tags for a valid rich preview.
Frequently asked questions
Are OG tags still needed in 2026?
Yes — Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, and Pinterest all read OG tags for link preview cards. X reads its own twitter: tags but falls back to OG if missing.
Why is my image not showing?
Common causes: image URL is relative (must be absolute https://); image > 5MB (some platforms drop it); image format not jpg/png/webp; Cloudflare/CDN serves different content to bots; OG cache stale — use Facebook Sharing Debugger / LinkedIn Post Inspector to force re-scrape.
What size should my OG image be?
1200×630 px is the universal sweet spot (1.91:1 ratio). Facebook crops if smaller; Twitter summary_large_image likes 1200×675 (16:9). Square 1200×1200 also works on most platforms.
Do I need both og: and twitter: tags?
Twitter falls back to og: tags if twitter: are missing, BUT if you want a different X preview than other platforms (e.g. summary_large_image card style), you need explicit twitter: tags.
Why does LinkedIn show stale data?
LinkedIn caches OG data for ~7 days. Use the Post Inspector (linkedin.com/post-inspector) to force re-scrape after updates.
OG vs structured data (JSON-LD)?
OG tags = social preview cards. JSON-LD = search engine rich results. Both are needed; they don't replace each other.
Pro tips
- Always use absolute https URLs for og:image — relative paths break.
- Test with Facebook Sharing Debugger before launch; force re-scrape after any change.
- Keep title ≤ 60 chars and description 110–160 chars for clean preview rendering.
- Add `og:image:alt` for accessibility — described OG images get cited better in AI results.
- For dynamic pages, generate OG image at build time or via image-CDN URL params (e.g. Vercel's @vercel/og).
Reviewed by Ahsan Mahmood · Last updated 2026-05-06 · Part of ZTools.
For the full,
formatted version of this page, please enable JavaScript and reload
https://ztools.zaions.com/open-graph-meta-generator.