Skip to main content

Open Graph Tags: Control Social Media Preview Cards

12 min read

12 min read

Open Graph Tags: Control Social Media Preview Cards

Reading time: 12 minutes

Quick Definition: Open Graph (OG) tags are meta tags that control how your page appears when shared on social media. They determine the title, description, image, and preview card format that shows up on Facebook, LinkedIn, Slack, Discord, and other platforms.

Without OG tags: Social platforms pull random text and images from your page. often the wrong ones.

With OG tags: You control exactly what appears in the preview card.

TLDR

Open Graph tags control how your pages appear when shared on social media. Without them, platforms pull random text and images with low click-through rates. Four required properties: title, description, image, and URL. Use absolute HTTPS URLs for images at 1200×630px resolution. Test with Facebook Sharing Debugger and LinkedIn Post Inspector. Common mistake: using relative image paths that platforms can’t fetch. WordPress plugins like Yoast auto-generate these tags. Get them right and multiply your social traffic from the same shares.

Why Open Graph Matters

Social Traffic Impact

Scenario 1: No OG tags

  • Share on LinkedIn
  • Preview shows: random paragraph from middle of page, no image, generic URL
  • Result: Low click-through rate

Scenario 2: Optimized OG tags

  • Share on LinkedIn
  • Preview shows: compelling headline, professional image, clear description
  • Result: Significantly higher click-through rate

Result: Multiple times more traffic from the same social share.

Brand Control

OG tags ensure:

  • Your brand name appears correctly
  • High-quality images (not random icons or ads)
  • Compelling copy that matches your messaging
  • Professional appearance across all platforms

Essential Open Graph Tags

Minimum Implementation

<head>
  <!-- The 4 required OG tags -->
  <meta property="og:title" content="Your Page Title - Brand Name">
  <meta property="og:description" content="Clear, compelling description of your page content (150-300 characters)">
  <meta property="og:image" content="https://example.com/images/share-image.jpg">
  <meta property="og:url" content="https://example.com/page-url">
</head>

Note: Use property (not name) for Open Graph tags.

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

  <!-- Recommended tags -->
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Your Brand Name">
  <meta property="og:locale" content="en_US">

  <!-- Image metadata (helps platforms display correctly) -->
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Descriptive alt text for image">
</head>

Tag Breakdown

og:title

What it does: The headline shown in social preview cards

Best practices:

  • Keep it under 60 characters (longer gets truncated)
  • Don’t repeat your meta title verbatim. optimize for social sharing
  • Include brand name if space allows

Example:

<!-- SEO title -->
<title>Complete Guide to SEO for Small Businesses | Surmado</title>

<!-- Social title (punchier) -->
<meta property="og:title" content="SEO for Small Businesses: Complete Guide">

og:description

What it does: The description text below the title in preview cards

Best practices:

  • 150-300 characters (sweet spot: 200)
  • Compel clicks. think of it as ad copy
  • Can differ from meta description

Example:

<!-- Meta description (search-focused) -->
<meta name="description" content="Learn SEO fundamentals for small businesses. Covers keyword research, on-page optimization, and local SEO tactics. Beginner-friendly guide with examples.">

<!-- OG description (social-focused, more urgent) -->
<meta property="og:description" content="Stop wasting money on SEO agencies. This guide shows small business owners how to rank on Google in 30 days. No jargon, just results.">

og:image

What it does: The preview image shown in social cards

Image requirements:

PlatformRecommended SizeAspect RatioFormat
Facebook1200 × 630px1.91:1JPG, PNG
LinkedIn1200 × 627px1.91:1JPG, PNG
Twitter1200 × 675px16:9 (with Twitter Cards)JPG, PNG, WebP
WhatsApp300 × 157px minimum1.91:1JPG, PNG

Universal safe size: 1200 × 630px (works on all platforms)

Best practices:

  • Use HTTPS URLs (not HTTP)
  • Use absolute URLs (https://example.com/image.jpg, not /image.jpg)
  • Keep file size under 1MB (ideally 300-500KB)
  • Use high-contrast, readable images
  • Include text overlay (60% of screen = mobile view)
  • Avoid small text (test on mobile preview)

Bad practices:

  • Tiny logos (hard to see on mobile)
  • Text-heavy images (unreadable when scaled down)
  • Low-resolution photos (pixelated previews)
  • Vertical images (get cropped awkwardly)

Example:

<meta property="og:image" content="https://example.com/images/blog-post-hero-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Graph showing 300% traffic increase from SEO">

og:url

What it does: The canonical URL for the page (what shows up in the preview and where links point)

Best practices:

  • Use the clean, canonical URL (no tracking parameters)
  • Must be absolute URL (include https://)
  • Should match your canonical tag

Example:

<!-- Bad: relative URL -->
<meta property="og:url" content="/blog/seo-guide">

<!-- Bad: tracking parameters -->
<meta property="og:url" content="https://example.com/blog/seo-guide?utm_source=facebook">

<!-- Good: clean canonical URL -->
<meta property="og:url" content="https://example.com/blog/seo-guide">

og:type

What it does: Tells platforms what kind of content this is

Common values:

  • website (default for most pages)
  • article (blog posts, news articles)
  • product (e-commerce product pages)
  • video.movie (video content)
  • music.song (music content)

Example:

<!-- Homepage -->
<meta property="og:type" content="website">

<!-- Blog post -->
<meta property="og:type" content="article">

For articles, add additional tags:

<meta property="og:type" content="article">
<meta property="article:author" content="John Smith">
<meta property="article:published_time" content="2024-01-15T09:00:00Z">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="Small Business">

og:site_name

What it does: Your brand/website name (shows up separately from page title)

Example:

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

Result on Facebook:

[Image preview]
Surmado
SEO for Small Businesses: Complete Guide
Stop wasting money on SEO agencies...
EXAMPLE.COM

og:locale

What it does: The language and region of the content

Format: language_TERRITORY

Examples:

<meta property="og:locale" content="en_US"> <!-- English (US) -->
<meta property="og:locale" content="en_GB"> <!-- English (UK) -->
<meta property="og:locale" content="es_MX"> <!-- Spanish (Mexico) -->
<meta property="og:locale" content="fr_FR"> <!-- French (France) -->

Alternate locales:

<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="es_MX">
<meta property="og:locale:alternate" content="fr_FR">

Platform-Specific Tags

Twitter Cards

Twitter uses its own tags (but falls back to OG tags if missing):

<!-- Twitter-specific 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 description">
<meta name="twitter:image" content="https://example.com/image.jpg">

Twitter card types:

  • summary (small image, square)
  • summary_large_image (large image, 16:9)
  • app (mobile app install card)
  • player (video/audio player)

Best practice: Include both OG tags and Twitter tags for full coverage:

<head>
  <!-- Open Graph (for FB, LinkedIn, WhatsApp, etc.) -->
  <meta property="og:title" content="Your Title">
  <meta property="og:description" content="Your description">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/page">

  <!-- Twitter (specific to Twitter) -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@surmado">
</head>

Complete Example

Blog Post

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>How to Fix Core Web Vitals in 30 Minutes | Surmado</title>

  <!-- Meta description for search -->
  <meta name="description" content="Learn how to fix LCP, CLS, and INP issues in 30 minutes. No developer required. Step-by-step guide with real examples and tools.">

  <!-- Open Graph for social media -->
  <meta property="og:type" content="article">
  <meta property="og:title" content="Fix Core Web Vitals in 30 Minutes">
  <meta property="og:description" content="Your site is slow. We'll fix it in 30 minutes. No developer needed.">
  <meta property="og:image" content="https://help.surmado.com/images/core-web-vitals-guide.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Before/after Core Web Vitals scores">
  <meta property="og:url" content="https://help.surmado.com/docs/core-web-vitals-explained">
  <meta property="og:site_name" content="Surmado">
  <meta property="og:locale" content="en_US">

  <!-- Article-specific metadata -->
  <meta property="article:published_time" content="2024-12-01T09:00:00Z">
  <meta property="article:section" content="SEO">
  <meta property="article:tag" content="Core Web Vitals">
  <meta property="article:tag" content="Performance">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@surmado">
</head>
<body>
  <!-- Page content -->
</body>
</html>

Testing Your Open Graph Tags

Facebook Sharing Debugger

URL: developers.facebook.com/tools/debug

How to use:

  1. Enter your URL
  2. Click “Debug”
  3. Check the preview card
  4. If wrong, click “Scrape Again” after fixing tags

Common issues:

  • “Missing og:image” → Add image tag
  • “Image too small” → Use 1200×630px minimum
  • “Could not download image” → Check URL is absolute and HTTPS

LinkedIn Post Inspector

URL: linkedin.com/post-inspector

How to use:

  1. Enter your URL
  2. Click “Inspect”
  3. View the preview
  4. LinkedIn caches aggressively. may take 7 days to update

Twitter Card Validator

URL: cards-dev.twitter.com/validator

How to use:

  1. Enter your URL
  2. Click “Preview card”
  3. Check if image and text appear correctly

OpenGraph.xyz

URL: opengraph.xyz

Shows previews for:

  • Facebook
  • Twitter
  • LinkedIn
  • Slack
  • Discord

Great for seeing how your card looks across all platforms at once.

WordPress Implementation

Yoast SEO

  1. Edit your page/post
  2. Yoast SEO section → Social
  3. Facebook tab:
    • Upload Facebook image
    • Set Facebook title/description
  4. Twitter tab:
    • Upload Twitter image (or use Facebook image)

Yoast auto-generates OG tags based on these settings.

Rank Math

  1. Edit page/post
  2. Rank Math → Social
  3. Set Facebook/Twitter metadata
  4. Rank Math outputs both OG and Twitter tags

Manual (functions.php)

<?php
function add_custom_og_tags() {
  if (is_single()) {
    global $post;
    ?>
    <meta property="og:type" content="article">
    <meta property="og:title" content="<?php echo esc_attr(get_the_title()); ?>">
    <meta property="og:description" content="<?php echo esc_attr(get_the_excerpt()); ?>">
    <meta property="og:image" content="<?php echo esc_url(get_the_post_thumbnail_url(null, 'large')); ?>">
    <meta property="og:url" content="<?php echo esc_url(get_permalink()); ?>">
    <?php
  }
}
add_action('wp_head', 'add_custom_og_tags');
?>

Common Mistakes

Forgetting og:image

Problem: No image in social preview

Result: Lower click-through rates, unprofessional appearance

Fix: Always include og:image

Using Relative URLs for Images

Wrong:

<meta property="og:image" content="/images/share.jpg">

Right:

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

Images Too Small

Problem:

<meta property="og:image" content="https://example.com/logo-200x200.png">

Result: Facebook shows tiny image or no image at all

Minimum sizes:

  • Facebook: 200×200px (but 1200×630px recommended)
  • LinkedIn: 1200×627px

Duplicate Title/Description

Problem: Using exact same text for SEO title and OG title

Why it’s suboptimal: Search and social have different contexts

Better:

<!-- SEO: keyword-focused -->
<title>Best SEO Tools for Small Businesses 2024 | Surmado</title>

<!-- Social: curiosity-driven -->
<meta property="og:title" content="The $50 SEO Tool That Beats $5,000 Alternatives">

Not Including Width/Height

Problem:

<meta property="og:image" content="https://example.com/image.jpg">
<!-- Missing width and height -->

Result: Platform has to download image to check dimensions, slowing preview generation

Fix:

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

What Surmado Checks

Surmado Scan looks for:

  • og:title present
  • og:description present
  • og:image present and accessible
  • og:image using HTTPS
  • og:image dimensions (1200×630px recommended)
  • og:url matches canonical URL

Quick Reference

Minimum OG tags (use these):

<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your description (150-300 chars)">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

Image specs:

  • Size: 1200×630px (universal)
  • Format: JPG or PNG
  • File size: Under 1MB
  • Aspect ratio: 1.91:1

→ Related: Meta Descriptions | Title Tags 101

Help Us Improve This Article

Know a better way to explain this? Have a real-world example or tip to share?

Contribute and earn credits:

  • Submit: Get $25 credit (Signal, Scan, or Solutions)
  • If accepted: Get an additional $25 credit ($50 total)
  • Plus: Byline credit on this article
Contribute to This Article

Continue learning with these related guides

Technical SEO

Surmado API Reference

Complete reference for integrating with the Surmado API. Create Signal, Scan, and Solutions reports programmatically.

Read article
Technical SEO

Structured Data & Intelligence Tokens

Every Surmado report includes structured JSON for programmatic access. Learn how to integrate Signal, Scan, and Solutions data into your tools, dashboards, and automation workflows.

Read article
Technical SEO

Surmado API - Developer Guide

Complete API reference for building AI visibility, competitive intelligence, and strategic advisory into your application. RESTful API with Python, Node.js, and cURL examples.

Read article