Facebook Open Graph Preview Guide

How Facebook Uses Open Graph Tags

Facebook was the original creator of the Open Graph protocol in 2010, and it remains the platform with the most comprehensive OG tag support. Facebook uses OG tags to generate rich link previews in posts, comments, and messages.

Where Facebook Shows Open Graph Previews

• News Feed - When users share links in posts
• Comments - Link previews in comment threads
• Messages - Preview cards in Facebook Messenger
• Groups - Link previews in group posts
• Pages - When pages share content

Image Best Practices for Facebook

• Use high-quality images with good contrast
• Keep text large and readable (minimum 40px font size)
• Leave a 100px safe zone around edges (Facebook may crop slightly)
• Include your brand logo or visual identity
• Test on both desktop and mobile views
• Avoid placing important content in the bottom 20% (where Facebook shows the domain)

Required Facebook Open Graph Tags

Facebook requires these four essential Open Graph tags for proper link previews:

<!-- Essential Open Graph Tags for Facebook -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

Recommended Additional Tags

• og:site_name - Your site name (appears below the title)
• og:locale - Language locale (e.g., en_US, es_ES)
• og:image:width and og:image:height - Image dimensions for faster rendering
• og:image:alt - Alt text for accessibility

Article-Specific Tags

For blog posts and articles, include these additional tags:

• og:type - Set to "article"
• article:published_time - Publication date
• article:author - Author information
• article:section - Article category

Common Facebook Open Graph Mistakes

1. Relative Image URLs

❌ <meta property="og:image" content="/images/og.jpg" />

✅ <meta property="og:image" content="https://example.com/images/og.jpg" />

Facebook requires absolute URLs with the full protocol. Relative paths will not work.

2. Images That Are Too Small

While Facebook accepts images as small as 200×200px, they will appear pixelated and unprofessional:

• Minimum recommended: 600×315px
• Optimal: 1200×630px
• Always use high-resolution images for crisp display

3. Missing Image Dimensions

Including image dimensions helps Facebook render previews faster:

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

4. Not Clearing Facebook's Cache

Facebook aggressively caches Open Graph data. After updating your tags:

1. Use the Facebook Sharing Debugger
2. Enter your URL and click "Scrape Again"
3. This forces Facebook to refresh the cached data

5. Client-Side Meta Tags

Facebook's crawler doesn't execute JavaScript. Meta tags must be in the initial HTML response:

• Use Server-Side Rendering (SSR) or Static Site Generation (SSG)
• Avoid injecting meta tags with JavaScript after page load
• Test by viewing page source (not rendered HTML)

Debugging Facebook Link Previews

Facebook provides powerful debugging tools to test and fix your Open Graph tags:

Facebook Sharing Debugger

The Facebook Sharing Debugger is the official tool for:

• Previewing how your link will appear on Facebook
• Viewing all detected Open Graph tags
• Clearing Facebook's cache for your URL
• Identifying errors and warnings

Common Debugger Warnings

• "Image too small" - Use at least 600×315px
• "Missing og:image" - Add the required image tag
• "Cached version" - Click "Scrape Again" to refresh
• "Invalid URL" - Ensure image URL is absolute and accessible

Optimizing for Facebook Engagement

Well-optimized Open Graph tags can significantly improve engagement:

Title Best Practices

• Keep titles between 40-60 characters
• Make them compelling and action-oriented
• Include relevant keywords naturally
• Avoid clickbait - Facebook may penalize misleading titles

Description Best Practices

• Optimal length: 150-160 characters
• Write clear, benefit-focused descriptions
• Include a call-to-action when appropriate
• Use active voice and engaging language

Image Best Practices

• Use images that tell a story
• Include faces or recognizable elements
• Use bright, contrasting colors
• Test how images appear in both light and dark mode

Implementation Examples

Nuxt 3

useSeoMeta({
  ogTitle: 'Your Page Title',
  ogDescription: 'Your compelling description',
  ogImage: 'https://example.com/og-image.jpg',
  ogUrl: 'https://example.com/page',
  ogType: 'website',
  ogSiteName: 'Your Site Name',
  ogLocale: 'en_US',
  ogImageWidth: '1200',
  ogImageHeight: '630',
  ogImageAlt: 'Descriptive alt text'
})

Next.js 14+

export const metadata = {
  openGraph: {
    title: 'Your Page Title',
    description: 'Your compelling description',
    images: [{
      url: 'https://example.com/og-image.jpg',
      width: 1200,
      height: 630,
      alt: 'Descriptive alt text'
    }],
    url: 'https://example.com/page',
    siteName: 'Your Site Name',
    locale: 'en_US',
    type: 'website'
  }
}

Related Resources

• Twitter Open Graph Guide
• LinkedIn Open Graph Guide
• Complete Facebook Link Preview Guide
• OG Image Size Guide
• Open Graph Debugging Guide
• Facebook Open Graph Documentation