Open Graph Meta Tag Generator

Open Graph tags are the small pieces of HTML that decide how your page looks when someone shares it on Facebook, LinkedIn, Slack, Discord or X (Twitter). Fill in a title, description, URL, image and a few options below, watch the share-card preview update instantly, and copy the generated <meta> tags straight into your page's <head>. Everything runs in your browser — nothing is sent to a server.

What Is This Tool?

Open Graph is a protocol, originally created by Facebook, that lets any web page describe itself with a small set of <meta property="og:..."> tags placed in the HTML <head>. When someone pastes your link into a social app, chat client, or messaging tool, that app reads these tags to build the preview card — title, description, and thumbnail image — instead of guessing from the page content.

Twitter (X) uses a related but separate set of tags, <meta name="twitter:...">, to control how a link previews specifically on its platform. Most sites set both: Open Graph tags for broad compatibility, and Twitter Card tags to fine-tune the X preview (for example, choosing a large image card versus a small summary card).

Without these tags, a shared link either shows no preview at all, or the platform tries to guess a title and image from your page's raw content — often picking the wrong headline, a random inline image, or nothing. Setting og:title, og:description and og:image explicitly gives you full control over how your content is presented before anyone clicks.

Why Use It?

Live preview — see exactly how the share card will look as you type, before you publish anything.
Generates both Open Graph tags (og:title, og:description, og:image, og:url, og:type, og:site_name) and Twitter Card tags in one pass.
Covers the fields platforms actually read: title, description, canonical URL, image, site name, content type, and Twitter card style.
Runs entirely client-side — your title, description, and URLs never leave your browser.
Free, no login, no rate limit — copy the output and paste it into your HTML.

How to Use

Enter your page's title and a short description (aim for under ~60 characters for the title, ~155–160 for the description).
Enter the canonical URL of the page and the absolute URL of the preview image (image URLs must be fully qualified, e.g. https://example.com/image.jpg, not a relative path).
Optionally set the site name, choose an og:type (website, article, product, profile, video, music), and pick a Twitter Card type (summary or summary_large_image).
Check the live preview card to confirm the title, description and image look right together.
Click "Copy" and paste the generated <meta> tags into your page's <head>, before the closing </head> tag.

Example

Input

Title: "10 Free Developer Tools You'll Actually Use"
Description: "A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required."
URL: https://example.com/blog/dev-tools
Image: https://example.com/images/dev-tools-cover.jpg

Output

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Only fields you fill in are included, so leaving site name blank simply omits og:site_name from the output.

Common mistakes to avoid

Missing og:image entirely — without it, most platforms either show no preview image or fall back to a random image scraped from the page, which usually looks broken or unprofessional.
Using a relative image path like /images/cover.jpg instead of a full URL like https://example.com/images/cover.jpg — social crawlers generally can't resolve relative paths.
Wrong image aspect ratio — a square or portrait image gets awkwardly cropped when platforms force it into the 1.91:1 landscape frame; always design your share image at or near 1200×630.
Titles or descriptions that get truncated — keep og:title under ~60 characters and og:description under ~155–160 characters so they don't get cut off with an ellipsis on most platforms.
Forgetting to update cached previews — after changing og tags on a live page, the old preview can persist in Facebook's or LinkedIn's cache until you manually force a re-scrape with their debugging tools.

Where each tag is used

og:title, og:description and og:image are the three tags almost every platform reads to build a preview. og:url tells crawlers the canonical link to associate the preview with, which matters if the same content is reachable through multiple URLs. og:site_name shows a small label (like the publication or brand name) above the title on some platforms, such as Facebook.

og:type changes what kind of object the page represents to crawlers that support Open Graph's richer object model — for example, article enables og:article:published_time and og:article:author on platforms that read them, though most social previews ignore these extra fields and only use the core title/description/image trio.

twitter:card controls the layout on X specifically: summary shows a small square thumbnail next to the text, while summary_large_image shows a full-width image above the text — the latter is almost always the better choice for content with a meaningful cover image.

Frequently Asked Questions

What size should my og:image be?

1200×630px is the recommended size — it's large enough for high-DPI displays and matches the roughly 1.91:1 aspect ratio that Facebook, LinkedIn and X crop to. Keep the file under 5–8MB, use JPG or PNG, and make sure the image URL is a full absolute URL, not a relative path — most crawlers won't resolve relative image paths correctly.

Why isn't my preview showing up when I share the link?

The most common causes are: missing og:image, a relative rather than absolute image URL, the crawler being blocked by robots.txt, or the platform showing a cached version of an old preview. Facebook and LinkedIn both cache scraped previews aggressively — use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a re-scrape after you update your tags.

What's the difference between og: tags and twitter: tags?

og: tags (og:title, og:description, og:image, etc.) are the Open Graph standard, read by Facebook, LinkedIn, Slack, Discord, WhatsApp and most other platforms. twitter: tags are Twitter/X's own format. If twitter:title or twitter:image are missing, X falls back to the equivalent og: tag automatically — but setting both explicitly gives you more control, including choosing summary_large_image for a big preview image.

What og:type should I use?

"website" is the safe default for most pages, including homepages and general content. Use "article" for blog posts and news pieces (it unlocks additional article-specific tags like published time), "product" for e-commerce pages, and "profile" for personal or user profile pages. The type mainly affects which extra Open Graph properties are valid, not how the basic preview card looks.

Does this tool store or send my data anywhere?

No. All generation happens locally in your browser using plain JavaScript. Nothing you type is transmitted, logged, or stored — closing the tab clears everything.