What are Open Graph tags?

Open Graph tags are HTML meta tags that tell social media platforms how to display your link when shared. They include og:title (the headline), og:description (the summary), og:image (the preview image), and og:url (the canonical URL).

Do I need Open Graph tags for my website?

If you share your website links on any social platform — X, LinkedIn, Slack, Discord, WhatsApp, or Reddit — you need Open Graph tags. Without them, platforms guess how to display your link, and they guess poorly.

Is Open Graph the same as Twitter Cards?

No. Open Graph was created by Facebook in 2010. Twitter Cards were created by Twitter separately. However, most platforms support both, and you should set both for maximum compatibility.

What is Open Graph? A Complete Beginner's Guide

You share a link on social media. The preview looks terrible. Here's why — and how Open Graph tags fix it.

Want to see how your links actually look?

Check your Open Graph tags free with Proovd — paste a URL and see the preview on X, LinkedIn, Slack, Discord, WhatsApp, and Reddit before you share.

Quick Answer

Open Graph is a set of HTML meta tags that control how links look on social media
Core tags: og:title, og:description, og:image, og:url
Without OG tags, platforms guess — and they guess badly
Set OG tags + Twitter Card tags for full coverage

What Open Graph Actually Is

Open Graph is a protocol invented by Facebook in 2010. Before Open Graph, when someone shared a link on Facebook, the preview was unpredictable. Facebook would scrape the page looking for images and text, and the result was often random — sometimes a tiny favicon, sometimes a random photo from the page, sometimes nothing at all.

Facebook said: "Let's give webmasters a standard way to tell us what to show." They introduced a set of meta tags that any website could add to their HTML. Other platforms — X, LinkedIn, Slack, Discord, WhatsApp, Reddit — adopted the same standard. Today, Open Graph is the universal language for link previews on the internet.

It's not a technology you install. It's just HTML meta tags in your page's <head> section. That's it.

The Core Open Graph Tags

Every page that gets shared on social media should have at least these four tags:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling one-sentence summary." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />

Here's what each one does:

og:title — The headline that appears in the preview card. Usually the page title or article headline.
og:description — A brief summary (2-3 sentences) that appears below the title.
og:image — The preview image. Recommended size: 1200×630 pixels (1.91:1 ratio).
og:url — The canonical URL of the page. Helps platforms identify the correct URL.

There are additional optional tags like og:type (usually "website" or "article"), og:site_name (your brand name), and og:locale (language). But the four above are the ones that matter most for link previews.

How Open Graph Works — Step by Step

Here's what happens when someone shares a link:

Someone pastes a URL in X, LinkedIn, Slack, Discord, or wherever.
The platform's bot fetches the URL and reads the HTML from top to bottom.
It looks for og: tags in the <head> section.
It builds a preview card using the og:title, og:description, and og:image values.
The card is displayed to anyone who sees the shared link.

If the platform doesn't find og: tags, it falls back to its own heuristics — picking random images, using the <title> tag, etc. This fallback behavior is why so many shared links look terrible.

Open Graph vs. Twitter Cards

Twitter created its own tag system called "Twitter Cards" before Open Graph existed. Twitter Cards use twitter:card, twitter:title, twitter:description, and twitter:image attributes instead of og: prefixes.

Today, most platforms support both. But X/Twitter still prefers twitter:card tags over OG tags. That's why the best practice is to set both:

<!-- Open Graph (works on LinkedIn, Discord, Slack, WhatsApp, Reddit) -->
<meta property="og:title" content="Your Title" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />

<!-- Twitter/X (works on X/Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Why This Matters for Your Website

If you share your content anywhere on social media — which you probably do if you have a website — your link previews are your first impression. A well-crafted preview with a clear title, compelling description, and a good image dramatically increases click-through rates.

A broken preview — missing image, truncated title, or garbled description — makes your content look unprofessional. People scroll past it.

Open Graph tags are the difference between the two. They take 5 minutes to set up and have a disproportionate impact on how your content performs on social media.

Quick Checklist

Add og:title, og:description, og:image, and og:url to every page
Add twitter:card and twitter:image for X/Twitter compatibility
Set image size to 1200×630 pixels
Use absolute URLs (https://...) for all image paths
Test with Proovd to see how your page looks on all platforms

Frequently Asked Questions

Do I need Open Graph tags if I don't share on social media?

If you don't share links anywhere, you don't need them. But if you have a website and share it even once on social media, OG tags are essential.

Do Open Graph tags affect Google rankings?

Not directly. Google doesn't use OG tags as a ranking factor. But they can affect click-through rates from search results and social shares, which indirectly impacts traffic and visibility.

Can I set different OG tags for different pages?

Yes. Each page should have its own OG tags that match its content. A blog post about dogs should have different og:title and og:image than a page about cats.

Check your Open Graph tags in seconds

Check your Open Graph tags free with Proovd — paste a URL and see the preview on X, LinkedIn, Slack, Discord, WhatsApp, and Reddit.