Open Graph generator with live preview
Create Open Graph and Twitter Card meta tags, see exactly how your link will look on Facebook, X, and LinkedIn, and copy production-ready code.
Your page details
Fill these in and copy the generated tags. Everything runs in your browser.
og:title - the headline of the share card
og:description
og:url - the canonical URL
og:image - absolute URL, 1200x630px recommended
og:site_name
twitter:site (optional)
Validation
- og:title is missing - it's the headline of your share card.
- og:description is missing - most platforms show a description under the title.
- og:image is missing - without it, shares appear as a plain text link.
- og:url is missing - set it to the canonical URL of the page.
Generated meta tags
<!-- Primary --> <meta property="og:type" content="website" /> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image" />
Paste these into the <head> of your page. Already live? Audit it with our Meta Tag Checker.
Launching a new site or page?
We build fast, share-ready websites with social tags, schema, and analytics done right - so every link looks sharp and tracks correctly.
Talk to an engineerQuick answer: Open Graph tags are meta tags in your page's <head> that control how a link looks when shared - title, description, and preview image. This generator builds both Open Graph and Twitter Card tags, shows a live preview for Facebook, X, and LinkedIn, and validates common mistakes. Paste the output into your <head> before publishing.
Essential Open Graph tags
| Tag | Purpose | Required? |
|---|---|---|
| og:title | Headline of the share card | Yes |
| og:image | Preview image (1200x630px) | Yes |
| og:description | Summary under the title | Recommended |
| og:url | Canonical URL of the page | Recommended |
| og:type | website, article, product | Optional |
| twitter:card | summary_large_image for big previews on X | Recommended |
Recommended image sizes by platform
| Platform | Ideal dimensions | Ratio |
|---|---|---|
| Facebook / LinkedIn | 1200x630px | 1.91:1 |
| X (large image card) | 1200x628px | 1.91:1 |
| X (summary card) | 144x144px+ | 1:1 |
How to add Open Graph tags (step by step)
- Fill in your details above: title, description, canonical URL, and a 1200x630 image URL.
- Copy the generated tags - both Open Graph and Twitter Card.
- Paste them into the
<head>of the page, using an absolutehttps://URL forog:image. - Validate with Facebook's Sharing Debugger or LinkedIn's Post Inspector.
- Force a re-scrape in the debugger so the new card appears immediately rather than waiting for the cache to expire.
Why Open Graph tags matter
When someone shares your link in a post, a message, or a Slack channel, the platform scrapes your page and builds a preview card. Without Open Graph tags, that card is a gamble: the platform guesses a title, grabs whatever text it finds, and often shows no image or the wrong one. A bare, image-less link gets dramatically fewer clicks than a rich card with a compelling image and headline.
Open Graph tags put you in control of that first impression. Because a single shared post can reach thousands of people, the preview card is some of the highest-leverage "design" on your whole site - and it takes five minutes to get right. The same tags also feed link unfurls in Slack, Discord, WhatsApp, iMessage, and email clients, so one set of tags improves your appearance everywhere links travel.
Open Graph vs Twitter Cards vs Schema
These three often get confused. Open Graph controls social share previews and is the baseline every page should have. Twitter Card tags refine how the card looks specifically on X; X falls back to OG if they're missing, but adding twitter:card gives you the large-image layout. Schema.org structured data (JSON-LD) is different again - it powers Google rich results and AI citations, not social previews. You want all three, and they don't overlap: OG/Twitter for sharing, schema for search and AI.
Common Open Graph mistakes
- Relative image URLs.
og:imagemust be an absolute https URL or the image won't render. - Wrong dimensions. Off-ratio images get cropped awkwardly; stick to 1200x630.
- Expecting instant updates. Platforms cache aggressively - re-scrape with the debugger after changes.
- Missing og:title or og:description. The platform then invents its own, usually worse.
- Tags outside the <head>. OG tags placed in the body are ignored.
Frequently asked questions
- What are Open Graph tags?
- Meta tags in your page's head that control how a link appears when shared - title, description, and preview image. Used by Facebook, LinkedIn, Slack, Discord, WhatsApp, and more.
- What size should an og:image be?
- 1200x630px (1.91:1), referenced with an absolute URL. Keep it under ~5MB; JPG or PNG work best.
- Do I need both OG and Twitter Card tags?
- X falls back to OG tags, but adding Twitter Card tags gives precise control over the X preview. This generator outputs both.
- Why isn't my preview updating?
- Platforms cache OG data. Use the platform's debugger (e.g. Facebook Sharing Debugger, LinkedIn Post Inspector) to force a re-scrape.
- Is this generator free?
- Yes - free, no signup, fully client-side. Nothing is sent to a server.
Related tools
Related free tools
Keep going with these tools
SERP Snippet Preview
See your page in Google before you publish
Meta Description Generator
SEO titles & descriptions, sized right
Meta Tag & Open Graph Checker
See how your site appears in search and social
Schema Markup Generator
Create valid JSON-LD structured data
Structured Data Checker
Validate schema & rich results
Headline Analyzer
Score your title for clicks & SEO
Want a team to handle it for you? We design and build fast, SEO-ready websites that convert. Explore AI web development.
Related guides
Go deeper with our guides
Practical, up-to-date guides on the strategy, costs, and execution behind this tool.
Content Marketing Strategy for Small Businesses: SEO Guide 2026
Build an SEO-driven content strategy: topic clusters, content calendars, briefs, ROI measurement, and distribution.
Small Business SEO Guide 2026: Strategy and Execution
An SEO framework for small businesses in 2026, from technical foundations and content planning to local visibility and tracking.
Technical SEO Checklist for Small Business Websites in 2026
Fix the technical SEO issues holding your site back: crawlability, indexation, site speed, and schema markup.
Ready to ship your next product?
Tell us what you're building. Senior engineers will scope, plan, and start delivering your product with production-ready architecture - fast.