Open Graph Tags: Control How Your Content Appears When Shared

March 31, 2026 · 12 min read

What Is the Open Graph Protocol?

The Open Graph protocol, originally created by Facebook in 2010, is a set of HTML meta tags that tell social media platforms how to display your web page when someone shares it. Without Open Graph tags, platforms guess what to show—often picking the wrong image, truncating the title, or displaying a generic description. With proper OG tags, you control exactly what appears.

Think about the last time you shared a link on Facebook, LinkedIn, or in a messaging app. That rich preview card with the image, title, and description? That's Open Graph in action. The difference between a well-configured OG preview and a broken one can mean the difference between someone clicking your link or scrolling past it.

The protocol has expanded far beyond Facebook. Today, Twitter, LinkedIn, Pinterest, Slack, Discord, WhatsApp, Telegram, and virtually every platform that generates link previews reads Open Graph tags. Implementing them once improves your content's appearance everywhere.

For website owners and marketers, OG tags aren't optional—they're essential. Pages shared on social media without OG tags look unprofessional and generate significantly lower engagement compared to properly tagged content. Studies show that posts with rich previews receive up to 40% more clicks than those without.

Essential Open Graph Tags

Every web page should include these four core Open Graph tags at minimum. These are the foundation of how your content appears across social platforms:

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description of your page">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:url" content="https://yourdomain.com/page">

og:title

The og:title is the headline that appears in the preview card. It should be concise, compelling, and accurately represent your content. Keep it between 60-90 characters for optimal display across platforms.

Your OG title doesn't need to match your page's <title> tag exactly. In fact, you might want to optimize them differently—the page title for SEO and search engines, the OG title for social sharing and engagement.

og:description

The description provides context about your page. Most platforms display 2-3 lines, which translates to roughly 150-200 characters. Make every word count—this is your elevator pitch to potential visitors.

Write descriptions that create curiosity or promise value. Instead of "This article discusses Open Graph tags," try "Learn how to control exactly what appears when your content is shared on social media."

og:image

The image is the most visually prominent element of your preview card. It's often the first thing people notice and can make or break whether someone clicks your link. The image URL must be absolute (not relative) and should be hosted on a reliable CDN.

We'll dive deeper into image optimization in the next section, but the quick version: use 1200×630 pixels, keep file size under 1MB, and ensure the image looks good at different sizes.

og:url

The canonical URL of your page. This should be the permanent, preferred URL you want associated with this content. Use the full URL including protocol (https://) and avoid tracking parameters.

The og:url helps platforms deduplicate content and consolidate engagement metrics. If your page is accessible via multiple URLs, the OG URL tells platforms which one is the "real" version.

og:type

While not always required, og:type tells platforms what kind of content you're sharing. Common values include:

• website - Default for most pages
• article - Blog posts and news articles
• video.movie - Movie pages
• music.song - Music content
• product - E-commerce product pages

For most websites, you'll use either website or article. The type can unlock additional properties specific to that content type.

Advanced Open Graph Properties

Beyond the essential tags, Open Graph supports dozens of additional properties that provide richer context and enable platform-specific features. Here are the most useful advanced tags:

Article-Specific Tags

When using og:type set to article, you can include additional metadata:

<meta property="article:published_time" content="2026-03-31T10:00:00Z">
<meta property="article:modified_time" content="2026-03-31T15:30:00Z">
<meta property="article:author" content="https://yourdomain.com/author/name">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="Open Graph">
<meta property="article:tag" content="Social Media">

These tags help platforms understand your content's context and freshness. Some platforms display publish dates in preview cards, while others use this data for algorithmic ranking.

Image Dimensions and Alt Text

Provide explicit image dimensions to help platforms render previews faster without waiting for image downloads:

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Descriptive text for accessibility">

The og:image:alt tag is crucial for accessibility. It provides alternative text for users who can't see images, and some platforms display it when images fail to load.

Locale and Language

Specify your content's language and regional variant:

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

This helps platforms serve the right version to users in different regions and can improve how your content appears in localized feeds.

Site Name

The og:site_name identifies your brand or website name, separate from the page title:

<meta property="og:site_name" content="DLKit">

Many platforms display this as a byline or attribution, helping build brand recognition across shares.

Video and Audio Tags

If your page features video or audio content, you can embed it directly in social previews:

<meta property="og:video" content="https://yourdomain.com/video.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">

Platforms like Facebook and LinkedIn can play videos directly in the feed, dramatically increasing engagement compared to static images.

Optimizing Your OG Image

Your Open Graph image is the most important visual element of your social preview. A compelling image can increase click-through rates by 2-3x compared to generic or poorly optimized images.

Recommended Dimensions

The standard OG image size is 1200×630 pixels (1.91:1 aspect ratio). This dimension works well across all major platforms and ensures your image isn't cropped awkwardly.

While platforms accept various sizes, sticking to 1200×630 guarantees consistency. Some platforms will crop or letterbox images that don't match their preferred ratio, potentially cutting off important elements.

File Format and Size

Use JPG for photographs and complex images, PNG for graphics with text or transparency. Keep file size under 1MB—ideally under 500KB. Large images slow down preview generation and may fail to load on slower connections.

Modern image formats like WebP offer better compression, but not all platforms support them yet. Stick with JPG or PNG for maximum compatibility.

Safe Zones and Text Placement

Different platforms crop images differently. Some show the full image, others crop to a square, and mobile apps might display only the center portion. Keep critical elements (text, logos, faces) in the center 1000×500 pixel "safe zone."

Avoid placing text near edges. If your image includes text, make it large enough to read at thumbnail size—at least 60-80px font size for headlines.

Design Best Practices

• High contrast: Ensure text is readable against the background
• Brand consistency: Use your brand colors and fonts
• Clear focal point: One main subject or message, not cluttered
• Mobile-friendly: Remember many users see previews on small screens
• Avoid text-heavy designs: Images with too much text may be penalized by some platforms

Multiple Images

You can specify multiple OG images, and some platforms will let users choose which one to share:

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

The first image is the default, but providing alternatives gives users options and can improve engagement.

Dynamic Image Generation

For sites with lots of content, manually creating OG images for every page isn't practical. Consider dynamic image generation using services like Cloudinary, Imgix, or custom serverless functions that overlay text on template images.

Many modern frameworks and CMS platforms offer plugins or built-in features for automatic OG image generation based on page content.

Platform-Specific Considerations

While Open Graph is a standard, different platforms interpret and display tags differently. Understanding these nuances helps you optimize for each platform.

Facebook and Instagram

Facebook invented Open Graph, so it has the most comprehensive support. Facebook displays the full 1200×630 image in feed posts and uses all standard OG tags.

Instagram doesn't show link previews in feed posts, but Stories with link stickers use OG tags. Make sure your images look good at square crops since Instagram often displays them that way.

Facebook caches OG data aggressively. After updating tags, use the Facebook Sharing Debugger to force a refresh.

Twitter (X)

Twitter has its own meta tags called Twitter Cards, but falls back to Open Graph if Twitter tags aren't present. For best results, include both:

<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 Title">
<meta name="twitter:description" content="Your description">
<meta name="twitter:image" content="https://yourdomain.com/image.jpg">

The summary_large_image card type displays a large image similar to Facebook. The alternative summary type shows a smaller square thumbnail.

LinkedIn

LinkedIn fully supports Open Graph and displays rich previews prominently. It's particularly important for B2B content and professional articles.

LinkedIn crops images to 1.91:1 ratio and displays them large in the feed. Professional, high-quality images perform best. Avoid overly promotional or salesy imagery.

WhatsApp and Telegram

Messaging apps use OG tags to generate link previews in conversations. These previews are crucial since they're often the only context someone has before clicking.

WhatsApp displays a smaller preview (typically 400×400 pixels), so ensure your image's central elements are clear at smaller sizes. Telegram supports larger previews and displays more of the description text.

Slack and Discord

Workplace communication tools automatically unfurl links using OG tags. Slack displays a compact preview with image, title, and description. Discord shows a similar format but with slightly different styling.

Both platforms cache previews, so updates may not appear immediately. Users can manually refresh by re-pasting the link.

Pinterest

Pinterest prefers taller images (2:3 or 1:2.1 ratio) compared to the standard OG format. If Pinterest is important for your content, consider adding Pinterest-specific meta tags:

<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image" content="https://yourdomain.com/pinterest-image.jpg">
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="1500">

Pinterest will use the second image if it better matches their preferred dimensions.

Implementation Guide

Implementing Open Graph tags varies depending on your platform and tech stack. Here's how to add them to common setups:

Static HTML Sites

For static sites, 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:description" content="Your page description">
  <meta property="og:image" content="https://yourdomain.com/og-image.jpg">
  <meta property="og:url" content="https://yourdomain.com/page">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Your Site Name">
</head>
<body>
  <!-- Your content -->
</body>
</html>

WordPress

WordPress doesn't include OG tags by default. Use a plugin like Yoast SEO, Rank Math, or All in One SEO to add them automatically. These plugins generate tags based on your content and provide easy customization options.

Alternatively, add tags manually to your theme's header.php file or use a custom function in functions.php:

function add_open_graph_tags() {
  if (is_single()) {
    global $post;
    echo '<meta property="og:title" content="' . get_the_title() . '">';
    echo '<meta property="og:description" content="' . get_the_excerpt() . '">';
    echo '<meta property="og:url" content="' . get_permalink() . '">';
    echo '<meta property="og:type" content="article">';
    if (has_post_thumbnail()) {
      echo '<meta property="og:image" content="' . get_the_post_thumbnail_url() . '">';
    }
  }
}
add_action('wp_head', 'add_open_graph_tags');

React and Next.js

In Next.js, use the Head component to add OG tags to individual pages:

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <title>Your Page Title</title>
        <meta property="og:title" content="Your Page Title" />
        <meta property="og:description" content="Your description" />
        <meta property="og:image" content="https://yourdomain.com/og-image.jpg" />
        <meta property="og:url" content="https://yourdomain.com/page" />
      </Head>
      <main>
        {/* Your content */}
      </main>
    </>
  );
}

For dynamic content, fetch data and populate OG tags server-side using getServerSideProps or getStaticProps.

Vue and Nuxt

Nuxt provides a head method for adding meta tags:

export default {
  head() {
    return {
      title: 'Your Page Title',
      meta: [
        { property: 'og:title', content: 'Your Page Title' },
        { property: 'og:description', content: 'Your description' },
        { property: 'og:image', content: 'https://yourdomain.com/og-image.jpg' },
        { property: 'og:url', content: 'https://yourdomain.com/page' }
      ]
    }
  }
}

Shopify

Shopify automatically generates basic OG tags for products and pages. To customize them, edit your theme's theme.liquid file or use apps like SEO Manager or Plug in SEO.

For product pages, Shopify uses the product title, description, and featured image by default. You can override these in the product admin panel.

Testing and Debugging Your Tags

Implementing OG tags is only half the battle. Testing ensures they work correctly across platforms and appear as intended.

Essential Testing Tools

Use these free tools to validate your Open Graph implementation:

• DLKit Open Graph Fetcher - See exactly how your tags are parsed and what data platforms will read
• Facebook Sharing Debugger - Test how your page appears on Facebook and force cache refresh
• Twitter Card Validator - Preview your Twitter cards and validate Twitter-specific tags
• LinkedIn Post Inspector - Check how your content appears on LinkedIn
• OpenGraph.xyz - Multi-platform preview showing how your tags render across different services

Common Issues and Solutions

Images not appearing: The most common issue. Check that your image URL is absolute (includes https://), the file exists and is accessible, and the server allows hotlinking. Some platforms require HTTPS for images.

Old content showing after updates: Platforms cache OG data aggressively. Use platform-specific debugger tools to force a refresh. Facebook's debugger has a "Scrape Again" button that clears the cache.

Wrong image displayed: If you have multiple images on your page, platforms might pick the wrong one. Explicitly set og:image to your preferred image. Ensure it's the first OG image tag in your HTML.

Truncated titles or descriptions: Different platforms have different character limits. Keep titles under 60 characters and descriptions under 155 characters for universal compatibility.

Special characters breaking tags: HTML-encode special characters in your content attributes. Use & for &, " for quotes, etc.

Validation Checklist

Before considering your OG implementation complete,