Open Graph PreviewOpen Graph Preview
Back to Knowledge Base
Open GraphSocial MediaMeta Tags

Open Graph: How Social Platforms Generate Link Previews

Feb 4, 2026|7 min read

When a link is shared on social media, the preview you see is not random.
It's generated using Open Graph metadata — a standard that tells platforms how your page should look when shared.

This article explains what Open Graph is, how social platforms read it, and why previews sometimes break or look wrong.

Table of Contents

What is Open Graph?

Open Graph is a metadata protocol originally introduced by Facebook.
It allows any webpage to become a rich object when shared on social platforms.

Open Graph tags live in the <head> of your HTML and describe the title, description, image, URL, and content type.

Example:

html
<meta property="og:title" content="Open Graph Explained" />
<meta property="og:description" content="How social platforms generate link previews." />
<meta property="og:image" content="https://example.com/og.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

How link previews are generated

When a link is shared, the platform fetches the page HTML, scans the <head> section, extracts Open Graph tags, downloads the OG image, caches the preview, and finally renders the card in the feed or chat.

Important:
This happens server-side, without JavaScript execution.

Core Open Graph tags

og:title

The main headline of the preview.

Q: Can this be different from <title>?
A: Yes — and often should be for social sharing.

og:description

A short summary shown under the title.

Tip:
Write for humans, not keywords. Social previews are about attention.

og:image

The visual anchor of the preview.

Q: What happens if it's missing?
A: Platforms may show no image or pick a random one.

og:url

Defines the canonical URL of the shared object.

It prevents duplicate previews and ensures consistent caching.

og:type

Describes the content type, such as website, article, or video.

Use article for blog posts and long-form content.

How different platforms use Open Graph

Facebook uses strict OG parsing with heavy caching via the Facebook Scraper. WhatsApp uses OG but with stricter image rules and sensitivity to redirects/HTTPS. Telegram reads OG (and sometimes Twitter Cards) with faster cache refresh. Threads/Instagram rely on Meta's OG infrastructure.

Key takeaway:
One Open Graph setup must work across multiple parsers.

Caching and preview updates

Q: Why does my preview not update after changes?
A: Because platforms cache OG data.

Facebook has a long-lived cache, WhatsApp has an unpredictable cache duration, and Telegram has a shorter but persistent cache.

Best practice:

Version OG image URLs, avoid reusing old image filenames, and keep og:url stable.

Common Open Graph mistakes

1) Relying on JavaScript

OG tags injected by JS are often ignored.

2) Using relative URLs

OG tags must use absolute URLs.

3) Blocking crawlers

Firewalls, bot protection, or auth walls break previews.

4) Oversized or slow images

Large images may time out during fetch.

FAQ

Is Open Graph a ranking factor?

No. But it strongly impacts click-through rate and engagement.

Do I need Open Graph if I already have meta tags?

Yes. Meta tags are for search engines; OG is for social platforms.

Can I test Open Graph before publishing?

Yes. Draft and preview OG metadata before deploying to avoid broken previews.

Next to read

Master Your Previews

Ready to apply these insights? Use our professional-grade tool to draft and verify your metadata.

Open Designer Tool →