Fix Guide

How to Add Open Graph Tags

Control how your link looks when shared on Facebook, LinkedIn and Slack with og: meta tags.

Easy Medium Impact 10 min

Why It Matters

Open Graph tags decide the title, description and image shown when your page is shared on social and messaging apps. Without them, shares look bare — no image, a random snippet — which kills click-through on social.

How to Fix

Add the core og: tags

Set og:title, og:description, og:image, og:url and og:type.

Use a 1200×630 image

Provide an absolute image URL at 1200×630 for crisp previews across platforms.

Code Fix

html

Before (broken)

<!-- no og: tags → ugly link preview -->

After (fixed)

<meta property="og:title" content="Free Website Audit | SlapMyWeb">
<meta property="og:description" content="240 checks for SEO, speed & security in 30s.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/">
<meta property="og:type" content="website">

Platform-Specific Instructions

WordPress

Yoast/Rank Math "Social" tabs set OG tags + a default share image per page.

Next.js

Set metadata.openGraph (or a route-level opengraph-image file).

Check with our tool

Open Graph Generator

Want to find all issues at once?

Run a free audit and get a prioritized fix list with auto-generated code.

Run a free audit

How to Add Open Graph Tags — Fix Guide | SlapMyWeb