Open Graph Generator
Generate the complete set of Open Graph and Twitter Card meta tags, then see exactly how your page will look when shared on Facebook, LinkedIn, and Twitter — live, as you type. No signup, nothing leaves your browser.
- ✓All 7 core Open Graph tags + 4 Twitter Card tags
- ✓Live Facebook, LinkedIn & Twitter previews
- ✓Character counters for title (60) and description (160)
- ✓One-click copy, ready to paste into <head>
- Processing
- Client-Side
- Privacy
- 100%
- Preview
- Live
- Price
- Free
Open Graph Tags
Recommended: 40–60 characters. Used for og:title and twitter:title.
Recommended: 80–160 characters. Used for og:description and twitter:description.
Recommended: 1200×630 px (1.91:1), PNG or JPG, < 8 MB.
Use the canonical URL of this page.
Your brand or site name (used by Facebook + LinkedIn).
Twitter / X Card
Generated Meta Tags
Paste these tags inside the <head> of your HTML, ideally near the top.
Live Preview
📝 How to Use
- Fill in the title, description, image URL, and page URL.
- Pick the right og:type and locale for your page.
- Review the Facebook, LinkedIn, and Twitter previews.
- Click Copy and paste into your HTML
<head>. - Verify with Facebook Sharing Debugger after deploy.
What is Open Graph?
Open Graph is a protocol introduced by Facebook in 2010 that lets any web page describe itself as a rich object in a social graph. By adding a handful of <meta property="og:*"> tags inside the <head> of your HTML, you tell every modern social platform — Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, Telegram, and dozens more — exactly how your page should appear when someone shares the link. The full specification lives at ogp.me.
Without Open Graph tags, social platforms have to guess. They scrape your page, try to find a sensible title, grab the first halfway-decent image they can find, and fall back to whatever meta description exists. The result is usually ugly: a tiny favicon-sized thumbnail, a truncated title pulled from a random <h1>, or worst of all, no preview at all — just a bare URL that nobody clicks. With Open Graph tags in place, you ship a designed card every time: your image, your headline, your hook, your brand.
The seven Open Graph tags that matter most are og:title, og:description, og:image, og:url, og:type, og:site_name, and og:locale. Title and description are self-explanatory but heavily length-limited — Facebook truncates titles around 60 characters and descriptions around 200, so keep both punchy. The image is the single highest-leverage tag: a strong 1200×630 image can double or triple click-through rates compared to a weak one. The URL should be your canonical URL so re-shares don't fragment across tracking parameters. Type controls how platforms interpret the page — article unlocks publication date and author, product can show price and availability, video embeds a player.
Twitter (now X) initially built its own competing standard called Twitter Cards, but it now gracefully falls back to Open Graph when the twitter:* equivalents are missing. The right pattern is to ship both: full Open Graph for Facebook, LinkedIn, and everything else, plus twitter:card, twitter:site, and twitter:creator so you get proper attribution and analytics on X. This generator produces both sets in one shot.
Why Use Open Graph Tags?
Open Graph tags are the difference between a shared link that gets ignored and one that drives traffic. Here's what shipping them buys you:
2–3× Higher Click-Through
Studies from BuzzSumo and HubSpot show pages with rich Open Graph cards earn 2–3× the click-through rate of bare-URL shares. A good 1200×630 image alone can lift CTR by 40% versus the default favicon thumbnail.
Full Brand Control
Without OG tags, platforms guess your title and image — and they guess badly. With OG tags, every share looks designed: your colors, your typography, your hook. You own the first impression on every social feed.
Universal Compatibility
Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, Telegram, Signal, Microsoft Teams, Skype, Pinterest, Reddit, and even modern email clients all render Open Graph cards. One set of tags, every surface covered.
Indirect SEO Boost
OG tags aren't a direct Google ranking factor, but they drive more social referral traffic, more backlinks, and more brand search volume — all of which Google does reward. Strong shares feed the SEO flywheel.
Better Attribution
twitter:site and twitter:creator attach your handles to every share, surfacing your account directly in the card. Facebook's og:site_name works similarly. More follows, more credit, more recognition.
Five Minutes, Forever Value
Adding Open Graph tags is a one-time, five-minute job that pays back on every share, on every platform, for the lifetime of the page. There is almost no other web optimization with a higher leverage-to-effort ratio.
How to Use the Open Graph Generator
Five steps from blank form to copy-pasted, share-ready HTML.
- 1
Enter Your Title
Type the title that should appear at the top of every share card. Aim for 40–60 characters — punchy, benefit-led, and front-loaded with the most interesting word. The counter turns green when you hit the sweet spot.
- 2
Write a Compelling Description
Add 80–160 characters of copy that earns the click. Lead with the value proposition, not a recap of the title. Facebook truncates around 200 characters but front-loads what users see on small screens, so the first 80 matter most.
- 3
Add a 1200×630 Image URL
Paste the public URL of your share image. Use 1200×630 pixels (1.91:1 ratio). Put faces, logos, and important text inside the centered safe area with at least 120px of padding so nothing gets cropped on Twitter or mobile feeds.
- 4
Pick Type, Locale, and Site Name
Choose website for landing pages, article for blog posts, product for e-commerce, video for video pages. Set og:locale to match your audience (en_US, fr_FR, etc.) and og:site_name to your brand — it shows up under the title on LinkedIn and Facebook.
- 5
Copy and Paste into <head>
Hit the Copy button, then paste the tags inside the <head> element of your HTML, ideally near the top so crawlers see them quickly. After deploy, validate with Facebook Sharing Debugger, LinkedIn Post Inspector, and Twitter’s card preview to catch any caching or sizing issues.
Common Use Cases
Open Graph tags pay off anywhere a link gets shared. Four common scenarios:
📰 Blog Posts & Articles
Set og:type to article, use the post headline for og:title, and design a custom hero image per article. Article cards on LinkedIn drive 3× the engagement of bare links.
🛍️ E-commerce Product Pages
Set og:type to product, use the product photo for og:image, and put the price and category in the description. Pinterest pulls all of these directly when users save your product.
🚀 Landing Pages & SaaS
Use og:type website with a benefit-led headline and a 1200×630 hero showing your product UI. This is the card your beta users will share to hundreds of Slack channels and X threads.
🎥 Video & Multimedia
Set og:type to video, use a thumbnail with a play icon overlay for og:image, and pair with twitter:card player for inline playback on X.
Frequently Asked Questions
What is Open Graph?
Open Graph (OG) is a protocol introduced by Facebook in 2010 that turns any web page into a rich object inside a social graph. By adding og:title, og:description, og:image and other meta tags to your HTML <head>, you control exactly how your page appears when shared on Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, and most modern apps that render link previews.
Do I still need Twitter Card tags if I have Open Graph?
Twitter (X) will fall back to Open Graph tags when twitter:* tags are missing, but adding twitter:card, twitter:site, and twitter:creator gives you precise control over the card format (summary vs summary_large_image), attribution, and analytics. For best results across all platforms, ship both.
What is the recommended Open Graph image size?
Use 1200x630 pixels (1.91:1 aspect ratio) for og:image. This is the size Facebook, LinkedIn, and Twitter all render at full bleed. Keep the file under 8MB, prefer PNG or JPG, and make sure important text and faces sit inside the safe area (centered, with ~120px padding) so nothing is cropped on mobile.
What og:type should I choose?
Use "website" for landing pages, "article" for blog posts and news (this unlocks article:published_time and article:author), "product" for e-commerce listings, and "video" for video-first pages. Picking the right type lets crawlers index your page into the correct vertical and lets Facebook show metadata like publish date or price.
Why is my Open Graph image not updating on Facebook?
Facebook aggressively caches Open Graph data. After updating your og:image, paste your URL into Facebook's Sharing Debugger (developers.facebook.com/tools/debug) and click 'Scrape Again' to force a refresh. LinkedIn has a similar Post Inspector at linkedin.com/post-inspector. For Twitter, append a cache-busting query string like ?v=2 to the URL.
Where do I put the generated tags?
Paste them inside the <head> element of your HTML, before the closing </head> tag. In Next.js, put them inside next/head. In React Helmet, use Helmet. In WordPress, most SEO plugins (Yoast, Rank Math, SEOPress) auto-emit Open Graph tags from a settings panel.
What is og:locale and do I need it?
og:locale tells Facebook the language and region of your page using a two-letter language code and a two-letter country code joined by an underscore, like en_US, en_GB, fr_FR, or es_MX. It is optional but recommended — it helps Facebook render the right currency symbols, date formats, and translations when your page is shared internationally.
Is this Open Graph generator free?
Yes. The Open Graph generator is 100% free, requires no signup, and runs entirely in your browser. We never see your titles, URLs, or images — every meta tag is generated client-side with JavaScript.
Does Open Graph affect SEO rankings?
Open Graph tags are not a direct Google ranking factor, but they have a strong indirect effect. Rich, well-formatted share cards earn 2-3x more clicks on social, which drives more referral traffic, more backlinks, and more brand searches — all of which feed back into search rankings.
Can I test my Open Graph tags after publishing?
Yes. Use Facebook's Sharing Debugger, LinkedIn's Post Inspector, and Twitter's Card Validator (now part of Twitter Developer tools) to preview your live URL. These tools also surface warnings — missing og:image, image too small, og:url mismatch — that the browser preview here cannot detect.
Related SEO & HTML Tools
More tools to ship a polished, search-friendly page.