Free Converter

OG Tag Generator

Generate Open Graph meta tags for Facebook, Twitter, and LinkedIn. Free OG tag generator with live social card preview.

og:title0/95

og:description0/200

og:url

og:image

og:type

og:site_name

og:locale

Facebook Preview

YOURWEBSITE.COM

Your page title (max 95 chars)

A brief description of your page (max 200 chars)

Generated HTML

<!-- Open Graph Tags -->
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

About Open Graph Tag Generation

Open Graph (OG) tags control how a page appears when shared on social platforms. Facebook, LinkedIn, Slack, Discord, and many others read OG tags to construct preview cards. Without proper OG tags, shared links look broken — generic favicons, missing images, truncated titles. With them, shares look polished and click-through rates improve significantly.

The standard OG tags: og:title (the title shown in the preview), og:description (the snippet of text), og:image (the preview image, ideally 1200×630), og:url (canonical URL), og:type (typically 'website' or 'article'). Twitter Card tags layer on top: twitter:card, twitter:title, twitter:description, twitter:image. Most tools fall back to OG when Twitter-specific tags are absent.

This generator produces a complete set of OG and Twitter Card tags from your input. Paste the resulting HTML into the page's <head>. The result is correct preview rendering across all major social platforms.

Why Use an OG Tag Generator

Pages without OG tags look bad when shared. Empty image, generic title, missing description — the preview competes poorly against properly-tagged pages in feeds. For content marketing and link sharing, this directly affects click-through rate.

Hand-writing OG tags is repetitive. Each page needs its own set. A generator that produces correct tags from a few inputs avoids the typos and missed properties that break social previews.

How to Generate OG Tags

Fill in the inputs, get the tags.

Enter title and description: These are what appear in the share preview. Keep title under 60 characters and description under 200 characters for clean display across platforms.
Provide an image URL: 1200×630 pixels is the standard size. Use an absolute URL (https://example.com/og-image.png). Image must be publicly accessible — authenticated images break previews.
Set the canonical URL: The URL of the page itself. Used as og:url and helps platforms identify the canonical resource even when shared via redirect URLs.
Choose page type: website for general pages, article for blog posts and news, product for e-commerce. Affects how some platforms render the preview.
Copy the generated tags: The tool produces HTML link tags ready to paste into the page's <head>. Apply via your CMS, template engine, or directly in HTML.

Common Use Cases

Setting up OG for new pages — Every new page that will be shared on social needs OG tags. Generation produces them from minimal input.
Migrating to a new CMS — After CMS migration, OG tags often break. Regenerating from canonical content fixes them.
Producing OG for e-commerce product pages — Product pages benefit from product-specific OG (og:type=product, plus product price and availability schema). Generators that support this produce richer previews.
Adding OG to legacy sites without templates — Older sites without templating need OG added per-page. Generation produces the tags; you paste them in each page's HTML.
Testing OG variations — Quickly producing variants for A/B testing helps optimize click-through rates.

Technical Details

OG tags use the meta property attribute (not name): <meta property="og:title" content="..." />. The property attribute is required for OG; some parsers accept name as a fallback but property is correct.

Image requirements: 1200×630 pixels for retina rendering, 1.91:1 aspect ratio. og:image:width and og:image:height tags help platforms cache images correctly. og:image:alt provides accessibility text.

Twitter Card tags use name attribute: <meta name="twitter:title" content="..." />. Twitter falls back to OG tags when Twitter-specific are absent, so well-set OG often suffices. Adding twitter:card explicitly chooses card type (summary_large_image is most common).

Best Practices

Use 1200×630 images — It is the standard size that displays cleanly on retina screens across all platforms. Smaller images get scaled up and look blurry.
Keep titles concise — Under 60 characters is the safe range. Longer titles may be truncated by platforms. Front-load important words.
Set explicit OG — Don't rely on platform fallback. A page with no og:image gets whatever Facebook decides to show. Explicit tags produce predictable previews.
Use absolute URLs everywhere — All URLs in OG tags must be absolute (https://...). Relative URLs are not valid in OG metadata.

Frequently Asked Questions

What size should og:image be?: 1200×630 pixels at 1.91:1 aspect ratio. This displays cleanly on retina screens and at typical share sizes. Smaller images get scaled up and blur.
Should I include Twitter-specific tags?: Twitter falls back to OG when Twitter-specific are absent, so well-configured OG usually suffices. For explicit control, add twitter:card and other twitter:* tags.
Why does my Facebook share show the wrong image?: Most often Facebook is using a cached version. Use Facebook's Sharing Debugger to clear the cache after updating OG tags.
What's og:type?: Specifies the kind of object. Common values: website, article, product, video, music, profile. Affects how platforms render the preview.
Can I use the same OG image for every page?: Possible but suboptimal. Page-specific images outperform generic site-wide images for click-through. Use a default for fallback but produce per-page images for important content.
Is image dimension declaration needed?: Helpful but not strictly required. og:image:width and og:image:height let platforms cache images without re-fetching to determine dimensions. Speeds up subsequent shares.
Is my data uploaded?: No. Generation happens in your browser.
How do I test OG tags?: Facebook Sharing Debugger, Twitter Card Validator, and LinkedIn Post Inspector each fetch and validate. Use them after deploying new OG tags.