Opengraphly
Get started
Explainer10 Jul 2025·7 min read

What is the Open Graph protocol? The tags that control your link previews

Every time you share a link and a card appears — with a title, description, and image — that's the Open Graph protocol at work.

Open Graph is not a product. It's not something you pay for. It's a standard that websites use to tell social platforms, messaging apps, and search engines exactly how to display their content.

Here's how it works.

Where it came from

Facebook created Open Graph in 2010. Before it, there was no standard way for a social platform to know what image or description to show when someone shared a link.

Facebook needed a solution — billions of links were being shared, and the previews were often useless or ugly. So they created a simple specification: websites could add special meta tags to their pages, and Facebook would read those tags to generate the link preview.

The spec was made open, and every other major platform adopted it. Twitter, LinkedIn, Slack, iMessage, WhatsApp, Discord — they all read the same Open Graph tags today.

How it works

Your website has a <head> section. Visitors never see it, but it's full of instructions for browsers and external services.

Open Graph tags live in the <head>. They look like this:

<head>
  <meta property="og:title" content="Your page title" />
  <meta property="og:description" content="A short description of the page" />
  <meta property="og:image" content="https://yoursite.com/og-image.png" />
  <meta property="og:url" content="https://yoursite.com/your-page" />
</head>

When someone shares your URL on Twitter, LinkedIn, or Slack, those platforms send a crawler to fetch your page. The crawler reads your <head>, finds the OG tags, and uses them to build the preview card.

No OG tags? The platform guesses. Usually badly. It picks the first image it finds (often a logo or icon), uses the page title as the heading, and grabs some text from the body. The result is rarely what you'd want.

The six tags that matter

og:title

The headline shown in the link preview. Not necessarily the same as your page's <title> tag — you can (and often should) write a more social-friendly version.

<meta property="og:title" content="Why your link preview looks broken" />

Keep it under 70 characters. Most platforms truncate after that.

og:description

The short description below the title. Two to three sentences maximum. Write it for the context in which it'll be seen — a Slack message, a Twitter feed — not as a search result snippet.

<meta property="og:description" content="You shared a link. It came through as a blank box. Here's exactly why that happens." />

og:image

The image shown in the preview card. This is the most impactful tag. A well-designed OG image dramatically increases click-through rates. A broken or missing one undermines trust in the link.

<meta property="og:image" content="https://yoursite.com/og-image.png" />

Important: the URL must be absolute (starting with https://). Relative paths like /og-image.png don't work — the social platform's crawler is not on your server.

Standard dimensions: 1200×630 pixels.

og:url

The canonical URL for the page. Helps platforms avoid showing duplicate content for the same page accessed via different URLs.

<meta property="og:url" content="https://yoursite.com/exact-page-url" />

og:type

Describes the type of content. The default is website. For articles, use article. For videos, video.movie or video.other.

<meta property="og:type" content="article" />

og:site_name

The name of your website. Shown as a label in some preview layouts.

<meta property="og:site_name" content="Opengraphly" />

Twitter's additional tags

Twitter reads OG tags but also has its own extended tags. The most important one:

<meta name="twitter:card" content="summary_large_image" />

Without this, Twitter shows a small thumbnail instead of a full-width image. It's a significant difference in visibility — the large image card stops the scroll, the small one doesn't.

You should also include:

<meta name="twitter:title" content="Your title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />

Twitter falls back to the og: equivalents if these are missing, but setting both is more reliable.

What happens without Open Graph tags

Without OG tags, platforms make their best guess:

  • Title: Usually the page's <title> tag
  • Description: Often the first paragraph of body text, or the <meta name="description"> tag
  • Image: The first <img> found on the page, or nothing

The results are unpredictable. A page might show a product screenshot as the OG image, or a small navigation logo. Or nothing. You have no control.

Open Graph gives you that control. Define the tags, and every platform shows exactly what you want.

How to add OG tags to your site

Every major website builder has a place to set OG tags:

  • Next.js: Use the metadata export in page components (or generateMetadata for dynamic pages)
  • Webflow: CMS page settings → SEO tab → Open Graph fields
  • Framer: Site settings or CMS page settings → SEO
  • Squarespace: Page settings → SEO → Social sharing
  • WordPress: Use Yoast SEO or Rank Math — both have dedicated OG fields per post
  • Notion (via Super): Site settings → SEO → Social image

The OG image itself is the part that requires the most thought. It needs to be 1200×630 pixels, load fast, and communicate what the page is about at a glance.

Fix it today

Your next shared link should look this good.

Design your OG image once. Paste the URL once. Done forever. Takes about four minutes.

Get started free