Open Graph Tags: The Complete Guide

When someone shares your link, Open Graph tags determine what appears. Here's everything you need to get them right.

When someone shares a link on Facebook, LinkedIn, Slack, or iMessage, the platform reads a set of HTML tags to decide what to show in the preview: the title, description, and image. These are Open Graph tags, and without them, platforms either display a bare URL or generate a preview using whatever text and images they find on the page.

What Are Open Graph Tags?

Open Graph was created by Facebook in 2010 to give websites a standardised way to control how their content appeared when shared. The protocol was quickly adopted by almost every other platform: Twitter/X, LinkedIn, Pinterest, WhatsApp, Slack, Discord, and more.

Open Graph tags are <meta> elements in the <head> of your HTML. They use the property attribute (not name) and the og: prefix:

<meta property="og:title" content="Your page title" />

Platforms send a request to your URL and parse the <head> of the returned HTML. They never render your JavaScript — only raw server-side HTML is read. This means Open Graph tags must be rendered server-side.

Required Open Graph Tags

These four tags are the minimum you need for a functional social preview:

og:title

The title that appears in the preview. This should be specific to the page — not just your site name. Keep it under 60 characters to avoid truncation on most platforms.

<meta property="og:title" content="How to Fix a Slow Website in 2026" />

og:description

A short summary of the page content. Most platforms show around 100–150 characters before truncating. It should describe the page content specifically, not repeat the title.

<meta property="og:description" content="Core Web Vitals, image optimisation, render-blocking scripts — here is what actually moves the needle." />

og:image

The image that appears in the preview card. A few rules that matter:

  • Dimensions:Use 1200 × 630 pixels. If you use a smaller image, platforms may display it as a thumbnail rather than a full-width card.
  • Format: JPEG or PNG. Both are universally supported.
  • Absolute URL: The og:image value must be an absolute URL, not a relative path.
  • No redirects: Some platforms will not follow redirects to reach your OG image. Serve it from the final URL.
<meta property="og:image" content="https://yoursite.com/images/post-cover.jpg" />

og:url

The canonical URL of the page being shared. This tells platforms the authoritative URL to use when tracking shares and comments.

<meta property="og:url" content="https://yoursite.com/blog/your-post-slug" />

Optional but Recommended Tags

og:type

Describes the type of content. The default is website, which is appropriate for most pages. Use article for blog posts.

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

og:site_name

The name of your overall website, distinct from the page title. Displayed alongside the title on some platforms.

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

og:image:width, og:image:height, og:image:alt

Dimension tags help platforms render your image without downloading it first to check dimensions. The alt tag provides accessibility for screen readers and fallback text.

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A diagram showing Core Web Vitals scores" />

Twitter / X Card Tags

Twitter reads standard Open Graph tags but also has its own twitter: meta tags that take precedence on Twitter/X. The most important is twitter:card, which controls the card layout:

<meta name="twitter:card" content="summary_large_image" />
  • summary_large_image — full-width image card (most common for articles)
  • summary — small square image thumbnail

If you omit twitter:title, twitter:description, and twitter:image, Twitter falls back to the og: equivalents.

Dynamic OG Images

For sites with many pages — blogs, product catalogues, documentation — creating a custom 1200×630 image for every page manually is impractical. The modern approach is dynamic OG image generation.

Next.js has built-in support via next/og. Define an opengraph-image.tsx file alongside your page, return an ImageResponse with text and styling, and Next.js generates the image on request.

The result is a unique, branded OG image for every page without the manual work.

How to Test Your Open Graph Tags

Social platforms cache OG data aggressively. After deploying changes, use each platform's debugging tool to force a cache refresh:

  • Facebook Sharing Debugger — shows exactly what Facebook reads and lets you request a fresh scrape
  • LinkedIn Post Inspector — same idea for LinkedIn
  • AuditZap Open Graph checker — checks all your OG tags, highlights missing or malformed values

A few common issues to watch for:

  • og:image is a relative URL instead of absolute
  • Image dimensions are below 600×315 (minimum for full-width cards on Facebook)
  • og:title or og:description is missing entirely
  • Tags are rendered by JavaScript rather than server-side HTML
  • og:url has a trailing slash inconsistency with the canonical URL
Check your Open Graph tags freeBack to blog