On Page fix

How to fix missing Open Graph tags

Share a page with no Open Graph tags and you get a bare, unclickable-looking link. Add four tags and you get a title, description, and image — the difference between a link people scroll past and one they tap.

Open Graph (OG) tags are meta tags in your <head> that tell social platforms what title, description, and image to show when someone shares your URL. They power the preview card you see on Facebook, LinkedIn, Slack, Discord, WhatsApp and iMessage.

Twitter/X uses its own Twitter Card tags, but they fall back to Open Graph — so getting OG right covers most of the web in one pass.

Why it matters

A page with no OG tags shares as a naked URL with no image, which reads as low-effort and gets far fewer clicks. OG isn't a Google ranking factor, but social and messaging traffic is real traffic, and a good share card is the cheapest click-through win on the page.

How to tell if this is you

Abby flags “Open Graph” when og:title, og:description, og:image or og:url are missing. The og:image is the one people notice — without it, the share card is just grey text.

Not sure if your site has this?

Run Abby's free scan — it checks this and 25 other on-page, technical, and structured-data signals in about 60 seconds, no signup.

Scan my site free

The fix

Add Open Graph meta tags in <head>: <meta property="og:title" content="Page Title"> <meta property="og:description" content="Description"> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:url" content="https://example.com/page">

Before

<head>
  <!-- no Open Graph tags: shares show a bare link, no image -->
</head>

After

<head>
  <meta property="og:title" content="Handmade Blue Suede Shoes">
  <meta property="og:description" content="Sizes 6–13, free 24h shipping.">
  <meta property="og:image" content="https://example.com/shoes-card.jpg">
  <meta property="og:url" content="https://example.com/blue-suede-shoes">
</head>

Fix it on your platform

WordPress

Install Yoast SEO or Rank Math — they automatically generate OG tags. Customize in the "Social" tab of the SEO meta box on each post/page.

Shopify

Shopify generates basic OG tags from your page content. For custom OG images, edit theme.liquid or use an SEO app like SEO Manager.

Wix

Go to Page Settings > SEO (Google) > Social Share. Upload a custom share image and fill in the title/description.

Squarespace

Go to Page Settings > SEO. Squarespace generates OG tags from your page content. For a custom share image, add it in the page thumbnail.

Next.js

In App Router, export metadata with openGraph: export const metadata = { openGraph: { title: "...", description: "...", images: ["/og-image.png"], url: "..." } }. Next.js also supports a special opengraph-image.tsx file for dynamic OG images.

When this doesn’t apply

Critical for content shared on social platforms (Facebook, LinkedIn, Slack unfurls). Less impactful for pages that are never shared externally — admin dashboards, account settings, paywalled content, internal tools.

Fix every issue at once.

Abby's free scan finds which of 26 checks your site fails. The $8.99 fix guide turns each one into a copy-ready fix for your exact pages — prioritized, with code — or bundle it with a security fix guide for $19.99.

Get my fix plan

FAQ

What size should the og:image be?

Use 1200×630 pixels (a 1.91:1 ratio) — the size Facebook and LinkedIn render at full width. Smaller images get cropped or shown as a small thumbnail.

Do I need Twitter Card tags too?

Twitter/X reads Open Graph tags as a fallback, so OG alone works. If you want an explicit large-image card, add twitter:card=summary_large_image and twitter:image — but OG covers the default case.

My OG image isn't updating when I share — why?

Social platforms cache share previews. After changing the tags, re-scrape the URL with the platform's debugger (e.g. Facebook's Sharing Debugger) to force a refresh.