Skip to main content

Facebook Open Graph Requirements

Complete guide to optimizing Open Graph tags for Facebook sharing

Overview

Facebook uses Open Graph protocol tags to understand and display your content when shared on the platform. These tags control the title, description, image, and other metadata that appear in Facebook posts, stories, and messages.

Facebook created the Open Graph protocol, so proper implementation ensures optimal display on the world's largest social network.

Required Tags

These four tags are required for Facebook to properly display your content:

og:title

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

Purpose: The title of your content as it should appear in the Facebook post.

Best practices:

  • Keep it between 60-90 characters for optimal display
  • Don't include your site name (Facebook adds it automatically)
  • Make it descriptive and engaging
  • Avoid ALL CAPS or excessive punctuation

og:type

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

Purpose: Defines the type of content.

Common values:

  • website - General web pages
  • article - Blog posts, news articles
  • video.movie - Movies
  • video.episode - TV episodes
  • music.song - Songs
  • product - Products for sale

og:image

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

Purpose: The image that appears when your content is shared.

Requirements:

  • Recommended size: 1200 x 630 pixels (1.91:1 aspect ratio)
  • Minimum size: 200 x 200 pixels
  • Maximum file size: 8 MB
  • Supported formats: JPG, PNG, WebP, GIF
  • Important: Must use absolute URL with HTTPS

og:url

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

Purpose: The canonical URL of your page.

Best practices:

  • Use the exact URL you want Facebook to associate with this content
  • Must be absolute URL (include protocol and domain)
  • Should match the canonical URL in your HTML <link rel="canonical">
  • Don't include session IDs or tracking parameters

Highly Recommended Tags

While not strictly required, these tags significantly improve how your content appears:

og:description

<meta property="og:description" content="Brief description of your content" />

Purpose: Summary that appears below the title.

Best practices:

  • Keep it between 155-200 characters
  • Make it compelling and actionable
  • Include relevant keywords naturally
  • Don't duplicate the title

og:site_name

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

Purpose: The name of your website (not the page title).

Example: "TechCrunch" or "The New York Times"

og:locale

<meta property="og:locale" content="en_US" />

Purpose: Language and region of the content.

Common values: en_US, en_GB, es_ES, fr_FR, de_DE

og:image:width & og:image:height

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

Purpose: Specify image dimensions to speed up rendering.

Facebook can display your image immediately without downloading it first.

Article-Specific Tags (For Blog Posts)

If your og:type is article, add these:

<meta property="article:published_time" content="2025-11-02T12:00:00Z" />
<meta property="article:modified_time" content="2025-11-02T15:30:00Z" />
<meta property="article:author" content="https://facebook.com/authorprofile" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="Open Graph" />
<meta property="article:tag" content="Facebook" />

Facebook-Specific Features

fb:app_id

<meta property="fb:app_id" content="123456789012345" />

Purpose: Links your website to your Facebook App for analytics and insights.

Get your App ID from the Facebook Developers Console.

Multiple Images

<meta property="og:image" content="https://example.com/image1.jpg" />
<meta property="og:image" content="https://example.com/image2.jpg" />
<meta property="og:image" content="https://example.com/image3.jpg" />

You can specify multiple images. Users can choose which one to use when sharing.

Testing & Debugging

Facebook Sharing Debugger

Always test your Open Graph tags using Facebook's official tool:

Open Facebook Sharing Debugger →

What it does:

  • Shows how Facebook sees your page
  • Validates your Open Graph tags
  • Clears Facebook's cache for your URL
  • Shows errors and warnings
  • Provides preview of how content will appear

Common Mistakes to Avoid

❌ Using Relative URLs

Always use absolute URLs with protocol (https://) for og:url and og:image. Facebook cannot resolve relative URLs.

❌ Small or Low-Quality Images

Images smaller than 200x200px won't display. Always use 1200x630px for best results.

❌ Not Testing After Changes

Facebook caches Open Graph data. Use the Sharing Debugger to clear cache after making changes.

❌ Blocking Facebook's Crawler

Ensure your robots.txt doesn't block "facebookexternalhit" user agent. Facebook needs to access your page to read tags.

❌ Missing Required Tags

All four required tags (og:title, og:type, og:image, og:url) must be present. Missing any will cause display issues.

Complete Example

Here's a complete, production-ready example:

<!-- Required Open Graph Tags -->
<meta property="og:title" content="The Ultimate Guide to Open Graph Tags" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://example.com/images/og-guide.jpg" />
<meta property="og:url" content="https://example.com/blog/og-guide" />

<!-- Recommended Tags -->
<meta property="og:description" content="Learn everything you need to know about implementing Open Graph tags for perfect Facebook sharing." />
<meta property="og:site_name" content="Example Blog" />
<meta property="og:locale" content="en_US" />

<!-- Image Dimensions -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Article-Specific Tags -->
<meta property="article:published_time" content="2025-11-02T12:00:00Z" />
<meta property="article:author" content="https://facebook.com/authorprofile" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="Open Graph" />

<!-- Facebook App ID (Optional) -->
<meta property="fb:app_id" content="123456789012345" />

Related Tools

OG Tag Generator

Generate Facebook-ready Open Graph tags

OG Validator

Validate your existing tags

Social Tester

Test how your content appears

Ready to Put This Into Practice?

Now that you understand the requirements, use our tools to implement and test your Open Graph tags.

Generate Your Tags Validate Your Tags Test on Real Platforms

© 2025 OGPreview.io - Open Graph Preview Tool

Privacy