Open Graph Meta Tags: Complete Guide

What Are Open Graph Tags?

Open Graph (OG) tags control how your page looks when shared on social media — Facebook, LinkedIn, Twitter, Slack, Discord, and more. Without them, platforms pick random text and images from your page.

Required OG Tags

<meta property="og:title" content="Your Page Title">

<meta property="og:description" content="A compelling description under 200 chars">

<meta property="og:image" content="https://yoursite.com/og-image.png">

<meta property="og:url" content="https://yoursite.com/page">

<meta property="og:type" content="website">

<meta property="og:site_name" content="Your Site Name">

Image Requirements

- **Recommended size:** 1200 x 630 pixels

- **Minimum size:** 600 x 315 pixels

- **Format:** PNG or JPG (not SVG)

- **File size:** Under 5MB (ideally under 1MB)

Twitter Card Tags

Twitter uses its own tags but falls back to OG tags if missing:

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

<meta name="twitter:title" content="Your Title">

<meta name="twitter:description" content="Your description">

<meta name="twitter:image" content="https://yoursite.com/twitter-image.png">

Common Mistakes

1. **Missing og:image** — The #1 mistake. Without it, no preview image on social shares.

2. **og:image using relative URL** — Must be absolute: `https://yoursite.com/image.png`

3. **Image too small** — Under 200x200px won't display on most platforms.

4. **og:url doesn't match canonical** — These should point to the same URL.

Test Your OG Tags

Use [SEO Snapshot](/) to validate all 6 OG tags and check if your og:image URL is accessible. We also verify Twitter Card tags and show what's missing.