Skip to main content
SlapMyWeb
Slap a site

SEO fix

How to Add Open Graph Tags

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

Difficulty
Easy
Impact
Medium
Time
15 min

Before

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

After

<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">
Before and after code for: How to Add Open Graph Tags

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 it

  1. Add the four core tags

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

  2. Use an absolute image URL

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

  3. Set og:type

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

  4. Verify with a debugger

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

The code

Beforehtml
<!-- nothing; the platform picks whatever image it finds first -->
Afterhtml
<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">

On your platform

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.

Sources

More fixes

SEO

How to Remove an Accidental noindex

Find and remove a stray noindex that is keeping an important page out of Google entirely.

SEO

How to Fix Broken Internal Links (404s)

Find and repair internal links that point to missing pages so you stop leaking link equity.

SEO

How to Fix Redirect Chains

Collapse multi-hop redirects (A→B→C) into a single hop to the final URL.

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 signupLive scan progress