The Complete Guide to Open Graph Tags

Open Graph tags and Twitter Cards control how your content appears when shared on social media. Get them right, and your links get more clicks. Get them wrong, and your content looks broken — or worse, invisible.

Last updated: February 2026 12 min read

What Are Open Graph Tags?

Open Graph (OG) is a protocol originally created by Facebook in 2010 that allows web pages to become rich objects in a social graph. When you share a URL on Facebook, LinkedIn, Slack, Discord, or other platforms, the platform's crawler visits your page and looks for Open Graph meta tags in the <head> section of your HTML.

These tags tell the platform exactly what title, description, and image to display in the share preview card. Without them, platforms have to guess — and they often guess wrong.

Here's what a properly tagged link looks like versus an untagged one:

With OG tags: Rich card with custom image, compelling title, clear description
Without OG tags: Plain URL or auto-extracted text that may be cut off, irrelevant, or missing an image entirely

The Essential Open Graph Tags

There are four required Open Graph tags that every page should have:

og:title

The title of your content as it should appear in the share preview. This does not need to match your HTML <title> tag — in fact, it's often better to write a shorter, more compelling title specifically for social sharing.

<meta property="og:title" content="How We Increased Conversions by 340%" />

Best practices:

Keep it under 60 characters (Twitter truncates around 70, Facebook around 65)
Front-load the most important words
Don't include your site name — use og:site_name for that

og:description

A brief summary of your content. This appears below the title in most preview cards.

<meta property="og:description" content="We tested 47 different landing page variations over 6 months. Here's exactly what worked and what didn't." />

Best practices:

Keep it between 50-160 characters
Make it compelling — this is your pitch to get the click
Include relevant keywords naturally

og:image

The image that appears in the share preview. This is the single most impactful tag — posts with images get significantly more engagement than those without.

<meta property="og:image" content="https://example.com/images/social-share.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Chart showing 340% conversion increase" />

Best practices:

Use an absolute URL (not relative)
Use HTTPS (some platforms block HTTP images)
Recommended size: 1200x630 pixels (1.91:1 ratio) — works well across all platforms
Always include og:image:width and og:image:height for faster rendering
Keep file size under 5MB
Add og:image:alt for accessibility

og:type

The type of content. Most pages should use website or article.

<meta property="og:type" content="article" />

Additional Recommended Tags

<meta property="og:url" content="https://example.com/blog/my-post" />
<meta property="og:site_name" content="My Website" />
<meta property="og:locale" content="en_US" />

Twitter Card Tags Explained

Twitter (now X) uses its own set of meta tags called Twitter Cards. While Twitter will fall back to Open Graph tags, setting Twitter-specific tags gives you more control over how your links appear on the platform.

twitter:card (Required)

Determines the card layout. The two most common types are:

summary — Small square thumbnail on the left, title and description on the right. Best for articles and general content.
summary_large_image — Large image spanning the full width, with title and description below. Best for visual content, blog posts with hero images, and product pages.

<meta name="twitter:card" content="summary_large_image" />

twitter:title & twitter:description

These override og:title and og:description specifically for Twitter. Only set these if you want a different title/description on Twitter versus other platforms.

twitter:image

The image for the Twitter card. If not set, Twitter falls back to og:image.

summary_large_image: Recommended 1200x675 (2:1 ratio), minimum 300x157
summary: Recommended 144x144 (1:1 ratio), minimum 144x144

twitter:site & twitter:creator

<meta name="twitter:site" content="@yourbrand" />
<meta name="twitter:creator" content="@authorname" />

Recommended Image Sizes for Every Platform

Each platform has its own preferred image dimensions. Here's a comprehensive reference:

Platform	Recommended Size	Aspect Ratio	Min Size	Max File Size
Twitter/X (large image)	1200 x 675	2:1	300 x 157	5 MB
Twitter/X (summary)	144 x 144	1:1	144 x 144	5 MB
Facebook	1200 x 630	1.91:1	200 x 200	8 MB
LinkedIn	1200 x 627	1.91:1	200 x 200	5 MB
Slack	800 x 418	~1.91:1	250 x 250	-
Discord	1200 x 675	~1.78:1	-	8 MB
Universal (safe default)	1200 x 630	1.91:1	-	-

Pro tip: If you can only create one image, make it 1200x630 pixels. This works acceptably well across all platforms. Twitter may crop slightly from the top and bottom, but the core content will be visible.

Complete Meta Tag Template

Copy this template and customize it for your pages:

<!-- Primary Meta Tags -->
<title>Your Page Title — Your Site</title>
<meta name="description" content="A compelling description of your page content." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="Your Share Title" />
<meta property="og:description" content="A compelling description for social sharing." />
<meta property="og:image" content="https://example.com/images/share.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />
<meta property="og:site_name" content="Your Site Name" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://example.com/page" />
<meta name="twitter:title" content="Your Share Title" />
<meta name="twitter:description" content="A compelling description for Twitter." />
<meta name="twitter:image" content="https://example.com/images/share.png" />
<meta name="twitter:site" content="@yourbrand" />

Common Mistakes and How to Fix Them

1. Missing og:image

This is the most common and most costly mistake. Without an image, your shared links blend into the feed and get dramatically fewer clicks. Always set an og:image, even if it's a generic branded fallback.

2. Using Relative Image URLs

og:image must be an absolute URL. /images/share.png won't work — you need https://example.com/images/share.png.

3. Image Too Small

If your image is under 200x200 pixels, most platforms will either not display it or show a tiny, blurry thumbnail. Always use at least 1200x630 for the best results.

4. HTTP Image on HTTPS Page

Mixed content is increasingly blocked. If your page is served over HTTPS, make sure your og:image URL also uses HTTPS.

5. Title Too Long

Titles over 60-70 characters get truncated with "..." on most platforms. Front-load the important information so it's visible even when cut off.

6. Missing twitter:card

Without the twitter:card meta tag, Twitter may not display a card preview at all — even if you have perfect Open Graph tags. Always include it.

7. Not Setting og:type

While platforms default to "website", explicitly setting og:type is a best practice. Use "article" for blog posts and "website" for everything else.

How Each Platform Reads Your Tags

Facebook

Uses Open Graph tags exclusively. Falls back to <title> and <meta name="description"> if OG tags are missing. Caches aggressively — use the Facebook Sharing Debugger to clear the cache.

Twitter / X

Checks for Twitter Card tags first, then falls back to Open Graph. Requires twitter:card to be set for any card to display. Caches for about 7 days.

Uses Open Graph tags. Prefers images at exactly 1200x627. Has its own Post Inspector for debugging.

Slack

Reads Open Graph tags and renders them as "unfurls." Shows a colored accent bar using the site's theme-color meta tag. Displays og:site_name prominently above the title.

Discord

Reads Open Graph tags and renders embed cards. Supports theme-color for the accent bar color. Shows large images for summary_large_image cards and thumbnails for summary cards.

Google

Uses structured data (JSON-LD) and standard meta tags primarily. Open Graph tags can influence rich snippets indirectly. The <title> tag and meta description are more important for Google than OG tags.

Testing Your Open Graph Tags

Before publishing, always test your meta tags to make sure they render correctly across platforms. You have a few options:

Use LinkPreview.io (Recommended)

LinkPreview.io lets you test your URL across all six platforms simultaneously — Twitter/X, Facebook, LinkedIn, Slack, Discord, and Google Search. You'll see both large and compact card variants, get a recommendation score, and receive actionable suggestions to improve your tags.

It's free, requires no signup, and gives you results in under 2 seconds. Try it now.

Platform-Specific Debuggers

Facebook: Sharing Debugger — also refreshes Facebook's cache
Twitter: Card Validator — requires a Twitter login
LinkedIn: Post Inspector — requires a LinkedIn login

Advanced Tips

Use Different Images per Platform

Since Twitter prefers a 2:1 aspect ratio while Facebook/LinkedIn prefer 1.91:1, you can set different images:

<meta property="og:image" content="https://example.com/images/share-fb.png" />
<meta name="twitter:image" content="https://example.com/images/share-twitter.png" />

Dynamic OG Images

For blogs and dynamic content, consider generating OG images programmatically using tools like Vercel's OG Image Generation, Cloudinary, or a custom service. This lets you include the post title, author photo, and branding automatically.

Cache Busting

If you update your OG tags but platforms still show the old preview, you need to clear their cache:

Facebook: Use the Sharing Debugger and click "Scrape Again"
Twitter: Wait ~7 days or use the Card Validator
Slack: Append a dummy query parameter to the URL (e.g., ?v=2)
LinkedIn: Use the Post Inspector

Don't Forget Structured Data

While Open Graph tags handle social sharing, JSON-LD structured data helps with Google's rich results. For the best coverage, use both:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Title",
  "image": "https://example.com/images/share.png",
  "datePublished": "2026-01-15",
  "author": { "@type": "Person", "name": "Author Name" }
}
</script>

Test Your Meta Tags Now

Use LinkPreview.io to see exactly how your links appear on Twitter/X, Facebook, LinkedIn, Slack, Discord, and Google — all in one place. It's free, instant, and requires no signup.

Validate Your URL →