Open Graph Tags: The Complete Guide to Social Media Previews

· 12 min read

Table of Contents

When you share a link on Facebook, LinkedIn, Twitter, or messaging apps, the preview card that appears is generated from Open Graph (OG) tags in your page's HTML. Getting these tags right means the difference between an engaging, click-worthy preview and a broken or generic-looking link.

This comprehensive guide covers everything you need to know about Open Graph tags, Twitter Cards, and social media preview optimization. Whether you're a developer implementing OG tags for the first time or a marketer looking to improve social engagement, you'll find actionable insights and practical examples throughout.

What Is Open Graph?

Open Graph is a protocol originally created by Facebook in 2010 that allows web pages to become rich objects in a social graph. By adding OG meta tags to your HTML, you control exactly how your content appears when shared on social media platforms.

Without Open Graph tags, platforms attempt to scrape your page's content automatically, often producing poor or incorrect previews. The result? Broken images, missing titles, or generic descriptions that fail to capture attention in crowded social feeds.

The protocol uses meta tags in the <head> section of your HTML with the property attribute prefixed with og:. These tags provide structured data that social platforms can reliably parse and display.

Platforms That Support Open Graph

Open Graph has become the de facto standard for social media previews. Major platforms that support the protocol include:

Pro tip: Use our Open Graph Checker to instantly validate how your tags appear across different platforms before publishing.

How Open Graph Tags Work

When someone shares your URL on a social platform, the platform's crawler (often called a "bot" or "scraper") visits your page and looks for Open Graph meta tags in the HTML <head> section. These tags provide structured information about your content.

The crawler extracts this data and uses it to generate a preview card, also called a "rich snippet" or "link preview." This card typically includes a title, description, image, and URL.

The Crawling Process

Here's what happens behind the scenes when you share a link:

  1. URL submission – A user pastes or shares your URL on a social platform
  2. Crawler dispatch – The platform sends a bot to fetch your page
  3. HTML parsing – The bot reads your page's HTML and extracts OG tags
  4. Cache storage – The platform caches the extracted data (usually for 24-48 hours)
  5. Preview generation – A preview card is rendered using the cached data
  6. Display – The preview appears in the user's feed or message

Understanding this process is crucial because it explains why changes to your OG tags don't appear immediately. Most platforms cache preview data aggressively to reduce server load.

Quick tip: After updating your OG tags, use platform-specific debugging tools to force a cache refresh. We'll cover these tools in the debugging section.

Required Open Graph Tags

Four OG tags are considered required for a properly defined Open Graph object. While pages without these tags may still generate previews, the results are unpredictable and often poor quality.

Here's the minimal implementation you need:

<meta property="og:title" content="Your Page Title">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

og:title

The title of your content as it should appear in the social media preview. This is arguably the most important tag because it's the first thing users see.

Best practices:

Example:

<meta property="og:title" content="10 Proven Strategies to Double Your Email Open Rates">

og:type

The type of content your page represents. This helps platforms understand the nature of your content and may affect how it's displayed or categorized.

Common values:

For most websites and blog posts, you'll use either website or article. The article type enables additional tags like article:published_time and article:author.

Example:

<meta property="og:type" content="article">

og:image

The URL of the image that should appear in the preview card. This is critical for engagement – posts with images receive significantly more clicks and shares than text-only previews.

Requirements:

Example:

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

We'll dive deeper into image specifications and optimization in the dedicated section below.

og:url

The canonical URL of your page. This should be the permanent, preferred URL you want associated with this content.

Best practices:

Example:

<meta property="og:url" content="https://example.com/blog/email-marketing-guide">

Pro tip: The og:url value should match your canonical URL. This helps consolidate social signals and prevents duplicate content issues. Use our Meta Tag Generator to ensure consistency across all your meta tags.

Optional Open Graph Tags

Beyond the four required tags, Open Graph supports numerous optional tags that provide additional context and improve how your content appears on social platforms.

og:description

A brief description of your content. This appears below the title in most preview cards.

Best practices:

Example:

<meta property="og:description" content="Learn proven email marketing strategies that top marketers use to achieve 40%+ open rates. Includes templates and real examples.">

og:site_name

The name of your website or brand. This appears separately from the page title and helps with brand recognition.

Example:

<meta property="og:site_name" content="SEO-IO">

og:locale

The language and regional formatting of your content. Default is en_US if not specified.

Example:

<meta property="og:locale" content="en_GB">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="es_ES">

Article-Specific Tags

When using og:type value of article, you can include additional metadata:

<meta property="article:published_time" content="2026-03-31T09:00:00Z">
<meta property="article:modified_time" content="2026-03-31T14:30:00Z">
<meta property="article:author" content="https://example.com/author/john-doe">
<meta property="article:section" content="Email Marketing">
<meta property="article:tag" content="email">
<meta property="article:tag" content="marketing">
<meta property="article:tag" content="conversion">

These tags help platforms understand your content's context and may influence how it's categorized or displayed.

Image Enhancement Tags

Provide additional information about your OG image:

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Infographic showing email open rate statistics">
<meta property="og:image:type" content="image/jpeg">

Including width and height helps platforms render previews faster without downloading the image first. The alt text improves accessibility and provides fallback context.

Twitter Cards and X Platform

Twitter (now X) developed its own meta tag system called Twitter Cards before Open Graph became widespread. While Twitter Cards use different tag names, they serve the same purpose as Open Graph tags.

The good news: Twitter falls back to Open Graph tags if Twitter Card tags aren't present. However, using Twitter-specific tags gives you more control over how your content appears on the platform.

Twitter Card Types

Twitter supports several card types, but you'll primarily use these two:

Card Type Use Case Image Size
summary Default card with small square image 1:1 aspect ratio (e.g., 400Γ—400)
summary_large_image Large image card (recommended for most content) 2:1 aspect ratio (e.g., 1200Γ—600)
app Mobile app promotion Varies
player Video or audio content Varies

For most websites and blog posts, use summary_large_image to maximize visual impact.

Essential Twitter Card Tags

Here's a complete implementation combining Twitter Cards with Open Graph:

<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:creator" content="@authorusername">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description">
<meta name="twitter:image" content="https://example.com/image.jpg">

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

Note that Twitter Card tags use name attribute instead of property, and they're prefixed with twitter: instead of og:.

Twitter Username Tags

The twitter:site and twitter:creator tags attribute content to Twitter accounts:

These tags enable Twitter to link to the appropriate profiles and may display them in the card. Always include the @ symbol.

Pro tip: If you don't specify Twitter Card tags, Twitter will use your Open Graph tags as fallbacks. However, Twitter's image requirements differ slightly from Facebook's, so using dedicated Twitter tags ensures optimal display on both platforms.

Image Specifications and Best Practices

The image is often the most eye-catching element of your social media preview. Getting the specifications right ensures your content looks professional across all platforms.

Recommended Image Dimensions

Different platforms have different image requirements, but these dimensions work well across most platforms:

Platform Recommended Size Aspect Ratio Min Size
Facebook 1200Γ—630 px 1.91:1 600Γ—315 px
Twitter/X 1200Γ—600 px 2:1 300Γ—157 px
LinkedIn 1200Γ—627 px 1.91:1 520Γ—272 px
Pinterest 1000Γ—1500 px 2:3 600Γ—900 px
Universal 1200Γ—630 px 1.91:1 600Γ—315 px

The "universal" size of 1200Γ—630 pixels works well across Facebook, LinkedIn, Twitter, and most messaging apps. This is the safest choice if you're only creating one image.

File Format and Size

Choose the right file format for your images:

File size recommendations:

Design Best Practices

Creating effective social media images requires both technical and design considerations:

Quick tip: Create a template in your preferred design tool (Figma, Canva, Photoshop) with the 1200Γ—630 dimensions and safe zones marked. This ensures consistency across all your social images and speeds up creation.

Multiple Images

You can specify multiple images for different platforms or to provide alternatives:

<meta property="og:image" content="https://example.com/image-facebook.jpg">
<meta property="og:image" content="https://example.com/image-square.jpg">
<meta name="twitter:image" content="https://example.com/image-twitter.jpg">

Platforms typically use the first image they find, but some may choose based on aspect ratio or other factors.

Platform-Specific Differences

While Open Graph is a standard protocol, each platform implements it slightly differently. Understanding these nuances helps you optimize for each platform.

Facebook

Facebook is the most strict about Open Graph implementation:

Facebook also offers the most comprehensive debugging tool, which we'll cover in the debugging section.

LinkedIn

LinkedIn focuses on professional content:

Twitter/X

Twitter has unique requirements:

WhatsApp and Messaging Apps

Messaging apps like WhatsApp, Telegram, and iMessage:

Pinterest

Pinterest is unique in preferring vertical images:

Implementation Guide

Implementing Open Graph tags correctly requires attention to detail and understanding of your site's architecture.

Static HTML Implementation

For static websites, add OG tags directly to your HTML <head> section:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Page Title</title>
  
  <!-- Open Graph tags -->
  <meta property="og:title" content="Your Page Title">
  <meta property="og:type" content="website">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:description" content="Your page description">
  <meta property="og:site_name" content="Your Site Name">
  
  <!-- Twitter Card tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@yourusername">
</head>
<body>
  <!-- Your content -->
</body>
</html>

WordPress Implementation

For WordPress sites, you have several options:

Option 1: Use an SEO plugin

Option 2: Add to theme's functions.php

function add_open_graph_tags() {
  if (is_single() || is_page()) {
    global $post;
    $og_title = get_the_title();
    $og_url = get_permalink
We use cookies for analytics. By continuing, you agree to our Privacy Policy.