Open Graph Tags Generator With Live Preview
Generate Open Graph meta tags and preview exactly how the share card looks before publishing.
Inspect an existing URL
Fetch a live page and see which Open Graph and Twitter tags it already has.
Page details
Advanced options
Preview
Approximation only — actual rendering varies by platform and changes over time.
Generated tags
How it works
- 1
Inspect an existing page (optional)
Enter a live URL to see which Open Graph and Twitter tags it already has, and click through to load them into the generator.
- 2
Fill in the page details
Enter a title, description, page URL, site name, and image, adjusting type and locale as needed.
- 3
Choose a Twitter card type
Pick summary_large_image for a big image card, or summary for a compact thumbnail layout.
- 4
Check the preview
Switch between Facebook, X, and LinkedIn tabs to see how the share card looks for each platform.
- 5
Copy the generated tags
Copy the complete meta tag block and paste it into your page's <head>.
About the Open Graph Tags Generator With Live Preview
A page with no Open Graph tags gets shared with whatever a platform can scrape together on its own, often a random image, a truncated title, or nothing at all. This tool generates the actual meta tags that control how a page appears when shared on Facebook, X, and LinkedIn, with a live preview that updates as you type, and a URL inspector that checks an existing page's tags before you write a single line.
Why the preview actually renders a card, not just a checklist
Knowing that og:title and og:image are present doesn't tell you whether the resulting share card actually looks good, a title that's technically set can still be awkwardly cropped, or an image can be the wrong aspect ratio for how it gets displayed. This tool renders an actual preview card that updates live as the form is filled in, with separate tabs for Facebook, X, and LinkedIn, since Twitter's summary card in particular uses a genuinely different compact layout than the large-image style Facebook and LinkedIn typically use, switching the twitter:card type changes which layout the preview shows.
Auditing a page before rewriting its tags
Inspecting a live URL first, before touching the generator, shows exactly which Open Graph and Twitter tags a page already has and which are missing, which matters because it's common for a page to have some tags set correctly and others missing or outdated, rather than none at all. The inspector's results feed directly into the generator with a single click, so fixing a page's tags starts from what's actually there rather than retyping everything from scratch or guessing what might already be set.
Why the generated tags skip anything left blank
Only fields that actually have a value are included in the generated output, an empty og:description tag or a twitter:creator with no handle set doesn't get written out as a blank attribute. This keeps the output clean and avoids shipping placeholder-looking meta tags that add nothing, and it also means the output naturally grows as more of the form gets filled in, rather than requiring every field to be complete before anything useful can be copied.
What the preview can't guarantee
Facebook, X, and LinkedIn each control their own share card rendering, and none of them publish an exact specification, they've all changed layouts before and will again. The preview here is a close, genuinely useful approximation, not a pixel-perfect simulation of any specific platform's current design, and the 1200×630 image size and 60/155 character guides are widely used conventions rather than hard official limits. The most reliable final check is always a platform's own official debugging tool, Facebook's Sharing Debugger or X's Card Validator, run against the live page after publishing.
Runs entirely in your browser
Everything you type stays local, the preview and generated tags are built entirely in your browser. Inspecting a URL does fetch that page's content through this site to read its tags, but nothing about the page you're editing tags for is uploaded anywhere. Once your share tags are set, our Google SERP Snippet Preview is worth checking too, since your title and meta description tags serve a different purpose in search results than they do in a social share card, both part of the same Technical SEO collection this tool belongs to.
Frequently asked questions
Does the preview match exactly how each platform will render the card?
It's a close approximation, not a pixel-perfect simulation. Facebook, X, and LinkedIn don't publish exact specifications and change their layouts over time, so the final check is always each platform's own official debugging tool.
What does inspecting a URL actually check?
It fetches the page and checks for a fixed set of Open Graph and Twitter meta tags, showing which are present with their current value and which are missing.
Can I load an existing page's tags directly into the generator?
Yes, after inspecting a URL, a button appears to load whatever tags were found directly into the form, so you can start from what's already there.
Why do some generated tags not appear even though I filled in related fields?
Only fields with an actual value are included. An empty field, like a blank twitter:creator handle, is skipped rather than written out as an empty attribute.
What's the difference between the two Twitter card layouts?
summary_large_image shows a large image above the title and description, while summary shows a small square thumbnail beside a more compact layout. The preview reflects whichever one is selected.
Why does a published date field appear sometimes and not others?
It only appears when Type is set to article, since article:published_time isn't a meaningful tag for other content types like a product or website page.
What image size should I use?
1200×630 pixels is the widely recommended size for Open Graph images, giving a good crop across most platforms' card layouts.
Is the page I'm inspecting or generating tags for uploaded anywhere?
Inspecting a URL fetches that page's content through this site to read its tags, but nothing about the page you're editing is uploaded. All tag generation and preview rendering happens locally in your browser.