Open Graph Meta Generator

Generate Open Graph and Twitter Card meta tags so your page looks great when shared on social media.

Category: web

Use Case: Optimizing Link Previews on Social Media, Adding Open Graph Tags to a New Site, Fixing a Blank Share Preview

Privacy: 100% browser-based

Title

Description

Page URL

Image URL

Site Name

Type

Twitter Card

Generated meta tags

<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="A short, compelling description of the page." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:site_name" content="My Site" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Page Title" />
<meta name="twitter:description" content="A short, compelling description of the page." />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Recommended Settings

Pro Tips

•Paste these tags inside your page's <head> section - most platforms (Facebook, LinkedIn, Slack, Discord) read Open Graph tags, while Twitter/X reads its own Twitter Card tags
•Use an absolute URL (starting with https://) for the image, not a relative path, since social platforms fetch it directly from their own servers
•summary_large_image shows a big banner-style preview image, while summary shows a small square thumbnail alongside the text
•Keep descriptions under about 200 characters, since most platforms truncate longer text in the preview card

Most Popular

Most sites use type 'website' and Twitter Card 'summary_large_image' for the richest-looking link preview

When to Use This Tool

Optimizing Link Previews on Social Media

Control exactly how your page's title, description, and image appear when shared.

Adding Open Graph Tags to a New Site

Generate a complete, ready-to-paste set of meta tags for a new page.

Fixing a Blank Share Preview

Add the missing og:image or og:title tag causing a link to preview without an image or title.

Setting Up Twitter Card Previews

Add the specific twitter: meta tags needed for a rich preview on X/Twitter.

How It Works

Take the title, description, URL, image, and other details you provide

Format each one into the corresponding Open Graph (og:) and Twitter Card (twitter:) meta tag

Escape special characters in attribute values to produce valid HTML

100% Private

Files never leave your device. All processing happens locally in your browser.

Lightning Fast

Open Source

Built with verified, open-source libraries. Fully transparent.

Frequently Asked Questions

Where do I put these tags?

Paste them inside the <head> section of your HTML page, ideally as close to the top as possible so crawlers find them quickly.

Why isn't my new preview showing up on Facebook or Twitter?

Most platforms cache link previews. Use Facebook's Sharing Debugger or Twitter's Card Validator to force them to re-scrape your page after updating the tags.

Do I need both Open Graph and Twitter Card tags?

Twitter/X will fall back to Open Graph tags if Twitter Card tags aren't present, but providing both gives you more precise control over how the preview looks on each platform.

What image size should I use?

For summary_large_image, an image around 1200x630 pixels is the widely recommended size for a crisp, properly cropped preview.

Related Tools

web

MIME Types

Browse MIME types

Try it now

web

Slugify String

Slugify strings

Try it now

web

HTML WYSIWYG Editor

Edit HTML with WYSIWYG

Try it now