What is Open Graph? All You need to know about the OG Image for Social Media

When you copy and paste a web page link to X (Twitter), Slack, Facebook, or WeChat, sometimes it only appears as a standard blue link (or even a jumbled string of URLs); other times, it transforms into a well-designed social share card with a cover image, title, and a short description.

This is the social experience optimized with the Open Graph Protocol.

Today, we’ll explore what Open Graph is and how it shapes your website’s experience on social media platforms.

Why Do Shared Links Show Image-Text Banners?

When you paste a web link to Facebook, X (Twitter), LinkedIn, WeChat group chats, or Slack, the platform typically sends a “crawler bot” to visit the page, read “machine-readable information,” and generate a link preview card (also called a share card).

This card usually includes:

Title (lets people know what you’re talking about)
Description (a 2-3 line summary)
Image (the most eye-catching cover)
Supplementary information like source domain/author (varies by platform)

The OG Protocol is designed to standardize this “instruction manual for card information.”

The Origin of Open Graph: Proposed by Facebook to Solve What Problem?

The Open Graph Protocol (referred to as OG Protocol) was first proposed by Facebook in 2010.

Before the OG Protocol existed, when you shared a link on social platforms, the platform’s crawler would scrape information from your web page. However, crawlers are “clumsy”—they couldn’t identify which image was the key one or which text was the summary. As a result, they often scraped sidebar ad images or footer copyright statements as the description.

To solve this problem, Facebook created a set of rules: let web developers tell social platforms exactly what they want to display.

Through this protocol, ordinary web pages become “Rich Media Objects” in the social graph. Simply put, the OG Protocol allows website owners/developers to explicitly inform platforms: Please generate the share card using the title, description, and image I specify.

Basic Principles of Open Graph

The Open Graph Protocol doesn’t require installing complex software—it’s just a set of Meta tags (og tags) placed in the <head> section of a web page’s HTML code.

These tags are invisible to regular users browsing the page and only take effect when social platform crawlers access the page.

Detailed Explanation of Core OG Tags

While the Open Graph Protocol includes many attributes, mastering the following core tags is sufficient for most websites:

1. `og:title` (Title)

Purpose: Defines the main title displayed on the share card.
Note: It doesn’t have to match the page’s original <title> tag. You can create a more eye-catching, “clickbait-style” title specifically for social media without affecting the original page title used for SEO.

2. `og:description` (Description)

Purpose: A short 1-2 sentence introduction below the title.
Tip: Like a movie synopsis, its goal is to spark curiosity and drive clicks. It’s recommended to keep it within 2-4 sentences.

3. `og:image` (Image)

Purpose: This is the most important tag! It defines the large image on the share card.
Importance: In the visual age, a well-designed OG image can double click-through rates. Without this tag, platforms may randomly scrape images from the page—usually with disastrous results.

4. `og:url` (URL)

Purpose: Defines the canonical URL for the page.
Use Case: Ensures that regardless of whether users share a link with parameters (e.g., example.com/?source=wechat), the final analytics and redirection point to the original clean link.

5. `og:type` (Type)

Purpose: Defines the content type (e.g., article/website/video/product).
Use Case: Platforms render the card style based on this value.

6. `og:site_name` (Site Name)

Purpose: Displays the site name at the bottom of the card.

Simple Code Example: How to Configure Open Graph

To configure OG on your website, add the following code between the <head> and </head> tags in your HTML:

<head>
    <!-- Tell the platform this is the article title -->
    <meta property="og:title" content="A Beginner's Guide to the Open Graph Protocol" />

    <!-- Tell the platform this is the article summary -->
    <meta property="og:description" content="Learn what OG tags are and how to make your website links look better on social media." />

    <!-- Tell the platform to display this image (critical!) -->
    <meta property="og:image" content="https://example.com/images/og-cover.jpg" />

    <!-- Tell the platform this is the standard URL for the page -->
    <meta property="og:url" content="https://example.com/blog/what-is-open-graph" />

    <!-- Optional: Define content type (e.g., website or article) -->
    <meta property="og:type" content="article" />
</head>

Tips:

Use absolute URLs (full URLs with https://) for og:image
Ensure images are publicly accessible—avoid login requirements, anti-scraping measures, or 403 errors that cause scraping failures
Different platforms cache preview results; after modifying OG tags, it may take time for changes to take effect, or you can use the platform’s debugging tools to refresh the cache

Open Graph Support Across Major Platforms

Although OG was invented by Facebook, it has become a universal industry standard worldwide.

International Platforms (Facebook, LinkedIn, Discord, Slack, etc.):Full support. With the above tags configured, links automatically expand into attractive large cards.Note: Twitter (X) has its own twitter:card tags, but if none are detected, it falls back to OG tags—making OG configuration the most cost-effective option.
Chinese Internet Ecosystem (WeChat, Weibo, DingTalk, etc.):
- Weibo, Zhihu, DingTalk, Lark: Good support for Open Graph; cards are usually scraped and displayed correctly.
- WeChat: The situation is slightly special. WeChat initially supported the OG Protocol but now restricts link scraping for direct shares to prevent abuse. Perfect custom share cards usually require integration with the WeChat JS-SDK. However, configuring OG tags is still fundamental—they are still read when links are opened in WeChat Desktop, QQ, or other browsers.

Platform-Specific OG Configurations

Different platforms have unique parsing rules and requirements for OG tags. Below are tailored configuration solutions for Facebook, X (Twitter), Instagram, and LinkedIn:

1. Facebook (Birthplace of the OG Protocol)

Facebook offers the most complete support for OG tags. In addition to core tags, we recommend adding these platform-specific configurations:

Image Size Requirements: Recommended 1200×630px (1.91:1 aspect ratio), minimum 600×315px, maximum file size 8MB;
Special Tags:
- og:locale: Content language (e.g., zh_CN/en_US);
- og:image:width/og:image:height: Specify image dimensions to avoid platform re-cropping;
- og:video (optional): If the page contains video, specify the video URL (supports MP4, WebM).

Facebook Configuration Code Example

<head>
  <!-- Core OG Tags -->
  <meta property="og:title" content="A Complete Guide to Open Graph Protocol Configuration Across Platforms" />
  <meta property="og:description" content="From basics to advanced, master share card configuration for Facebook, Twitter, and LinkedIn" />
  <meta property="og:image" content="https://example.com/images/og-facebook.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:url" content="https://example.com/blog/og-complete-guide" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="XX Tech Blog" />

  <!-- Facebook-Specific Additions -->
  <meta property="og:locale" content="zh_CN" />
  <!-- Add if video is available -->
  <!-- <meta property="og:video" content="https://example.com/videos/og-demo.mp4" /> -->
</head>

Debugging Tool

Facebook provides an official debugging tool: Sharing Debugger (to verify tag configuration and refresh platform cache).

2. X (Twitter, Formerly Twitter)

Twitter has its own twitter:* tag system. If not configured, it falls back to OG tags—but custom configuration enables precise control over display effects:

Core Platform-Specific Tags:
- twitter:card: Card type (required), options:
  - summary: Small card (small left image + right text, 144×144px);
  - summary_large_image: Large image card (recommended, 1200×600px, compatible with OG image dimensions);
  - player: Video/audio card (for media content);
- twitter:site: Associated Twitter account (e.g., @your_account);
- twitter:title/twitter:description: Higher priority than OG tags, can be customized separately;
- twitter:image: Specify card image (higher priority than og:image).
Image Requirements: Supports JPG, PNG, WEBP; no copyrighted watermarks; avoid sensitive content.

X (Twitter) Configuration Code Example

<head>
  <!-- Core OG Tags (as fallback) -->
  <meta property="og:title" content="A Complete Guide to Open Graph Protocol Configuration Across Platforms" />
  <meta property="og:description" content="From basics to advanced, master share card configuration for all platforms" />
  <meta property="og:image" content="https://example.com/images/og-twitter.jpg" />

  <!-- Twitter-Specific Tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@your_twitter_account" />
  <meta name="twitter:title" content="【Ultimate Guide】OG Protocol Configuration: Covering Twitter/Facebook/LinkedIn" />
  <meta name="twitter:description" content="Master share card setup for all platforms in 3 minutes and double click-through rates!" />
  <meta name="twitter:image" content="https://example.com/images/og-twitter.jpg" />
</head>

Debugging Tool

Twitter’s official debugging tool: Card Validator (requires account login).

3. Instagram (Based on Facebook Ecosystem)

Instagram has no proprietary OG tags and fully reuses Facebook’s OG configuration, but two key considerations apply:

Image Adaptation: Recommended square images (1080×1080px) or 1.91:1 aspect ratio images (compatible with Facebook) to avoid cropping;
Content Restrictions: Instagram strictly limits link scraping—only “blue verified accounts” and “promoted posts” support direct redirects. Regular accounts must guide users to click bio links, but OG cards still work for “private message shares” and “Reels link attachments.”

Instagram Adaptation Recommendations

Reuse Facebook’s OG configuration and additionally ensure:

<!-- Add Instagram-friendly image dimensions (square) -->
<meta property="og:image" content="https://example.com/images/og-instagram.jpg" />
<meta property="og:image:width" content="1080" />
<meta property="og:image:height" content="1080" />

LinkedIn parses OG tags conservatively and requires strict adherence to these rules:

Core Requirements:
- Must include og:title/og:description/og:image/og:url (no exceptions);
- Description text limit: Maximum 156 characters (truncated if exceeded);
- Image size: Recommended 1200×630px (same as Facebook), minimum 800×400px, file size ≤ 5MB;
Special Rules: LinkedIn caches OG information for approximately 7 days—use debugging tools to force a refresh after modifications.

LinkedIn Configuration Code Example

<head>
  <!-- Core LinkedIn OG Configuration (strict character limit) -->
  <meta property="og:title" content="OG Protocol Configuration Guide: Boost Professional Content Share Conversions" />
  <meta property="og:description" content="Master LinkedIn share card setup to make your professional content more engaging (within 156 characters)" />
  <meta property="og:image" content="https://example.com/images/og-linkedin.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:url" content="https://example.com/blog/og-linkedin-guide" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="XX Workplace Research Institute" />
</head>

Debugging Tool

LinkedIn’s official debugging tool: Post Inspector.

The Relationship Between Open Graph and SEO

Many beginners ask: “Will adding OG tags improve my Google/Bing rankings?”

The answer: Not directly, but it can help indirectly.

Search engines (e.g., Google) explicitly state that OG tags are not direct ranking factors. However, web pages with configured OG tags look better on social media, leading to:

Higher Click-Through Rates (CTR): Eye-catching image-text cards attract more clicks than plain text links.
More Social Shares: Professional-looking links are more likely to be shared by users.

Increased traffic and social signals ultimately have a positive impact on your website’s authority.

Common Issues

Resolving Cache Problems

All platforms cache OG information. After modifications:

Use the platform’s debugging tool (e.g., Facebook Sharing Debugger) to refresh the cache;
If refreshing fails, temporarily modify the og:url (e.g., add a random parameter ?v=2) and revert it to trigger re-scraping by the platform.

Compliance and Accessibility

Add the og:image:alt tag (image description) to improve experience for visually impaired users;
Avoid violating or exaggerated language in titles/descriptions—platforms may block card display otherwise.

Final Thoughts

The Open Graph Protocol is not advanced technology—it’s simply a tool created to deliver a better user experience for social media sharing.

Without it, your links are “exposed”—lacking sufficient context and visual appeal.
With it, your links are fully controllable—you can customize them for optimal performance.

After learning about og:title and og:description, you’ll find that the hardest part to get right is actually og:image. After all, writing a title is easy, but designing a dedicated 1200x630px cover image for every page on your website is more complex. Of course, we’ll discuss this in detail next.

Why Do Shared Links Show Image-Text Banners?

The Origin of Open Graph: Proposed by Facebook to Solve What Problem?

Basic Principles of Open Graph

Detailed Explanation of Core OG Tags

1. og:title (Title)

2. og:description (Description)

3. og:image (Image)

4. og:url (URL)

5. og:type (Type)

6. og:site_name (Site Name)

Simple Code Example: How to Configure Open Graph

Open Graph Support Across Major Platforms

Platform-Specific OG Configurations

1. Facebook (Birthplace of the OG Protocol)

Facebook Configuration Code Example

Debugging Tool

2. X (Twitter, Formerly Twitter)

X (Twitter) Configuration Code Example

Debugging Tool

3. Instagram (Based on Facebook Ecosystem)

Instagram Adaptation Recommendations

4. LinkedIn (Professional Social Platform)

LinkedIn Configuration Code Example

Debugging Tool

The Relationship Between Open Graph and SEO

Common Issues

Resolving Cache Problems

Compliance and Accessibility

Final Thoughts

1. `og:title` (Title)

2. `og:description` (Description)

3. `og:image` (Image)

4. `og:url` (URL)

5. `og:type` (Type)

6. `og:site_name` (Site Name)