OG
OGProof
Guide7 min read

Facebook Open Graph Tags: The Complete Setup Guide

How to configure Open Graph tags so your links look great when shared on Facebook — required tags, image specs, cache behavior, and how to use the Facebook Sharing Debugger.

Facebook's link preview system is powered by the Open Graph protocol — the same protocol Facebook invented in 2010. When someone shares your URL on Facebook, their crawler reads your OG meta tags and builds a preview card. Getting these right means the difference between a compelling share with a large image and title, and a plain text link that nobody clicks.

How Facebook Reads Open Graph Tags

Facebook's crawler is called facebookexternalhit. It makes an HTTP request to your page using the user-agent string facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php), reads the raw HTML response, and extracts the meta tags. It does not execute JavaScript — so tags injected by React, Vue, or other frameworks after page load are invisible to it.

Facebook reads the og: namespace tags and additionally supports the article: namespace for editorial content. It ignores twitter:* tags. The four tags Facebook requires for a rich preview card are og:title, og:description, og:image, and og:url.

Minimum Required Tags for Facebook

<!-- Minimum for a Facebook link card with image -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A concise 1–2 sentence summary." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/your-page" />
Tipog:url is especially important on Facebook — Facebook uses it as the canonical identifier for deduplication and for aggregating social engagement counts (likes, comments, shares) across all places your URL is shared. If og:url differs from the actual page URL, Facebook may split your engagement across two separate entries.

Full Recommended Tag Set for Facebook

<!-- Complete OG setup for Facebook -->
<meta property="og:title" content="Your Page Title — Under 100 Characters" />
<meta property="og:description" content="A compelling summary. Facebook shows approximately 300 characters before truncating." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive alt text for accessibility" />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Brand Name" />

Facebook Image Requirements

Image size matters significantly on Facebook. There are three tiers of image display depending on dimensions:

  • —Below 200×200px — image is not displayed at all. A text-only card is shown.
  • —200×200px to 599×314px — image shown as a small inline thumbnail to the right of the text.
  • —600×315px and above — image shown as a large full-width preview card. This is what you want.
  • —Recommended: 1200×630px (1.91:1 aspect ratio) — optimal for all Facebook surfaces.
  • —Max file size: no hard limit documented; keep under 8MB.
  • —Formats: JPEG or PNG. WebP has inconsistent support on Facebook.
  • —Protocol: HTTPS required — HTTP image URLs are not displayed.
TipUse 1200×630px JPEG or PNG. This gives you the large-format card on Facebook, falls within all platform minimums, and uses the 1.91:1 ratio that Facebook, LinkedIn, and most other platforms prefer.

Facebook Open Graph for Article Pages

For blog posts, news articles, and editorial content, set og:type to "article" and include the article: namespace tags. Facebook uses these for news feed ranking and structured data about the content:

<!-- For blog posts and articles -->
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-05-14T09:00:00Z" />
<meta property="article:modified_time" content="2026-05-14T09:00:00Z" />
<meta property="article:author" content="https://www.facebook.com/yourprofile" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="open graph" />
<meta property="article:tag" content="facebook" />
<meta property="article:tag" content="seo" />

For all other pages, use og:type="website". Facebook also supports og:type values for music, video, and product, but "website" and "article" cover the vast majority of use cases.

Facebook's Caching Behavior

Facebook caches OG previews for approximately 30 days after the first crawl — the longest caching window of any major social platform. This means that if you share a URL and later fix your OG tags, Facebook will continue showing the old (broken) preview for up to a month unless you manually force a re-crawl.

Common situations where Facebook's cache causes problems:

  • —You shared a URL before adding the og:image — Facebook cached the text-only card and keeps showing it.
  • —You updated the og:title or og:description — Facebook shows the old content to anyone who sees a cached share.
  • —You replaced the image at the same URL — Facebook cached the old image.
  • —You fixed a broken og:url — Facebook may have already associated the URL with the old deduplication key.

How to Force a Facebook Cache Re-Crawl

Facebook provides an official tool for forcing a re-crawl: the Facebook Sharing Debugger (also called the Open Graph Object Debugger). You need a Facebook developer account to use it.

  1. 1.Go to developers.facebook.com/tools/debug (requires Facebook login).
  2. 2.Enter the full URL of your page in the input field.
  3. 3.Click Debug — Facebook fetches your page and shows what its crawler currently reads.
  4. 4.If the preview is outdated, click Scrape Again — this forces a fresh crawl and updates the cache.
  5. 5.The tool also shows any OG tag warnings and errors with suggested fixes.
TipClicking Scrape Again only updates Facebook's cache for future shares. Existing posts that have already been shared will continue showing the old cached preview — the cache is per-URL for deduplication, but individual posts are not retroactively updated.

Facebook Open Graph Tags in Next.js

In Next.js App Router, configure Facebook-compatible OG tags using the built-in Metadata API. The openGraph object maps directly to og: namespace tags:

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

interface Props {
  params: Promise<{ slug: string }>
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)

  if (!post) return { title: 'Not Found' }

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      url: `https://example.com/blog/${slug}`,
      siteName: 'Your Brand',
      type: 'article',
      publishedTime: post.publishedAt,
      modifiedTime: post.updatedAt,
      authors: ['https://example.com/about'],
      section: 'Technology',
      tags: post.tags,
      images: [
        {
          url: `https://example.com/blog/${slug}/og.jpg`,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
    },
    // Twitter tags are separate — Facebook ignores them
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.description,
    },
  }
}

Next.js automatically maps the openGraph.type = 'article' to og:type="article" and injects article:published_time, article:modified_time, and article:tag from the corresponding fields. You get Facebook's full article namespace support with no manual <meta> tags.

Common Facebook OG Tag Mistakes

  1. 1.Image below 200×200px — Facebook hides the image and shows a text-only card. No error or warning is displayed.
  2. 2.Relative og:image URL — Facebook cannot resolve relative paths. Always use an absolute HTTPS URL.
  3. 3.HTTP (not HTTPS) og:image — Facebook will not display HTTP images.
  4. 4.Missing og:url — Facebook cannot aggregate social engagement counts without a canonical URL. Every unique og:url gets its own like/share count.
  5. 5.og:url mismatch — if og:url points to a different URL than the actual page, Facebook uses og:url for deduplication, which can cause ghost entries and split engagement.
  6. 6.OG tags set by JavaScript — facebookexternalhit does not execute JavaScript. Tags must be in the server-rendered HTML.
  7. 7.Not using the Sharing Debugger after changes — Facebook's 30-day cache means your fix won't appear without a manual re-crawl.

What Facebook Actually Sees

You can simulate a Facebook crawl with curl to verify exactly what facebookexternalhit reads from your page:

# Fetch your page as facebookexternalhit and extract OG tags
curl -s -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" \
  "https://example.com/your-page" | grep -i 'og:'

# Expected output for a well-configured page:
# <meta property="og:title" content="Your Title" />
# <meta property="og:description" content="Your description." />
# <meta property="og:image" content="https://example.com/og.jpg" />
# <meta property="og:image:width" content="1200" />
# <meta property="og:image:height" content="630" />
# <meta property="og:url" content="https://example.com/your-page" />
# <meta property="og:type" content="website" />

# If this returns nothing: OG tags are missing from server HTML.
# If og:image is missing: Facebook will show a text-only card.

OGProof runs this check automatically for all six platforms at once — including Facebook's facebookexternalhit user-agent — and renders an accurate visual preview of what Facebook will display. It flags missing tags, image size violations, HTTPS issues, and og:url mismatches with specific fix instructions.

Multiple Images with og:image

Facebook supports multiple og:image tags on a single page. When multiple images are present, Facebook picks the best one — typically the largest image that meets its dimension requirements. You can use this to provide both a landscape image for large-format cards and a square image as a fallback:

<!-- Primary: large format card image -->
<meta property="og:image" content="https://example.com/og-landscape.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Fallback: square image for contexts where landscape doesn't work -->
<meta property="og:image" content="https://example.com/og-square.jpg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />

Each og:image group (og:image, og:image:width, og:image:height, og:image:alt) is associated in order of appearance. Facebook selects from the available images based on the sharing context.

Facebook OG Tag Checklist

  • —og:title — present, under 100 characters for best display
  • —og:description — present, under 300 characters
  • —og:image — absolute HTTPS URL, minimum 200×200px, ideally 1200×630px
  • —og:image:width and og:image:height — always include for fast rendering
  • —og:url — set to the exact canonical URL of the page
  • —og:type — "website" for landing pages, "article" for editorial content
  • —og:site_name — your brand name
  • —For articles: include article:published_time and article:author
  • —OG tags must be in server-rendered HTML (not injected by JavaScript)
  • —After fixing tags: use the Facebook Sharing Debugger to force a re-crawl
  • —Validate with OGProof to confirm facebookexternalhit sees correct tags

Validate your OG tags now

Paste any URL and see exactly how it renders on Twitter, LinkedIn, Facebook, Discord, Slack, and iMessage — in seconds.

Try OGProof free →
← All articles