What Is Open Graph? The Protocol Behind Your Link Previews

Q: What is Open Graph in simple terms?

Open Graph is a set of HTML meta tags that controls how a link looks when shared on social media and messaging apps — the title, description, image and URL that appear in the preview card.

Q: What are the four required Open Graph tags?

og:title (the card headline), og:description (the summary line), og:image (the preview picture, ideally 1200×630) and og:url (the canonical address). These four cover the vast majority of share scenarios.

Q: Does Open Graph affect SEO?

Not directly — og:* tags are not a Google ranking factor. They affect click-through rates: a link with a proper image and clean title earns more clicks, and clicks are the engagement signal search engines do notice.

Q: What is the difference between Open Graph and Schema.org?

They solve different problems. Open Graph meta tags tell social platforms how to render a share card. Schema.org JSON-LD is structured data that tells search engines what your content means (product, recipe, article). They live in the same head but never conflict.

Q: How do I add Open Graph tags to my website?

Add four meta tags to the head of every page you want shareable — og:title, og:description, og:image and og:url — with absolute https:// values. Then verify with a checker. Most CMSs have an SEO plugin that manages these for you.

You send a link in a group chat. Half the people see a neat card with a picture, a title and a description. The other half see a bare line of blue text — no image, no context, nothing worth tapping.

The difference between those two outcomes is not luck, budget or a designer. It is a handful of meta tags called Open Graph — and getting them right takes about two minutes per page. Here is what the protocol actually is, what it controls in 2026, and how to check your own pages in seconds.

What is the Open Graph Protocol?

The Open Graph Protocol (OGP) is a specification for meta tags — the “open graph in HTML” standard — the open graph meaning, simply: a shared vocabulary pages use to describe themselves to platforms — — that lets any web page become a rich object in a social graph. Facebook introduced it in 2010, ahead of the launch of the “Like” button — the idea was that a page needed a standard way to describe itself so platforms could render it as a card instead of a bare link.

That is how Open Graph works, end to end — the full “how does Open Graph work” chain in one sentence: your page declares og:* meta tags in its <head>, a platform’s crawler fetches the page and reads those tags, and the platform renders them as a preview card. The crawler does not run your JavaScript and does not guess from your page copy — it reads the tags you wrote, verbatim.

Who reads the open graph protocol today? Nearly everything that renders a link preview: Facebook, LinkedIn, Discord, Slack, Telegram, Reddit, WhatsApp and iMessage all parse og:* tags. X (Twitter) runs its own Twitter Cards vocabulary but falls back to Open Graph values when the twitter:* equivalents are absent. If you write correct OG tags once, every major platform inherits them.

The protocol lives at ogp.me and is deliberately minimal. It defines the tag names and a few structured properties — it does not mandate image dimensions or file sizes. The practical numbers (1200×630 for images, 300 KB for WhatsApp) come from how each platform implemented the spec, which is why they vary.

The four OG tags every page needs

Four og tags carry almost all the value — if you have ever wondered “what is an og tag”, the answer is these four. If you only add these, you are covered:

og:title — the headline of your card. Platforms truncate around 60 characters, so front-load the words that matter. It does not have to match your <title> tag; the card version can be punchier.

<meta property="og:title" content="OG Image Size Guide for Every Platform" />

og:description — the summary line under the title. Around 200 characters of actual pitch, not a keyword list. If you omit it, platforms improvise from your page text and often pick the wrong sentence.

<meta property="og:description" content="Exact dimensions for Facebook, X, LinkedIn and WhatsApp — plus a free checker to verify yours." />

og:image — the preview picture and the single biggest click driver. The working open graph image size is 1200×630 pixels; use an absolute https:// URL (relative paths break crawlers), and declare og:image:width and og:image:height so platforms can reserve layout space before downloading.

<meta property="og:image" content="https://ogimagechecker.com/blog-images/what-is-open-graph.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

og:url — the canonical address this content lives at. When the same article is reachable at several URLs, this tag tells platforms which one to consolidate shares and likes against.

<meta property="og:url" content="https://ogimagechecker.com/blog/what-is-open-graph/" />

Together these four are the open graph meta tags that do 95% of the work — that code block is a complete, working open graph example you can copy. A second tier — og:type, og:site_name, og:locale, twitter:card — adds polish, but never at the cost of getting the first four right.

Where Open Graph stands in 2026

Sixteen years after launch, the Facebook open graph protocol is more relevant than when it shipped — because link sharing moved from public timelines into private channels. WhatsApp, Slack, Discord, Telegram and iMessage all render OG cards inside conversations, and those cards are seen by small, high-trust audiences rather than scrolled past in a feed.

The platforms have also evolved past the base spec in their own directions: X layered Twitter Cards on top (with a fallback to OG), Pinterest built Rich Pins, LinkedIn re-crops everything to its own frame. But the base layer held. Write correct og:* tags and you are compatible with all of them at once — no per-platform tags required, with the single exception of X’s optional twitter:image override.

That is the practical takeaway for anyone shipping a site in 2026: open graph social media integration is not a feature you build; it is a standard you comply with. Four tags, correct values, done.

Open Graph vs Twitter Cards vs JSON-LD

Three vocabularies live in the same <head> and people mix them up constantly. They answer different questions:

Open Graph (og:*) — “what does this link look like when shared?” Read by Facebook, LinkedIn, WhatsApp, Discord, Slack, Telegram and Reddit.
Twitter Cards (twitter:*) — “what does this link look like on X specifically?” X reads these first, then falls back to og:* values. Correct OG tags cover X in most cases.
JSON-LD (Schema.org) — “what does this content mean to a search engine?” Recipe, product, article, FAQ. Nothing to do with share cards; no platform renders it as a preview. (The phrase “open graph data” you sometimes see refers to the og:* values themselves — the data platforms extract from the page — not to JSON-LD.)

None of them conflict — they can coexist in the same head. As for open graph seo: og:* tags are not a ranking factor in Google’s algorithm, but they strongly affect whether people click your result when it is shared, and engagement is the indirect signal search engines do reward.

How to test your Open Graph tags (in 10 seconds)

Reading about tags is not the same as knowing yours are right — and while writing this guide we ran the checker on our own pages and the sites we reference, catching a missing twitter:card on one and an oversized image on another, both invisible in the browser. Here is how to test yours:

Paste your live URL into the OG Image Checker — it fetches the page the way a platform crawler would.
Scan the audit table — every og:* and twitter:* tag gets a pass / warn / fail verdict with the exact fix.
Check the 8-platform previews — X, Facebook, LinkedIn, WhatsApp, Discord, Slack, Telegram and Reddit, side by side, with the 0–100 score.

Facebook’s Sharing Debugger and X’s Card Validator remain useful for forcing a cache refresh after you change an image. But for an everyday audit — tags, image, previews, score in one pass — the checker above is the faster loop.

How to fix what you find

The most common failure the audit flags is a missing or undersized og:image. If that is your situation, the free OG Image Generator produces a compliant 1200×630 card in about thirty seconds: pick one of eight templates, type your title, choose a brand color, export. Your detected title and description can be carried over from the checker automatically.

Building your first side project? If the tags themselves are missing, add the four lines from the section above to your template — or let your SEO plugin (Yoast, Rank Math) manage them, then re-check after deploying.

FAQ

What is Open Graph in simple terms?

A set of HTML meta tags that controls how a link looks when shared — the title, description, image and URL in the preview card. Without them, platforms improvise, and the improvisation is usually bad.

What are the four required Open Graph tags?

og:title, og:description, og:image and og:url. These four cover nearly every share scenario; everything else is polish.

Does Open Graph affect SEO?

Not as a direct ranking factor. It affects click-through rates — a rich card earns more taps than a bare URL — and clicks are the engagement signal search engines do notice. Treat it as CTR infrastructure, not ranking juice.

What is the difference between Open Graph and Schema.org?

Different audiences. Open Graph meta tags are for social platforms rendering share cards; Schema.org JSON-LD is structured data for search engines understanding your content. Same <head>, different jobs, no conflict.

How do I add Open Graph tags to my website?

Add the four meta tags to your page template’s <head> with absolute https:// values, deploy, then verify with the checker above. On WordPress or Shopify, your SEO plugin likely has fields for exactly these — fill them in rather than editing templates by hand.