TechTools

Open Graph Tag Generator

0/95
0/95
0/200
0/200
1200×630px recommended
Title is required
Description is required
og:image is missing - cards will show no image
og:url is missing
og:site_name is missing

Generated Meta Tags

<!-- Primary Meta Tags -->
<meta name="robots" content="index, follow" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:locale" content="en_US" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
Paste these tags inside the <head> section of your HTML. Test with the Social Media Card Checker after publishing.

Privacy First: Your files are processed securely. Whenever possible, processing happens in your browser and files are never stored on our servers.

Build a complete set of social sharing meta tags and see exactly how your page will look when shared on Facebook, LinkedIn, Twitter/X, Slack, and Discord. Three input tabs cover Open Graph (og:title, og:description, og:image with width/height/alt, og:url, og:type, og:site_name, og:locale), Twitter / X Card (card type, twitter:title/description/image overrides, @site and @creator handles), and Extra Tags (canonical URL, author, robots directive, theme-color). A live dual-preview card renders both the Facebook/LinkedIn-style card and the Twitter-style card using your inputs in real time - including a live image preview from the URL you enter. A validation panel flags missing required fields, character limit violations, missing HTTPS on image URLs, and accessibility issues like missing alt text. The full output is a copy-pasteable HTML snippet for your page's head section. No account required.

How to Use

  1. 1Fill in the Open Graph tab: Title, Description, Page URL, Image URL, Site Name, and Type
  2. 2The live preview cards update in real time as you type - check how your link will look on Facebook/LinkedIn and Twitter
  3. 3If you want different content on Twitter, switch to the Twitter/X tab and override specific fields
  4. 4Use the Extra Tags tab to add a canonical URL, author, robots directive, and theme-color
  5. 5Check the validation panel for errors (red) and warnings (yellow) and fix any issues
  6. 6Click 'Copy All' to copy the full HTML meta tag snippet
  7. 7Paste the snippet inside the <head> section of your HTML
  8. 8Test the live URL after publishing using the Social Media Card Checker tool

Features

  • Open Graph, Twitter Card & extra tags
  • Live Facebook/LinkedIn card preview
  • Live Twitter/X card preview
  • Live image URL preview
  • Character limit bars (title/description)
  • Validation panel with errors & warnings
  • HTTPS image URL check
  • One-click copy all tags

Frequently Asked Questions

Guest PlanUpgrade
Operations today0 / 3
5 MB max fileNo batch
Upgrade for more

/ related tools

Blog SEO Analyzer
Schema Markup Generator
Social Media Card Checker
Meta Tag Checker

Community Feedback

Like

00

Total Rating

No ratings yet

Reviews

No reviews yet. Be the first!

Rate & Review

Was this tool helpful?

Rate this tool:

Write a Review

0/500

/ share this tool

Twitter/XLinkedIn