FREE SEO AUDIT

Open Graph Tags: A Complete Guide with Live Preview

How Open Graph tags work, which tags you need for every page type, common mistakes, and how to test your social card before publishing — with a free OG preview tool.

Published July 12, 2026 · 8 min read

Run a free audit →

When someone shares your page on LinkedIn, Slack, Discord, or X, the platform reads your Open Graph tags to build the preview card. Get them right and you get a branded, compelling card that drives clicks. Get them wrong — or leave them missing — and you get a blank image, a URL, or a random sentence pulled from your page body.

This guide covers which OG tags you need, what each one does, the mistakes that cause broken previews, and how to test your tags before publishing.

What are Open Graph tags?

Open Graph is a protocol developed by Facebook that defines how web pages are represented when shared on social platforms. The tags are <meta> elements in your page <head> with property attributes prefixed by og::

<head>
  <meta property="og:title" content="Open Graph Tags: A Complete Guide" />
  <meta property="og:description" content="Which OG tags you need, common mistakes, and a free preview tool." />
  <meta property="og:image" content="https://example.com/images/og-guide.png" />
  <meta property="og:url" content="https://example.com/blog/open-graph-guide" />
  <meta property="og:type" content="website" />
</head>

These tags are read by Facebook, LinkedIn, Slack, Discord, WhatsApp, and most other platforms that render link previews. Twitter/X uses a similar but separate system (twitter:card tags), covered below.

Which Open Graph tags are required?

The four tags every page should have:

| Tag | Required | What it controls | |---|---|---| | og:title | Yes | The headline shown in the preview card | | og:description | Yes | The description text below the title | | og:image | Yes | The preview image | | og:url | Yes | The canonical URL for this page |

Without og:image, most platforms won't show any image — or will attempt to scrape a random image from the page, often picking something inappropriate (a logo, an icon, a background element). Without og:title, the platform falls back to the <title> tag, which is usually fine but not always the most share-optimized copy.

What OG tags should articles and blog posts use?

For blog posts and articles, add og:type set to article and the article-specific meta tags:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-07-12T00:00:00Z" />
<meta property="article:modified_time" content="2026-07-12T00:00:00Z" />
<meta property="article:author" content="https://example.com/about" />
<meta property="article:section" content="SEO" />
<meta property="article:tag" content="open graph" />
<meta property="article:tag" content="seo" />

The article:published_time tag is used by some platforms (and AI scrapers) to determine content freshness. Setting it accurately and updating article:modified_time when you make significant edits is good practice.

What are Twitter/X card tags?

Twitter uses its own meta tags (despite the name change, still called Twitter card tags):

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Open Graph Tags: A Complete Guide" />
<meta name="twitter:description" content="Which OG tags you need, common mistakes, and a free preview tool." />
<meta name="twitter:image" content="https://example.com/images/og-guide.png" />

The twitter:card type determines layout:

  • summary_large_image — large image above title (most common for blog posts)
  • summary — small square image to the left of title/description
  • app — mobile app install card
  • player — embedded video/audio player

If you've already set og:title, og:description, and og:image, Twitter will fall back to these when the twitter:* tags are absent. Setting both explicitly gives you the most control.

What are the OG image size requirements?

| Platform | Recommended | Minimum | Aspect Ratio | |---|---|---|---| | Facebook / Meta | 1200×630px | 600×315px | 1.91:1 | | LinkedIn | 1200×627px | 1200×627px | Exact | | Twitter/X | 1200×628px | 300×157px | 2:1 | | Slack | 1200×630px | 500×262px | ~1.91:1 |

Use 1200×630px. This satisfies all platforms and renders clearly at both desktop and mobile preview sizes. Smaller images will display as tiny thumbnails on LinkedIn and won't display at all on some platforms if below minimum dimensions.

The Open Graph preview tool lets you see exactly how your OG image and title/description will render on different platforms before publishing.

What are the most common Open Graph mistakes?

Mistake 1: Missing og:image (or a broken image URL)

A missing or 404 og:image causes the preview card to render with no image on most platforms. Some (like LinkedIn) will not generate a preview at all for pages without a valid image.

Audit check: the [full SEO audit](/] checks og:image presence and validates that the URL returns a 200 status. A 404 og:image is flagged as a warning.

Mistake 2: og:image too small

An og:image at 300×200px will technically render, but on LinkedIn and Facebook it'll appear as a tiny corner image rather than a full-width card. Use 1200×630px.

Mistake 3: og:title doesn't match the page title

While og:title and the <title> tag can legitimately differ (the title tag is for SERPs; og:title is for social), having wildly different content between them is confusing and can look spammy. If they differ, it should be intentional — e.g., the social title is more conversational than the SERP title.

Mistake 4: og:url doesn't match the canonical URL

og:url should match the <link rel="canonical"> URL exactly. When they differ, platforms may cache the preview against the wrong URL, causing share counts to fragment across multiple URLs.

Mistake 5: Duplicate og:description across many pages

Using the same generic og:description ("Free SEO audit tool — no signup required") across every page means every social share of your site looks identical. Each page's description should reflect that specific page's content.

Mistake 6: Dynamic OG images that fail silently

If you're generating OG images dynamically (server-side image generation), failures can silently return a 200 with an error state image or a fallback. Test OG images explicitly — don't assume they're working because the route exists.

How do I test Open Graph tags?

Three ways to verify:

1. Use the live preview tool — the Open Graph preview tool fetches your URL, extracts OG tags, and renders a preview card that shows how it will look when shared. Use this before publishing any page.

2. Platform debuggers — LinkedIn Post Inspector and Facebook Sharing Debugger fetch your page and show what metadata they extracted, plus any warnings. LinkedIn's tool is particularly useful because LinkedIn caches OG previews aggressively — the debugger forces a re-fetch.

3. The full site audit — the DeepSEOAnalysis audit checks every crawled page for missing og:title, og:description, og:image, and og:url. It validates that og:image URLs return 200 and checks image dimensions where it can detect them.

How do Open Graph tags affect SEO?

Not directly. Open Graph tags are not a Google ranking signal. But they affect:

Click-through rate on social shares. A compelling OG image and title can double or triple the CTR on social media compared to a bare URL. Content that generates more social traffic signals engagement.

AI scraper metadata. AI crawlers and summary tools frequently read OG tags to understand a page before deciding whether to index or cite it. og:title and og:description are among the first signals these systems read.

Internal sharing. When your team shares pages on Slack or internal tools, preview cards built from OG tags make those links more informative and clickable.

How does Next.js handle Open Graph tags?

Next.js App Router generates OG tags through the metadata export or generateMetadata() function:

export const metadata: Metadata = {
  title: 'Page Title',
  description: 'Page description.',
  openGraph: {
    title: 'Page Title',
    description: 'Page description.',
    url: 'https://example.com/page',
    type: 'website',
    images: [{ url: '/opengraph-image.png', width: 1200, height: 630 }]
  }
}

For dynamic OG images, Next.js supports opengraph-image.tsx files co-located with route segments — Satori renders them to PNG at build time for static routes and on-demand for dynamic routes. The image URL is automatically added to the page's og:image tag.

FAQ

Do Open Graph tags help with Google ranking? No. OG tags are not a Google ranking signal. They control how your page appears when shared on social platforms, not how it ranks in search. Indirectly, better social previews can drive more traffic to content, which may send positive engagement signals, but this is many steps removed from the OG tags themselves.

What if my CMS generates OG tags automatically? Check what it generates. WordPress plugins (Yoast, RankMath, All-in-One SEO) generate OG tags from your SEO title and description, which is usually good but may not include a properly sized og:image. Squarespace and Wix generate OG tags but often use the same image across all pages. Use the preview tool to verify what your CMS actually outputs.

Can I use different og:image for different pages? Yes, and you should. A per-page OG image (branded with the post title or key content) significantly outperforms a generic site-wide image. For blog posts, automatically generating OG images with the post title overlaid on a branded template is a standard practice.

Does og:description affect snippet text in Google Search? No. Google generates snippets from page content, not from og:description or meta description. The og:description is read by social platforms; the meta description informs (but doesn't guarantee) what Google shows in SERPs. They're different signals for different audiences.

MORE FROM THE BLOG

Related articles

8 min read

WordPress SEO Audit: The 12 Checks That Matter

A practical WordPress SEO audit framework covering the 12 issues that actually hurt rankings — from slow theme bloat to plugin-generated duplicate content.

Read →

6 min read

Website SEO Checker: How Ours Works and Why It's Free

A transparent look at how the DeepSEOAnalysis website SEO checker works — what it checks, how it scores results, and why the full audit is free with no email gate.

Read →

7 min read

SERP Preview: How Google Displays Your Title and Meta Description

How Google renders title tags and meta descriptions at pixel widths — not character counts — and how to preview and fix truncation before it hurts your CTR.

Read →

Run DeepSEOAnalysis on your own site.

Free, no signup. Technical SEO, Core Web Vitals, structured data, and AI visibility in one report.

Run a free audit →