What Is Open Graph? Complete Guide
Learn what the Open Graph protocol is, why it matters for social sharing, and how to implement OG meta tags on any website.
Every time you paste a URL into Facebook, LinkedIn, Slack, Discord, or WhatsApp, the platform renders a rich visual card with a title, description, and thumbnail image. The invisible technology powering this experience is the Open Graph protocol.
If you’ve ever shared a link and seen a blank box or wrong image, your Open Graph tags are either missing or misconfigured. This guide explains what Open Graph is, how it works under the hood, and how to implement it correctly on any website.
The Origin of Open Graph
Facebook introduced the Open Graph protocol in 2010 at its f8 developer conference. The goal was simple: give web developers a standardized way to control how their URLs appear when shared on social media.
Before Open Graph, platforms would scrape your page and guess which text and image to display — often with terrible results. Open Graph solved this by defining a set of <meta> tags that explicitly tell crawlers what title, description, image, and URL to use.
Today, Open Graph is supported by virtually every social platform, messaging app, and content aggregator on the web.
How Open Graph Works
When someone shares a URL, the platform sends a crawler (a bot) to fetch the page’s HTML. The crawler reads the <head> section and looks for Open Graph meta tags with the property attribute prefixed by og:.
Here’s the minimum set of tags every page should include:
<meta property="og:title" content="What Is Open Graph? Complete Guide" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/what-is-open-graph" />
<meta property="og:image" content="https://example.com/images/og-banner.png" />
<meta property="og:description" content="Learn what the Open Graph protocol is and how to implement OG meta tags." />The crawler extracts these values and renders them into a preview card that users see in their feed or chat window.
The Four Required Open Graph Properties
The Open Graph specification defines four mandatory properties:
| Property | Description | Example |
|---|---|---|
og:title |
The headline shown in the preview card | "What Is Open Graph?" |
og:type |
The content type classification | "website", "article", "product" |
og:url |
The canonical URL of the page | "https://example.com/page" |
og:image |
The preview image URL (must be absolute) | "https://example.com/banner.png" |
Without these four tags, many platforms will either fall back to scraping your <title> tag or display no preview card at all.
Recommended Open Graph Properties
Beyond the four required tags, these additional properties significantly improve preview quality:
og:description— A 1–2 sentence summary (keep under 200 characters for best rendering).og:site_name— Your brand or website name (e.g.,"Open Graph Generator").og:locale— The language and region code (e.g.,"en_US","fr_FR"). Learn more in our Open Graph Locale Explained guide.og:image:widthandog:image:height— Explicit image dimensions help platforms render cards faster without downloading the full image first.og:image:alt— Accessibility text for the preview image.
Open Graph vs Standard HTML Meta Tags
A common question is whether Open Graph replaces standard HTML <meta> tags. The short answer: no. They serve different audiences.
- Standard
<title>and<meta name="description">are read by search engines like Google for indexing and SERP snippets. - Open Graph
og:titleandog:descriptionare read by social media crawlers for preview card rendering.
You should always include both. For a deeper comparison, see our Open Graph vs Meta Tags article.
Where to Put Open Graph Tags
All Open Graph meta tags must be placed inside the <head> element of your HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>What Is Open Graph? Complete Guide</title>
<!-- Open Graph Tags -->
<meta property="og:title" content="What Is Open Graph? Complete Guide" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/what-is-open-graph" />
<meta property="og:image" content="https://example.com/images/og-banner.png" />
<meta property="og:description" content="Learn what Open Graph is and how to add OG tags to your website." />
<meta property="og:site_name" content="Open Graph Generator" />
</head>Testing Your Open Graph Tags
After adding OG tags to your pages, always test them before sharing publicly. Social crawlers cache preview data aggressively, and fixing a bad first impression is painful.
Use our free Open Graph Inspector to scrape any URL and preview how it renders across Facebook, LinkedIn, Twitter/X, Discord, WhatsApp, Slack, and Telegram simultaneously.
For a complete testing workflow, read How to Test Open Graph Tags.
Next Steps
Now that you understand what Open Graph is and how it works, explore these related guides:
- Open Graph Tags: Complete List With Examples — Every OG property documented with code samples.
- Open Graph Protocol: Complete Developer Guide — Deep technical dive into the OG specification.
- The Complete Guide to Open Graph Protocols — Our comprehensive pillar guide covering image optimization, type properties, and SPA considerations.