Open Graph Meta Generator
Generate Open Graph meta tags for social media sharing. Preview how your links will look.
Recommended: 1200x630 pixels
Preview (Social Card)
example.com
Your Page Title
Your page description will appear here...
Generated Meta Tags
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />Create Open Graph and Twitter Card meta tags for your web pages. See a live preview of how your content will appear when shared on social media.
Open Graph is the meta-tag protocol that Facebook introduced and every major platform — LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram — now reads to build link previews. When you paste a URL into a chat, the unfurled card (title, description, image) comes from the og:* tags in that page's head. If they're missing or wrong, you get a bare URL or a thumbnail cropped from the wrong part of the page.
This generator writes a clean block of og: and twitter: tags from a form you fill out. It handles the non-obvious details: og:image requires an absolute URL (not a path), twitter:card should usually be summary_large_image for anything that has a hero image, and og:image:width and og:image:height help Facebook's scraper avoid a second round trip. The live preview shows the result rendered the way Facebook, Twitter/X, and LinkedIn actually display it — not a generic card — so you can catch truncated titles or images with text that won't fit.
Using the output is a matter of pasting the generated tags into your page head or your CMS's SEO module. If you use Next.js, Astro, or Nuxt, the tool also exports a metadata object in the format those frameworks expect.
- 1
Fill in the basics
Enter title, description, URL, and image URL. Optional fields cover site name, type (article, website, video), locale, and Twitter handle.
- 2
Check the live preview
Facebook, Twitter/X, and LinkedIn previews update as you type. Watch for truncation — titles over 60 characters and descriptions over 160 get cut off.
- 3
Copy the meta tag block
Paste the generated <meta> tags into your page's <head>, or use the Next.js / Nuxt / Astro metadata export if your framework uses those helpers.
Blog post previews
Give each article its own og:title, og:description, and hero image so shares on LinkedIn and Twitter display properly.
Marketing landing pages
Build custom preview cards for ad campaigns so the image and headline match the creative on the ad platform.
SaaS product pages
Generate distinct OG tags for pricing, features, and docs pages so Slack unfurls show context instead of a generic site card.
SEO audit fixes
Lighthouse and Ahrefs flag pages missing OG tags. Generate a compliant block in under a minute and paste it in.
What's the difference between Open Graph and Twitter Cards?
Open Graph (og:*) was built by Facebook and is read by most platforms. Twitter Cards (twitter:*) are Twitter's equivalent. Twitter falls back to OG tags, so you only need twitter:* when you want Twitter-specific overrides like a different image or card type.
What size should my og:image be?
1200×630 pixels is the sweet spot. Facebook recommends a minimum of 600×315 and an aspect ratio of 1.91:1. Under 8 MB. Use summary_large_image for the twitter:card type when using a full-size image.
Why isn't my preview updating after I change the tags?
Platforms cache OG data aggressively. Use Facebook's Sharing Debugger and Twitter's Card Validator to force a re-scrape, or append a query string to the URL as a quick cache-buster.
Do I need og:url if the tag is on the page itself?
Yes. og:url should be the canonical absolute URL of the page. It's what scrapers use to deduplicate share counts and resolve redirects.
Can I use relative paths for og:image?
No. og:image must be an absolute URL, including the protocol (https://). Relative paths are ignored by most scrapers.