← Back to Index

Open Graph Protocol

FigureHow OG Tags transform a link. Without tags, you get a plain URL. With tags, you get a "Rich Card" that drives clicks.

What is Open Graph?

The Open Graph protocol is a set of meta tags that control how your web pages appear when shared on social media platforms. Originally created by Facebook in 2010, Open Graph has been adopted by LinkedIn, Twitter (with extensions), Pinterest, and other platforms.

Open Graph allows you to turn any web page into a rich object in a social graph. Instead of showing just a plain URL when someone shares your link, properly configured Open Graph tags display an attractive card with an image, title, and description.

When someone shares your URL on social media, the platform's crawler fetches your page and reads the Open Graph tags to construct the preview. This preview is what users see in their feeds, and it dramatically affects whether they click through.

Why Open Graph Matters

1. Click-Through Rate Impact

A link shared with rich Open Graph metadata — featuring a compelling image, clear title, and descriptive text — receives significantly more clicks than a plain URL. Studies suggest rich previews can increase engagement by 2-3x or more.

When users scroll through their feeds, visual content stands out. A properly configured Open Graph image acts as a mini-advertisement for your content.

2. Brand Control

Without Open Graph tags, social platforms guess which image and text to display, often choosing incorrectly. You might end up with:

  • A random sidebar image
  • Navigation text as your "title"
  • Footer content as your "description"
  • No image at all

Open Graph gives you complete control over your social media presence, ensuring your brand looks professional and consistent.

3. Content Accuracy

By specifying exactly what title, description, and image to use, you ensure your content is represented accurately. This is especially important for:

  • Product pages with multiple images
  • Articles where the headline differs from the meta title
  • Pages with complex layouts

4. Indirect SEO Benefits

While Open Graph is not a direct Google ranking factor, the increased social engagement can:

  • Drive more traffic to your content
  • Increase brand awareness
  • Lead to more natural backlinks
  • Signal content value to search engines

Essential Open Graph Tags

Basic Tags

html
<meta property="og:title" content="Complete Guide to SEO Audits" />
<meta property="og:description" content="Learn how to audit your website for SEO issues and improve your search rankings." />
<meta property="og:image" content="https://example.com/images/seo-guide.png" />
<meta property="og:url" content="https://example.com/seo-guide" />
<meta property="og:type" content="article" />

Tag Explanations

og:title — The title of your content as it should appear in the social share. This can differ from your HTML title tag. Keep it compelling and under 60 characters for optimal display.

og:description — A brief description of your content, typically 2-4 sentences. This is your opportunity to convince users to click through.

og:image — The URL of the image that represents your content. This is arguably the most important tag for engagement. Use absolute URLs, not relative paths.

og:url — The canonical URL for this content. This should be the permanent, preferred URL for the page.

og:type — The type of content, such as "website," "article," "product," "video.movie," etc. This affects how some platforms process your content.

Image Best Practices

The Open Graph image is critical for social engagement:

Size Requirements

  • Recommended: 1200 x 630 pixels (1.91:1 aspect ratio)
  • Minimum: 600 x 315 pixels
  • File size: Under 8MB (smaller is better for loading)

Content Guidelines

  • Use high-quality, visually appealing images
  • Include text overlays sparingly if needed
  • Ensure images work at small sizes (mobile feeds)
  • Avoid images that are mostly text (may be flagged by platforms)
  • Use images that relate to your content topic

Technical Requirements

  • Use absolute URLs (https://example.com/image.png)
  • Ensure images are publicly accessible (not behind login)
  • Use standard formats: PNG, JPEG, GIF
  • Host images on reliable, fast servers

Additional Useful Tags

Article-Specific Tags

html
<meta property="article:published_time" content="2024-01-15T08:00:00Z" />
<meta property="article:modified_time" content="2024-06-20T12:00:00Z" />
<meta property="article:author" content="https://example.com/author/jane" />
<meta property="article:section" content="SEO" />
<meta property="article:tag" content="Technical SEO" />

Site Name and Locale

html
<meta property="og:site_name" content="Mygom SEO" />
<meta property="og:locale" content="en_US" />

Multiple Images

You can specify multiple images for platforms to choose from:

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

Twitter Cards

Twitter uses its own card system with similar functionality. For best results, include both Open Graph and Twitter-specific tags:

html
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Complete Guide to SEO Audits" />
<meta name="twitter:description" content="Learn how to audit your website for SEO issues." />
<meta name="twitter:image" content="https://example.com/images/seo-guide.png" />

Twitter Card types include:

  • summary: Small square image with title and description
  • summary_large_image: Large rectangular image above content
  • player: Video/audio player card
  • app: App download card

Testing and Debugging

Facebook Sharing Debugger

Use Facebook's Sharing Debugger tool to:

  • Preview how your URL will appear when shared
  • Identify missing or incorrect tags
  • Force Facebook to refresh its cache

Twitter Card Validator

Twitter's Card Validator confirms your Twitter Card implementation and shows previews.

LinkedIn Post Inspector

LinkedIn provides a Post Inspector for validating Open Graph tags specifically for LinkedIn sharing.

Common Open Graph Mistakes

Missing Image Tag

Without og:image, your share will have no visual appeal. Always include an image.

Relative Image URLs

Use absolute URLs for images. Relative paths like "/images/photo.jpg" often fail.

Wrong Image Dimensions

Images with incorrect aspect ratios may be cropped unexpectedly. Use the recommended 1200 x 630 size.

Caching Issues

Social platforms cache Open Graph data. After updating tags, use debugging tools to force a refresh.

HTTP Instead of HTTPS

Ensure all URLs use HTTPS. Some platforms may reject or warn about HTTP resources.

Implementation in Frameworks

Next.js

jsx
<Head>
  <meta property="og:title" content={pageTitle} />
  <meta property="og:description" content={pageDescription} />
  <meta property="og:image" content={ogImage} />
</Head>

WordPress

Use plugins like Yoast SEO or Rank Math that automatically generate Open Graph tags and allow customization per page.

Static HTML

Add meta tags directly in the <head> section of each page, or use a build process to inject them dynamically.