Open Graph / Twitter Card Preview

Generate Open Graph tags and preview how your links will look on social media.

Open Graph Details

OG Title

OG Description

Image URL

Page URL

Site Name

Facebook / LinkedIn

example.com

My Awesome Website

Check out this amazing content that I built using React and Tailwind CSS.

Twitter (Summary Large Image)

My Awesome Website

Check out this amazing content that I built using React and Tailwind CSS.

example.com

Open Graph Tags (HTML)

<!-- Open Graph / Facebook -->\n<meta property="og:type" content="website">\n<meta property="og:url" content="${url}">\n<meta property="og:title" content="${title}">\n<meta property="og:description" content="${description}">\n<meta property="og:image" content="${imageUrl}">\n<meta property="og:site_name" content="${siteName}">\n\n<!-- Twitter -->\n<meta property="twitter:card" content="summary_large_image">\n<meta property="twitter:url" content="${url}">\n<meta property="twitter:title" content="${title}">\n<meta property="twitter:description" content="${description}">\n<meta property="twitter:image" content="${imageUrl}">

Runs locally in your browser. 100% private & secure.

About Open Graph / Twitter Card Preview

What is Open Graph?

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used by Facebook to allow any web page to have the same functionality as any other object on Facebook.

Why use Twitter Cards?

With Twitter Cards, you can attach rich photos, videos, and media experiences to Tweets, helping to drive traffic to your website. If Twitter Card meta tags are absent, Twitter will fallback to using Open Graph tags.

Frequently Asked Questions

Why do I need both Open Graph and Twitter tags?

Open Graph (og:*) is an open standard used by Facebook, LinkedIn, Discord, and most other platforms. Twitter has its own specific tags (twitter:*) for rendering rich cards in tweets, though it will often fallback to Open Graph if Twitter tags are missing.

Related Tools

View all in Developer Tools

Base64 Encoder / Decoder

Popular

Encode and decode Base64 strings.

JSON Formatter & Validator

Popular

Format, validate, and minify JSON.

URL Encoder / Decoder

Encode and decode URLs and query strings.