HTML · SEO & Metadata

Open Graph Protocol

Control how your content appears when shared on social media platforms

Find videos you like?

Save to resource drawer for future reference!

What is Open Graph Protocol?

Understanding OG tags and their role in social media sharing

Open Graph Protocol was created by Facebook and is now used by most social media platforms (Facebook, LinkedIn, Discord, Slack, WhatsApp, etc.) to generate rich link previews. When someone shares your URL, these tags control the title, description, and image that appears.

Rich Previews

Beautiful cards with images, titles, and descriptions when links are shared

Image Control

Choose exactly which image appears in social shares

Content Types

Different tags for articles, videos, products, and more

Basic Open Graph Tags

Essential OG tags for any web page with visual preview

Basic Open Graph Implementation

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Regular SEO Meta Tags -->
    <title>Ultimate Web Development Guide 2024 | CoderPod</title>
    <meta name="description" content="Master web development with comprehensive tutorials on HTML, CSS, JavaScript, and modern frameworks.">
    <!-- Open Graph Meta Tags for Social Media -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="Ultimate Web Development Guide 2024">
    <meta property="og:description" content="Master web development with comprehensive tutorials on HTML, CSS, JavaScript, and modern frameworks.">
    <meta property="og:image" content="https://coderpod.com/images/web-dev-guide-og.jpg">
    <meta property="og:url" content="https://coderpod.com/guides/web-development">
    <meta property="og:site_name" content="CoderPod">
    <meta property="og:locale" content="en_US">
  </head>
  <body>
    <div class="container">
      <h1>🌐 Open Graph Protocol</h1>
      <div class="info-box">
        <h3>💡 What is Open Graph?</h3>
        <p>
          Open Graph Protocol controls how your page appears when shared on social media platforms
          like Facebook, LinkedIn, Discord, and Slack. These meta tags create rich previews with
          images, titles, and descriptions.
        </p>
      </div>
      <h2 style="color: #3b82f6; margin: 30px 0 15px;">Preview: How Your Link Looks on Social Media</h2>
      <div class="og-preview">
        <div class="og-image">
          🚀 Web Development Guide
        </div>
        <div class="og-content">
          <div class="og-title">Ultimate Web Development Guide 2024</div>
          <div class="og-description">
            Master web development with comprehensive tutorials on HTML, CSS, JavaScript,
            and modern frameworks.
          </div>
          <a href="#" class="og-url">coderpod.com</a>
        </div>
      </div>
      <h2 style="color: #3b82f6; margin: 30px 0 15px;">Required Open Graph Tags</h2>
      <div class="tag-list">
        <code>&lt;meta property="og:title" content="Your Page Title"&gt;</code>
        <code>&lt;meta property="og:type" content="website"&gt;</code>
        <code>&lt;meta property="og:image" content="https://example.com/image.jpg"&gt;</code>
        <code>&lt;meta property="og:url" content="https://example.com/page"&gt;</code>
      </div>
      <p style="text-align: center; color: #6b7280; margin-top: 30px;">
        ✅ View the page source to see all Open Graph tags in the &lt;head&gt; section!
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Required Open Graph Tags

The four essential tags needed for proper social sharing

Critical Tags

These four tags are required for Open Graph to work properly. Without them, platforms will generate their own (often poor quality) previews.

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

Title of your content. Can be different from the <title> tag. Keep under 60 characters for best display.

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

Type of content. Common values: website, article,video.other, product. Determines what additional tags are available.

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

Preview image URL. Use absolute URL (with https://). Recommended size: 1200×630px. Supports JPG, PNG. Keep under 8MB.

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

Canonical URL. The permanent URL for this content. Should match your canonical link tag.

Article-Type Open Graph

Additional tags for blog posts and articles

Article Open Graph Tags

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10 Essential JavaScript Tips for Beginners | CoderPod Blog</title>
    <!-- Basic Open Graph Tags -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="10 Essential JavaScript Tips for Beginners">
    <meta property="og:description" content="Level up your JavaScript skills with these 10 essential tips and tricks. Perfect for beginners looking to write cleaner, more efficient code.">
    <meta property="og:image" content="https://coderpod.com/blog/js-tips-featured.jpg">
    <meta property="og:url" content="https://coderpod.com/blog/javascript-tips-beginners">
    <meta property="og:site_name" content="CoderPod Blog">
    <!-- Article-Specific Tags -->
    <meta property="article:published_time" content="2024-01-15T08:00:00Z">
    <meta property="article:modified_time" content="2024-01-20T14:30:00Z">
    <meta property="article:author" content="https://coderpod.com/authors/john-doe">
    <meta property="article:section" content="JavaScript">
    <meta property="article:tag" content="JavaScript">
    <meta property="article:tag" content="Programming">
    <meta property="article:tag" content="Tutorial">
    <!-- Image Details -->
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="JavaScript code on a laptop screen with colorful syntax highlighting">
  </head>
  <body>
    <div class="container">
      <div class="article-header">
        <h1>📝 Article-Type Open Graph</h1>
        <div class="meta-info">
          <span>📅 Published: Jan 15, 2024</span>
          <span>✏️ Updated: Jan 20, 2024</span>
          <span>👤 By: John Doe</span>
        </div>
        <div class="tag-container">
          <span class="tag">#JavaScript</span>
          <span class="tag">#Programming</span>
          <span class="tag">#Tutorial</span>
        </div>
      </div>
      <div class="og-specs">
        <h3>📊 Open Graph Specifications for Articles</h3>
        <div class="spec-grid">
          <div class="spec-item">
            <div class="spec-label">Type</div>
            <div class="spec-value">article</div>
          </div>
          <div class="spec-item">
            <div class="spec-label">Image Size</div>
            <div class="spec-value">1200×630px</div>
          </div>
          <div class="spec-item">
            <div class="spec-label">Published</div>
            <div class="spec-value">ISO 8601</div>
          </div>
          <div class="spec-item">
            <div class="spec-label">Section</div>
            <div class="spec-value">Category</div>
          </div>
        </div>
      </div>
      <h3 style="color: #f59e0b; margin: 30px 0 15px;">Article-Specific Tags:</h3>
      <div class="code-block">
        <code>
          &lt;!-- Article Metadata --&gt;<br>
          &lt;meta property="article:published_time" content="2024-01-15T08:00:00Z"&gt;<br>
          &lt;meta property="article:modified_time" content="2024-01-20T14:30:00Z"&gt;<br>
          &lt;meta property="article:author" content="Author URL"&gt;<br>
          &lt;meta property="article:section" content="JavaScript"&gt;<br>
          &lt;meta property="article:tag" content="JavaScript"&gt;<br>
          &lt;meta property="article:tag" content="Programming"&gt;<br>
          <br>
          &lt;!-- Image Details --&gt;<br>
          &lt;meta property="og:image:width" content="1200"&gt;<br>
          &lt;meta property="og:image:height" content="630"&gt;<br>
          &lt;meta property="og:image:alt" content="Descriptive alt text"&gt;
        </code>
      </div>
      <p style="text-align: center; color: #6b7280; margin-top: 30px; line-height: 1.6;">
        ✅ These additional tags help platforms like Facebook and LinkedIn show richer article previews
        with author info, publish dates, and proper categorization.
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Video Open Graph

Special tags for video content with embedded player support

Video Open Graph Tags

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn React Hooks in 30 Minutes | Video Tutorial</title>
    <!-- Video Open Graph Tags -->
    <meta property="og:type" content="video.other">
    <meta property="og:title" content="Learn React Hooks in 30 Minutes">
    <meta property="og:description" content="Complete guide to React Hooks including useState, useEffect, useContext, and custom hooks. Perfect for beginners!">
    <meta property="og:image" content="https://coderpod.com/videos/react-hooks-thumbnail.jpg">
    <meta property="og:url" content="https://coderpod.com/videos/react-hooks-tutorial">
    <meta property="og:site_name" content="CoderPod">
    <!-- Video-Specific Tags -->
    <meta property="og:video" content="https://coderpod.com/videos/react-hooks.mp4">
    <meta property="og:video:secure_url" content="https://coderpod.com/videos/react-hooks.mp4">
    <meta property="og:video:type" content="video/mp4">
    <meta property="og:video:width" content="1280">
    <meta property="og:video:height" content="720">
    <meta property="og:video:duration" content="1800">
    <!-- Additional Details -->
    <meta property="video:duration" content="1800">
    <meta property="video:release_date" content="2024-01-10T10:00:00Z">
    <meta property="video:tag" content="React">
    <meta property="video:tag" content="Hooks">
    <meta property="video:tag" content="JavaScript">
  </head>
  <body>
    <div class="container">
      <h1>🎥 Video Open Graph Tags</h1>
      <div class="video-preview">
        <div class="video-thumbnail">
          <div class="play-button">
            <div class="play-icon"></div>
          </div>
          <div style="font-size: 1.5rem; font-weight: bold;">Learn React Hooks</div>
          <div class="duration-badge">30:00</div>
        </div>
        <div class="video-info">
          <div class="video-title">Learn React Hooks in 30 Minutes</div>
          <div class="video-meta">
            <span>📅 Jan 10, 2024</span>
            <span>⏱️ 30 minutes</span>
            <span>🎬 1280×720 HD</span>
          </div>
          <p class="video-description">
            Complete guide to React Hooks including useState, useEffect, useContext, and custom hooks.
            Perfect for beginners looking to master modern React development!
          </p>
          <div class="tag-grid">
            <span class="video-tag">#React</span>
            <span class="video-tag">#Hooks</span>
            <span class="video-tag">#JavaScript</span>
          </div>
        </div>
      </div>
      <h2 style="color: #ec4899; margin: 30px 0 20px; font-size: 1.8rem;">Video Specifications</h2>
      <div class="specs-grid">
        <div class="spec-card">
          <div class="spec-icon">📐</div>
          <div class="spec-label">Resolution</div>
          <div class="spec-value">1280×720</div>
        </div>
        <div class="spec-card">
          <div class="spec-icon">⏱️</div>
          <div class="spec-label">Duration</div>
          <div class="spec-value">30 min</div>
        </div>
        <div class="spec-card">
          <div class="spec-icon">📹</div>
          <div class="spec-label">Format</div>
          <div class="spec-value">MP4</div>
        </div>
        <div class="spec-card">
          <div class="spec-icon">🔒</div>
          <div class="spec-label">Protocol</div>
          <div class="spec-value">HTTPS</div>
        </div>
      </div>
      <p style="text-align: center; color: #6b7280; margin-top: 30px; line-height: 1.6;">
        ✅ Video-specific Open Graph tags enable platforms to display rich video previews
        with playback controls, duration, and quality information.
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Optional but Recommended Tags

Additional tags that improve social sharing quality

<meta property="og:description" content="...">

2-3 sentence description. Can differ from meta description. 150-300 characters recommended.

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

Name of your overall website. Shown separately from page title on most platforms.

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

Language and region. Format: language_TERRITORY. Example: en_US, es_ES, fr_FR.

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

Image dimensions in pixels. Helps platforms display images faster without downloading first.

<meta property="og:image:alt" content="Description">

Alt text for the OG image. Important for accessibility and when images fail to load.

OG Image Best Practices

Size: 1200×630px - Recommended by Facebook, works well everywhere
Aspect ratio: 1.91:1 - Maintains quality across platforms
Format: JPG or PNG - JPG for photos, PNG for graphics with text
File size: Under 8MB - Most platforms have this limit
Min size: 200×200px - Smaller images may not display
Use absolute URLs - Include full https:// path
Add important text at center - Platforms may crop edges

Open Graph Best Practices

Always use absolute URLs - Include full https:// for images and URLs
Create custom OG images - Don't rely on random page images
Keep titles concise - Under 60 characters for best display
Write compelling descriptions - Encourage clicks with clear value
Match content type - Use "article" for blog posts, "video.other" for videos
Test before publishing - Use Facebook Debugger or LinkedIn Inspector
Include image dimensions - Speeds up preview generation
Use consistent site_name - Same across all pages for brand recognition

Testing Your Open Graph Tags

Tools to validate and debug your OG implementation

🔧 Facebook Sharing Debugger

Test and refresh Facebook's cache of your Open Graph tags

https://developers.facebook.com/tools/debug/

💼 LinkedIn Post Inspector

Validate OG tags for LinkedIn sharing

https://www.linkedin.com/post-inspector/

🐦 Twitter Card Validator

Preview how your content looks on Twitter/X

https://cards-dev.twitter.com/validator

✅ OpenGraph.xyz

Quick preview across multiple platforms

https://www.opengraph.xyz/

Common Open Graph Mistakes

Using relative URLs - Always use full https:// URLs
Wrong image dimensions - Use 1200×630px for best results
Forgetting og:url - Canonical URL is required
Missing og:type - Defaults to "website" but should be explicit
Not testing - Always validate with platform tools before sharing
Inconsistent content - OG tags should match actual page content
Image too large - Keep under 8MB for compatibility
Not updating cache - Use debuggers to refresh after changes

Platform Support

Open Graph is supported by all major social media platforms: Facebook, LinkedIn, Twitter/X, Discord, Slack, WhatsApp, Telegram, Pinterest, and Reddit. It's the standard for social sharing metadata.

Previous Topic

Meta Tags for SEO

Essential meta tags: description, keywords, robots, canonical.

Next Topic

Twitter Cards

Twitter-specific meta tags for rich previews.

Ask a Question

Have a question about Open Graph Protocol? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · SEO & Metadata

Open Graph Protocol

Control how your content appears when shared on social media platforms

Find videos you like?

Save to resource drawer for future reference!

What is Open Graph Protocol?

Understanding OG tags and their role in social media sharing

Rich Previews

Beautiful cards with images, titles, and descriptions when links are shared

Image Control

Choose exactly which image appears in social shares

Content Types

Different tags for articles, videos, products, and more

Basic Open Graph Tags

Essential OG tags for any web page with visual preview

Basic Open Graph Implementation

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Regular SEO Meta Tags -->
    <title>Ultimate Web Development Guide 2024 | CoderPod</title>
    <meta name="description" content="Master web development with comprehensive tutorials on HTML, CSS, JavaScript, and modern frameworks.">
    <!-- Open Graph Meta Tags for Social Media -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="Ultimate Web Development Guide 2024">
    <meta property="og:description" content="Master web development with comprehensive tutorials on HTML, CSS, JavaScript, and modern frameworks.">
    <meta property="og:image" content="https://coderpod.com/images/web-dev-guide-og.jpg">
    <meta property="og:url" content="https://coderpod.com/guides/web-development">
    <meta property="og:site_name" content="CoderPod">
    <meta property="og:locale" content="en_US">
  </head>
  <body>
    <div class="container">
      <h1>🌐 Open Graph Protocol</h1>
      <div class="info-box">
        <h3>💡 What is Open Graph?</h3>
        <p>
          Open Graph Protocol controls how your page appears when shared on social media platforms
          like Facebook, LinkedIn, Discord, and Slack. These meta tags create rich previews with
          images, titles, and descriptions.
        </p>
      </div>
      <h2 style="color: #3b82f6; margin: 30px 0 15px;">Preview: How Your Link Looks on Social Media</h2>
      <div class="og-preview">
        <div class="og-image">
          🚀 Web Development Guide
        </div>
        <div class="og-content">
          <div class="og-title">Ultimate Web Development Guide 2024</div>
          <div class="og-description">
            Master web development with comprehensive tutorials on HTML, CSS, JavaScript,
            and modern frameworks.
          </div>
          <a href="#" class="og-url">coderpod.com</a>
        </div>
      </div>
      <h2 style="color: #3b82f6; margin: 30px 0 15px;">Required Open Graph Tags</h2>
      <div class="tag-list">
        <code>&lt;meta property="og:title" content="Your Page Title"&gt;</code>
        <code>&lt;meta property="og:type" content="website"&gt;</code>
        <code>&lt;meta property="og:image" content="https://example.com/image.jpg"&gt;</code>
        <code>&lt;meta property="og:url" content="https://example.com/page"&gt;</code>
      </div>
      <p style="text-align: center; color: #6b7280; margin-top: 30px;">
        ✅ View the page source to see all Open Graph tags in the &lt;head&gt; section!
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Required Open Graph Tags

The four essential tags needed for proper social sharing

Critical Tags

These four tags are required for Open Graph to work properly. Without them, platforms will generate their own (often poor quality) previews.

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

Title of your content. Can be different from the <title> tag. Keep under 60 characters for best display.

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

Type of content. Common values: website, article,video.other, product. Determines what additional tags are available.

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

Preview image URL. Use absolute URL (with https://). Recommended size: 1200×630px. Supports JPG, PNG. Keep under 8MB.

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

Canonical URL. The permanent URL for this content. Should match your canonical link tag.

Article-Type Open Graph

Additional tags for blog posts and articles

Article Open Graph Tags

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10 Essential JavaScript Tips for Beginners | CoderPod Blog</title>
    <!-- Basic Open Graph Tags -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="10 Essential JavaScript Tips for Beginners">
    <meta property="og:description" content="Level up your JavaScript skills with these 10 essential tips and tricks. Perfect for beginners looking to write cleaner, more efficient code.">
    <meta property="og:image" content="https://coderpod.com/blog/js-tips-featured.jpg">
    <meta property="og:url" content="https://coderpod.com/blog/javascript-tips-beginners">
    <meta property="og:site_name" content="CoderPod Blog">
    <!-- Article-Specific Tags -->
    <meta property="article:published_time" content="2024-01-15T08:00:00Z">
    <meta property="article:modified_time" content="2024-01-20T14:30:00Z">
    <meta property="article:author" content="https://coderpod.com/authors/john-doe">
    <meta property="article:section" content="JavaScript">
    <meta property="article:tag" content="JavaScript">
    <meta property="article:tag" content="Programming">
    <meta property="article:tag" content="Tutorial">
    <!-- Image Details -->
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="JavaScript code on a laptop screen with colorful syntax highlighting">
  </head>
  <body>
    <div class="container">
      <div class="article-header">
        <h1>📝 Article-Type Open Graph</h1>
        <div class="meta-info">
          <span>📅 Published: Jan 15, 2024</span>
          <span>✏️ Updated: Jan 20, 2024</span>
          <span>👤 By: John Doe</span>
        </div>
        <div class="tag-container">
          <span class="tag">#JavaScript</span>
          <span class="tag">#Programming</span>
          <span class="tag">#Tutorial</span>
        </div>
      </div>
      <div class="og-specs">
        <h3>📊 Open Graph Specifications for Articles</h3>
        <div class="spec-grid">
          <div class="spec-item">
            <div class="spec-label">Type</div>
            <div class="spec-value">article</div>
          </div>
          <div class="spec-item">
            <div class="spec-label">Image Size</div>
            <div class="spec-value">1200×630px</div>
          </div>
          <div class="spec-item">
            <div class="spec-label">Published</div>
            <div class="spec-value">ISO 8601</div>
          </div>
          <div class="spec-item">
            <div class="spec-label">Section</div>
            <div class="spec-value">Category</div>
          </div>
        </div>
      </div>
      <h3 style="color: #f59e0b; margin: 30px 0 15px;">Article-Specific Tags:</h3>
      <div class="code-block">
        <code>
          &lt;!-- Article Metadata --&gt;<br>
          &lt;meta property="article:published_time" content="2024-01-15T08:00:00Z"&gt;<br>
          &lt;meta property="article:modified_time" content="2024-01-20T14:30:00Z"&gt;<br>
          &lt;meta property="article:author" content="Author URL"&gt;<br>
          &lt;meta property="article:section" content="JavaScript"&gt;<br>
          &lt;meta property="article:tag" content="JavaScript"&gt;<br>
          &lt;meta property="article:tag" content="Programming"&gt;<br>
          <br>
          &lt;!-- Image Details --&gt;<br>
          &lt;meta property="og:image:width" content="1200"&gt;<br>
          &lt;meta property="og:image:height" content="630"&gt;<br>
          &lt;meta property="og:image:alt" content="Descriptive alt text"&gt;
        </code>
      </div>
      <p style="text-align: center; color: #6b7280; margin-top: 30px; line-height: 1.6;">
        ✅ These additional tags help platforms like Facebook and LinkedIn show richer article previews
        with author info, publish dates, and proper categorization.
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Video Open Graph

Special tags for video content with embedded player support

Video Open Graph Tags

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn React Hooks in 30 Minutes | Video Tutorial</title>
    <!-- Video Open Graph Tags -->
    <meta property="og:type" content="video.other">
    <meta property="og:title" content="Learn React Hooks in 30 Minutes">
    <meta property="og:description" content="Complete guide to React Hooks including useState, useEffect, useContext, and custom hooks. Perfect for beginners!">
    <meta property="og:image" content="https://coderpod.com/videos/react-hooks-thumbnail.jpg">
    <meta property="og:url" content="https://coderpod.com/videos/react-hooks-tutorial">
    <meta property="og:site_name" content="CoderPod">
    <!-- Video-Specific Tags -->
    <meta property="og:video" content="https://coderpod.com/videos/react-hooks.mp4">
    <meta property="og:video:secure_url" content="https://coderpod.com/videos/react-hooks.mp4">
    <meta property="og:video:type" content="video/mp4">
    <meta property="og:video:width" content="1280">
    <meta property="og:video:height" content="720">
    <meta property="og:video:duration" content="1800">
    <!-- Additional Details -->
    <meta property="video:duration" content="1800">
    <meta property="video:release_date" content="2024-01-10T10:00:00Z">
    <meta property="video:tag" content="React">
    <meta property="video:tag" content="Hooks">
    <meta property="video:tag" content="JavaScript">
  </head>
  <body>
    <div class="container">
      <h1>🎥 Video Open Graph Tags</h1>
      <div class="video-preview">
        <div class="video-thumbnail">
          <div class="play-button">
            <div class="play-icon"></div>
          </div>
          <div style="font-size: 1.5rem; font-weight: bold;">Learn React Hooks</div>
          <div class="duration-badge">30:00</div>
        </div>
        <div class="video-info">
          <div class="video-title">Learn React Hooks in 30 Minutes</div>
          <div class="video-meta">
            <span>📅 Jan 10, 2024</span>
            <span>⏱️ 30 minutes</span>
            <span>🎬 1280×720 HD</span>
          </div>
          <p class="video-description">
            Complete guide to React Hooks including useState, useEffect, useContext, and custom hooks.
            Perfect for beginners looking to master modern React development!
          </p>
          <div class="tag-grid">
            <span class="video-tag">#React</span>
            <span class="video-tag">#Hooks</span>
            <span class="video-tag">#JavaScript</span>
          </div>
        </div>
      </div>
      <h2 style="color: #ec4899; margin: 30px 0 20px; font-size: 1.8rem;">Video Specifications</h2>
      <div class="specs-grid">
        <div class="spec-card">
          <div class="spec-icon">📐</div>
          <div class="spec-label">Resolution</div>
          <div class="spec-value">1280×720</div>
        </div>
        <div class="spec-card">
          <div class="spec-icon">⏱️</div>
          <div class="spec-label">Duration</div>
          <div class="spec-value">30 min</div>
        </div>
        <div class="spec-card">
          <div class="spec-icon">📹</div>
          <div class="spec-label">Format</div>
          <div class="spec-value">MP4</div>
        </div>
        <div class="spec-card">
          <div class="spec-icon">🔒</div>
          <div class="spec-label">Protocol</div>
          <div class="spec-value">HTTPS</div>
        </div>
      </div>
      <p style="text-align: center; color: #6b7280; margin-top: 30px; line-height: 1.6;">
        ✅ Video-specific Open Graph tags enable platforms to display rich video previews
        with playback controls, duration, and quality information.
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Optional but Recommended Tags

Additional tags that improve social sharing quality

<meta property="og:description" content="...">

2-3 sentence description. Can differ from meta description. 150-300 characters recommended.

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

Name of your overall website. Shown separately from page title on most platforms.

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

Language and region. Format: language_TERRITORY. Example: en_US, es_ES, fr_FR.

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

Image dimensions in pixels. Helps platforms display images faster without downloading first.

<meta property="og:image:alt" content="Description">

Alt text for the OG image. Important for accessibility and when images fail to load.

OG Image Best Practices

Size: 1200×630px - Recommended by Facebook, works well everywhere
Aspect ratio: 1.91:1 - Maintains quality across platforms
Format: JPG or PNG - JPG for photos, PNG for graphics with text
File size: Under 8MB - Most platforms have this limit
Min size: 200×200px - Smaller images may not display
Use absolute URLs - Include full https:// path
Add important text at center - Platforms may crop edges

Open Graph Best Practices

Always use absolute URLs - Include full https:// for images and URLs
Create custom OG images - Don't rely on random page images
Keep titles concise - Under 60 characters for best display
Write compelling descriptions - Encourage clicks with clear value
Match content type - Use "article" for blog posts, "video.other" for videos
Test before publishing - Use Facebook Debugger or LinkedIn Inspector
Include image dimensions - Speeds up preview generation
Use consistent site_name - Same across all pages for brand recognition

Testing Your Open Graph Tags

Tools to validate and debug your OG implementation

🔧 Facebook Sharing Debugger

Test and refresh Facebook's cache of your Open Graph tags

https://developers.facebook.com/tools/debug/

💼 LinkedIn Post Inspector

Validate OG tags for LinkedIn sharing

https://www.linkedin.com/post-inspector/

🐦 Twitter Card Validator

Preview how your content looks on Twitter/X

https://cards-dev.twitter.com/validator

✅ OpenGraph.xyz

Quick preview across multiple platforms

https://www.opengraph.xyz/

Common Open Graph Mistakes

Using relative URLs - Always use full https:// URLs
Wrong image dimensions - Use 1200×630px for best results
Forgetting og:url - Canonical URL is required
Missing og:type - Defaults to "website" but should be explicit
Not testing - Always validate with platform tools before sharing
Inconsistent content - OG tags should match actual page content
Image too large - Keep under 8MB for compatibility
Not updating cache - Use debuggers to refresh after changes

Platform Support

Open Graph is supported by all major social media platforms: Facebook, LinkedIn, Twitter/X, Discord, Slack, WhatsApp, Telegram, Pinterest, and Reddit. It's the standard for social sharing metadata.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Meta Tags for SEO

Twitter Cards

HTML Code Editor

Building Your Learning Module...

Open Graph Protocol

Rich Previews

Image Control

Content Types

Basic Open Graph Implementation

Critical Tags

Article Open Graph Tags

Video Open Graph Tags

OG Image Best Practices

Open Graph Best Practices

🔧 Facebook Sharing Debugger

💼 LinkedIn Post Inspector

🐦 Twitter Card Validator

✅ OpenGraph.xyz

Common Open Graph Mistakes

Platform Support

Meta Tags for SEO

Twitter Cards

HTML Code Editor

Open Graph Protocol

Rich Previews

Image Control

Content Types

Basic Open Graph Implementation

Critical Tags

Article Open Graph Tags

Video Open Graph Tags

OG Image Best Practices

Open Graph Best Practices

🔧 Facebook Sharing Debugger

💼 LinkedIn Post Inspector

🐦 Twitter Card Validator

✅ OpenGraph.xyz

Common Open Graph Mistakes

Platform Support