SEO
How to Build a Website That Search Engines & Users Love
Combine technical SEO with great UX to rank higher and convert better.
seo-tools
Free Open Graph Tag Generator - Build Social Media Meta Tags
Create og:title, og:description, og:image and Twitter Card meta tags with live preview across 6 platforms. Generate copy-ready HTML instantly.
100% Free
Privacy Focused
Instant Results
Works Everywhere
Open Graph Tag Generator
Enter your page details and see instantly how your link looks across 6 social platforms. Copy the generated HTML straight into your <head>.
Tag Inputs
0 chars
0 chars
Recommended: 1200×630 px (1.91:1 ratio)
Article Details
Twitter Card Type twitter:card
Social Previews
How it looks on Google Search
example.com
Your Page Title Here
Your page description will appear here. Keep it between 120 and 155 characters for best results.
How it looks on Facebook
1200 × 630
EXAMPLE.COM
Your Page Title Here
Your description will appear here when shared on Facebook.
How it looks on Twitter / X
1200 × 630
Your Page Title Here
Your description will appear here.
example.com
How it looks on LinkedIn
1200 × 630
Your Page Title Here
example.com
How it looks on Slack
example.com
Your Page Title Here
Your description will appear here.
How it looks on Discord
example.com
Your Page Title Here
Your description will appear here when a link is shared in Discord.
How it looks on WhatsApp
1200 × 630
Your Page Title Here
Your description will appear here when shared on WhatsApp.
example.com
Generated HTML
Want to verify your live page?
Check OG tags already on a published URL with the preview tool.
About This Tool
What is Open Graph Tag Generator?
Our Open Graph Tag Generator lets you build complete social media meta tags from scratch with a live 6-platform preview. Enter your title, description, image URL, and page details — then see exactly how Facebook, Twitter/X, LinkedIn, Slack, and Discord will render your link before you deploy a single line of code.
Open Graph (og:) and Twitter Card meta tags are what control social media previews. Without them, platforms guess what to show — often displaying the wrong image, a truncated title, or no description at all. With the right tags in place, you control the narrative: a compelling headline, an eye-catching image, and a crisp description that drives clicks.
The generator validates your input in real time — warning about missing required tags, titles that exceed platform character limits (60 for Google, 95 for Facebook), images with wrong aspect ratios, and missing canonical URLs. Once you're satisfied with the preview, copy the complete HTML snippet and drop it into your page's
.Everything runs in your browser. No data is sent to any server. Safe for client projects, confidential campaigns, and pre-launch work.
Features
Powerful Features
Everything you need in one amazing tool
Live 6-Platform Preview
See Google, Facebook, Twitter, LinkedIn, Slack and Discord previews update as you type.
Character Counters
Tracks title and description length with per-platform limits for Google and Facebook.
Real-Time Validation
Highlights missing required tags, truncation warnings, and aspect ratio issues instantly.
Image Ratio Checker
Verifies your og:image URL loads and shows dimensions with 1.91:1 ratio guidance.
Copy-Ready HTML
Generates a complete <head> snippet with og: and twitter: tags ready to paste.
100% Private
All processing happens in your browser. Your content never leaves your machine.
Simple Process
How It Works
Get started in 4 easy steps
1
Fill In Your Details
Enter your page title, description, image URL, page URL, and site name in the form.
2
See Live Previews
Tab through Google, Facebook, Twitter, LinkedIn, Slack, and Discord previews instantly.
3
Fix Any Issues
The validation strip highlights missing tags or truncation warnings as you type.
4
Copy & Paste
Hit Copy to grab the full HTML snippet and paste it into your page's <head>.
Why Us
Why Choose Our Open Graph Tag Generator?
Stand out from the competition
Instant Preview
No waiting — previews update live as you type each character.
All Platforms
Six platforms in one tool. Catch issues for every channel before deploying.
Precise Limits
Per-platform character counters so you never get truncated where it matters most.
Zero Setup
No account, no install. Open the page and start generating tags immediately.
Unlimited Use
Generate tags for as many pages as you need — campaigns, blogs, products, anything.
Privacy First
Browser-only processing. Ideal for confidential work and pre-launch content.
Use Cases
Perfect For
See how others are using this tool
Blog Posts
Generate perfectly sized titles and descriptions for every article you publish.
Product Pages
Build product-specific OG tags that make shared links drive conversions.
Landing Pages
Craft launch-ready social tags before your big campaign goes live.
Agency Work
Generate and preview OG tags for client sites quickly, privately, and accurately.
Social Campaigns
Optimise every shared URL for maximum engagement across platforms.
Developer Workflow
Quickly prototype meta tags and copy the HTML into your codebase or CMS.
Frequently Asked Questions
Everything you need to know about Open Graph Tag Generator
At minimum, every page should have: og:title (page name, up to 60 chars for Google), og:description (summary, 120–155 chars), og:image (1200×630px JPG/PNG, 1.91:1 ratio), og:url (canonical URL), og:type (usually "website" or "article"). For Twitter, add: twitter:card ("summary_large_image" in most cases), twitter:title, twitter:description, twitter:image. These 9 tags give you solid coverage across all major platforms.
Paste the generated HTML snippet inside the <head> tag of your page. Most CMS platforms (WordPress, Shopify, Webflow) have dedicated SEO fields or plugins (e.g., Yoast, RankMath) that set these tags automatically — paste your values there instead. For static HTML sites, add the tags directly to the <head> section. Verify implementation with our Open Graph Preview tool by entering your live URL after deploying.
1200×630px is the universal standard (1.91:1 ratio). It works well on Facebook, LinkedIn, Twitter large-image cards, and Slack/Discord. Keep file size under 1 MB for fast loading. Use JPG for photos (smaller file), PNG for logos/screenshots (better quality). Avoid heavy text overlays — Facebook suppresses link previews when images are more than 20% text. Always use an absolute URL (https://) for og:image, not a relative path.
Two common causes: 1) The image URL returned a non-200 response or the image is too small (minimum 300×157px for large cards, 144×144px for summary). Twitter rejects images that fail to load. 2) Twitter has cached a previous version of the card. Use the Twitter Card Validator at cards-dev.twitter.com/validator and click "Preview card" — this forces a fresh scrape and clears the cache. Also ensure twitter:card appears before twitter:image in the HTML.
No. Open Graph tags (og:) are read by Facebook, LinkedIn, Slack, Discord, and most other platforms as a standard. You only need separate twitter: tags for Twitter/X since it uses its own Card system (though it falls back to og: tags if twitter: tags are absent). So in practice: set your og: tags correctly and add twitter:card + twitter:image on top — that covers all 6 platforms this tool previews.
Need a Custom Website Built?
While you use our free tools, let us build your professional website. Fast, affordable, and hassle-free.
Free forever plan
• No credit card required