Open Graph Meta Tag Generator

Fill in your page details to get copy-paste Open Graph and Twitter Card tags, so your links show a proper title, description and image when shared.

✔ 100% Free✔ No Signup✔ No Watermark✔ Unlimited Use

Updated 2026-07-05 · Built and maintained by the MakeToolz team.

Generate Open Graph Tags for Perfect Link Previews

When someone shares your page on Facebook, LinkedIn, X, Slack, Discord or iMessage, those platforms read Open Graph (OG) meta tags to build the preview card, the title, description and thumbnail image. Missing or wrong tags mean an ugly, blank or broken preview that gets far fewer clicks. This free Open Graph meta tag generator writes them correctly for you.

Fill in your page's title, description, URL and image, and it produces a clean block of OG and Twitter Card tags, properly escaped, ready to paste into your page's <head>. No framework or plugin needed.

How to Use the Open Graph Meta Generator

  1. 1
    Enter your page title, description and URL (the three required fields).
  2. 2
    Add an image URL (ideally 1200x630px) for a large preview thumbnail.
  3. 3
    Pick the content type, site name and Twitter card style.
  4. 4
    Copy the generated tags and paste them inside your page's <head> section.

Why Use MakeToolz's Open Graph Meta Generator?

OG + Twitter in one

Generates both Open Graph and Twitter Card tags so every platform shows a rich preview.

Properly escaped

Quotes and special characters in your title and description are HTML-escaped so the tags never break.

Large-image cards

Choose summary_large_image for the big-thumbnail preview that earns the most clicks.

Live output

The tag block updates as you type, ready to copy at any point.

No dependencies

Plain meta tags that work on any site, with or without a CMS.

Private & free

Runs in your browser, nothing uploaded, no signup.

The Core Open Graph Tags Explained

Open Graph tags are meta tags placed in a page's <head> that tell social platforms how to draw a preview card. Each tag has a property name and a content value. A handful do most of the work, and getting them right is the difference between a rich card and a blank box.

TagWhat it controlsGood practice
og:titleThe bold headline on the cardKeep under about 60 characters
og:descriptionThe line of text below the titleAround 110 characters, punchy
og:imageThe preview thumbnail1200x630 px, absolute URL
og:urlThe canonical page addressThe clean, final URL
og:typeThe kind of contentwebsite, article or product

How Platforms Build a Preview Card

When someone pastes your link into Facebook, LinkedIn, Slack, Discord or iMessage, that platform sends its own crawler to fetch your page. The crawler reads the Open Graph tags, downloads the image, and caches the result. The next person who shares the link sees the same card without a fresh fetch. This caching is why a fix does not always show up right away: the platform is still serving the old snapshot until you clear it in its debugger.

X, formerly Twitter, adds its own layer. It reads Twitter Card tags first and falls back to Open Graph when they are missing. Setting twitter:card to summary_large_image forces the big-photo layout that tends to earn more clicks than the small thumbnail.

Who Sets These Tags and Why It Matters

Content marketers set them so shared articles look professional in a feed. Ecommerce teams use og:type=product so shared items show cleanly. Developers add them to every template so no page ships without a preview. The payoff is real: a link with a clear title and a sharp image draws far more clicks than a bare URL, so the same social post works harder.

Benefits, Limitations and Common Mistakes

The main benefit is control. Without OG tags, a platform scrapes whatever text and image it can find, often the wrong ones. With them, you decide the story your link tells. The limit is that tags only shape the preview, not ranking, and every platform caches, so changes need a manual refresh. Watch for these errors:

  • Relative image paths. Crawlers cannot resolve /img/card.jpg. Always use the full https:// address.
  • Missing image dimensions. An image far from 1200x630 may crop badly or shrink to a tiny thumbnail.
  • Forgetting to re-scrape. After editing tags, run the platform's debugger to clear the cache and confirm the new card.
  • Unescaped quotes. A stray quote in your title breaks the tag. This generator escapes them for you.

Set a clean, final URL in og:url to match your canonical page. If you build shareable links for campaigns, tag them first with a UTM link builder so the shared post is tracked, and tidy long page paths with a slug generator before you lock in the URL.

People Also Ask

Where exactly do Open Graph tags go?

They belong inside the <head> section of your page's HTML, next to the title and meta description. Placing them in the body means crawlers may miss them.

Why is my new image not showing when I share the link?

The platform cached the old preview. Use its sharing debugger, such as Facebook's Sharing Debugger or LinkedIn's Post Inspector, to force a re-scrape and refresh the card.

Do I need both Open Graph and Twitter Card tags?

Open Graph alone covers most platforms and X falls back to it. Adding Twitter Card tags gives you direct control over the card style on X, so including both is the safest choice.

What is the best Open Graph image size?

Use 1200 by 630 pixels, a ratio near 1.91 to 1. This fills the large card cleanly across platforms. Keep the file under a few hundred kilobytes so it loads fast for crawlers.

Do Open Graph tags affect Google rankings?

Not directly. Google does not use them as a ranking signal. They shape how links look when shared, which can lift traffic and engagement, but they are separate from your title tag and meta description for search.

Can I use Open Graph tags without a CMS?

Yes. They are plain HTML meta tags. Paste them into any page's head, whether it is hand-coded, static, or built with a framework. No plugin is required.

What happens if a page has no Open Graph tags at all?

The platform guesses. It pulls the page title, a stray line of text, and the first image it finds, which often produces a messy or blank card. Setting the tags removes the guesswork.

Frequently Asked Questions

What are Open Graph tags?
They are meta tags in a page's that tell social platforms how to display the page when shared, controlling the preview title, description, image and type. They were created by Facebook and are now read by nearly every platform.
What image size should I use?
For a large preview card, use 1200x630 pixels (a 1.91:1 ratio). Smaller images may be cropped or fall back to a small thumbnail. Always use an absolute URL, not a relative path.
Do I need Twitter Card tags if I have Open Graph?
X/Twitter falls back to Open Graph tags for most fields, but adding twitter:card explicitly lets you control whether the preview uses a large or small image. This generator includes both for full coverage.
Where do I put these tags?
Paste them inside the section of your page's HTML, alongside your title and description tags. After publishing, test with a platform's sharing debugger to confirm the preview looks right.

Related Free Tools

🔗 Slug GeneratorTurn any title into a clean SEO-friendly URL slug. 📊 UTM Link BuilderAdd UTM campaign tracking parameters to any URL. 🧩 JSON FormatterBeautify, minify and validate JSON with clear error messages.

More Link & Marketing Tools

WhatsApp Link GeneratorMailto Link GeneratorPayPal Link GeneratorQR Code GeneratorPassword Generator

Browse all generators →