Social

Open Graph Tags: Make Your Links Look Great on Social Media

Open Graph (OG) tags control how your page appears when shared on Facebook, LinkedIn, Slack, Discord, and other platforms. Without them, social shares look broken with missing images and generic descriptions.

Last updated: February 20, 2026

Quick Summary

Open Graph tags control how your page looks when shared on social media
Required tags: og:title, og:description, og:image, og:url
Recommended image size is 1200x630 pixels for best display
Missing OG tags mean social shares look broken - no image, generic text

Does your site have this issue?

Run a free scan to find out.

Scan Your Site

What are Open Graph tags?

Open Graph is a protocol created by Facebook that uses meta tags to control how your content appears when shared on social platforms:

html<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description of your page">
<meta property="og:image" content="https://yoursite.com/og-image.jpg">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:type" content="website">

When someone shares your URL on Facebook, LinkedIn, Slack, Discord, or iMessage, these platforms read the OG tags to generate a rich preview card with image, title, and description.

Why OG tags matter for SEO

Social engagement drives traffic: Rich social previews with compelling images get 2-3x more clicks than plain text links.

Brand consistency: Without OG tags, platforms guess which image and text to show, often picking the wrong ones.

Indirect SEO value: Social shares generate traffic, brand awareness, and sometimes backlinks. All of these indirectly support your SEO.

Messaging apps: OG tags also work in WhatsApp, Slack, Discord, iMessage, and Teams. A huge amount of content sharing happens in private messages.

How to implement Open Graph tags

Required tags: - og:title - Your page title (can differ from the HTML title tag) - og:description - 2-4 sentence description - og:image - URL to your preview image (1200x630px recommended) - og:url - Canonical URL of the page

Recommended tags: - og:type - "website", "article", "product", etc. - og:site_name - Your website name - og:locale - Language/locale (e.g., "en_US")

Next.js implementation: ``typescript export const metadata = { openGraph: { title: "Your Page Title", description: "Compelling description", images: [{ url: "/og-image.jpg", width: 1200, height: 630 }], url: "https://yoursite.com/page", type: "website", }, }``

Image best practices: - Size: 1200x630 pixels (1.91:1 ratio) - File size: Under 5MB (ideally under 1MB) - Format: JPG or PNG - Include text on the image for context - Use unique images per page when possible

Official Google Sources

Google Search Central: Social sharing and SEO

Frequently Asked Questions

Are Open Graph tags a Google ranking factor?

No, Google does not use OG tags for ranking. However, they improve social sharing which drives traffic and brand awareness that indirectly supports SEO.

Do I need both OG tags and Twitter Card tags?

Twitter/X can fall back to OG tags, but having both gives you control over each platform. Twitter Cards offer a different format (summary_large_image) that works better on Twitter.

Why is my shared link not showing the right image?

Platforms cache OG data. Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug) to clear the cache and fetch fresh data.

What size should my OG image be?

1200x630 pixels (1.91:1 ratio) is the recommended size that works well across Facebook, LinkedIn, Twitter, and messaging apps.

Related Guides

Meta Tags

Ready to fix this on your site?

Our scanner checks for this and 150+ other ranking factors automatically.

Get Started Free