Open Graph Meta Tags | OpenGraphDebug.com

Open Graph meta tags control how your pages appear when shared on social platforms. Without them, platforms guess. With them, you decide the title, description, image, and URL that show up.

This post shows the essential Open Graph tags, how to add them, and common mistakes to avoid.

What Are Open Graph Meta Tags?

Open Graph (OG) tags are HTML <meta> tags placed in the <head> of your page. They were introduced by Facebook and are now used by most social platforms.

They tell platforms:

What title to show
What description to display
Which image to use
Which URL is canonical

Essential Open Graph Meta Tags (Minimum Setup)

Every page should have at least these four tags:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Short description of the page" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page" />

If you only add these, most previews will already look correct.

Recommended Additional Open Graph Tags

These improve reliability and formatting:

<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example Site" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Explicit image dimensions reduce cropping and preview issues. Check out our guide on Open Graph image requirements for the best practices and recommendations for creating an Open Graph image that actually works.

Complete Open Graph Tags Example (Copy-Paste)

<head>
    <title>Your Page Title</title>

    <meta property="og:title" content="Your Page Title" />
    <meta
        property="og:description"
        content="Clear, short description of the page"
    />
    <meta property="og:image" content="https://example.com/og-image.jpg" />
    <meta property="og:url" content="https://example.com/page" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Example Site" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
</head>

This setup works for Facebook, Twitter/X, LinkedIn, Slack, Discord, and more.

Character Length Guidelines

og:title: up to ~60 characters
og:description: 110–160 characters
og:image: 1200×630 px recommended

Longer text usually gets truncated.

Common Open Graph Mistakes

Using relative image URLs

❌ /og-image.jpg ✅ https://example.com/og-image.jpg

Forgetting og:image Platforms may show a random image or none at all.
Duplicate tags Multiple og:title or og:image tags confuse crawlers.
Relying on cache updates Platforms cache aggressively. Changes may not show immediately.

How to Test Your Open Graph Tags

Use our Open Graph checker tool:

Paste your URL
Verify title, description, and image
Always test the final production URL, not localhost.

Final Advice

If you remember only one thing:

Open Graph tags are not optional metadata. They are part of your UI.

Add them once, do them correctly, and your links will consistently look professional everywhere they are shared.