Fix Guide

How to Add Open Graph Tags

Control the title, description and image shown when your link is shared.

Easy Medium Impact 15 min

Missing Open Graph tags mean social platforms and chat apps guess at your link's title, description and image — usually badly, and sometimes by picking the first image on the page. Adding og:title, og:description, og:image and og:url gives you control of the card. Around 38% of audited sites ship none.

Why It Matters

Every share, every paste into a chat, every post is either a rich card or a bare URL. The tags cost four lines and decide which.

How to Fix

Add the four core tags

og:title, og:description, og:url and og:image. og:url should be the canonical address of the page.

Use an absolute image URL

A relative path will not be fetched. 1200 by 630 pixels is the safe size, under about 5 MB.

Set og:type

website for most pages, article for posts — which also enables published time and author fields.

Verify with a debugger

Use a sharing debugger to see what platforms actually fetch, and to refresh their cache after a change.

Code Fix

html

Before (broken)

<!-- nothing; the platform picks whatever image it finds first -->

After (fixed)

<meta property="og:title" content="How to fix redirect chains">
<meta property="og:description" content="Collapse multi-hop redirects into one.">
<meta property="og:url" content="https://example.com/fixes/redirect-chains">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:type" content="article">

Platform-Specific Instructions

WordPress

Any major SEO plugin adds these. Set a site-wide fallback image so pages without a featured image still share well.

Next.js

Use the openGraph key in the metadata export. Relative image paths resolve only if metadataBase is set.

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs — and links each one straight to its guide.

Run a free audit

Free foreverNo signupResults in 30s