Skip to content

How to set up Open Graph tags

Social3 min readFixes 9 checks og-image, og-image-reachable, og-title, og-description, og-image-size, og-url-matches-canonical, og-type, fb-app-id, preview-render

Open Graph tags decide the title, description and image shown when your link is shared on Facebook, LinkedIn, Slack and WhatsApp. The image should be 1200×630.

Step by step, with screenshots: Canonical tags explained, with every mistake we see →

Check your own site

Runs these 9 checks and the other 178, free, in about 45 seconds.

What a passing site looks like

  • Open Graph image is presentwarning · −2.5 ptseffort S
  • Open Graph image can be fetchedwarning · −2 ptseffort S
  • Open Graph title is presentwarning · −2 ptseffort S
  • Open Graph description is presentwarning · −1.5 ptseffort S
  • Open Graph image size: passeswarning · −1 ptseffort S
  • og:url matches the canonical URLwarning · −1 ptseffort S
  • og:type is setwarning · −0.5 ptseffort S
  • Facebook App ID is setinfo onlyeffort S
  • Link preview renderedinfo onlyeffort S

1. No Open Graph image

Why it matters. Without og:image, links shared on Facebook, LinkedIn, Slack and WhatsApp appear as plain text and get far fewer clicks.

How to fix it.
  1. Add <meta property="og:image" content="https://…/share.jpg"> with a 1200×630 px image.
  2. Use an absolute https URL that is publicly reachable.

In a report the technical detail reads: Detected 0 <meta property="og:image"> elements.

2. Open Graph image cannot be fetched

Why it matters. Facebook, LinkedIn and Slack download og:image themselves when someone shares the link. A relative URL, an http:// URL on an https page, or an error response means the card has no picture.

How to fix it.
  1. Point og:image at an absolute https:// URL that answers 200 with a JPEG, PNG or WebP.
  2. Check that the image is not blocked by robots.txt, a login wall or a hotlink rule.

3. Open Graph title is missing

Why it matters. og:title is the headline of the card Facebook, LinkedIn, Slack and WhatsApp show for a shared link. Without it they fall back to the page <title>, or show the bare URL.

How to fix it.
  1. Add <meta property="og:title" content="…"> with the page's headline in under 60 characters.
  2. In WordPress, Yoast and Rank Math set it under the page's Social tab.

4. Open Graph description is missing

Why it matters. og:description is the one or two lines under the headline of a shared link. Without it the card shows only a title, or a random sentence from the page.

How to fix it.
  1. Add <meta property="og:description" content="…"> with 1–2 sentences (under 200 characters) that say what the page offers.
  2. Reuse the meta description if it reads well as a teaser.

5. Open Graph image size

Why it matters. Facebook and LinkedIn crop or shrink images smaller than 1200×630 px, so your preview looks blurry or cut off.

How to fix it.
  1. Export the share image at 1200×630 px (1.91:1) under 1 MB.

6. og:url does not match the canonical URL

Why it matters. Facebook counts likes and shares per og:url. When it differs from the canonical URL, the counts split between two addresses and the card may link to the wrong version of the page.

How to fix it.
  1. Set og:url to exactly the canonical URL of this page, without tracking parameters.
  2. In WordPress, Yoast and Rank Math derive it from the canonical automatically; check for a hard-coded value in the theme.

7. og:type is missing

Why it matters. og:type tells Facebook and LinkedIn whether the link is a website, an article or a product, which changes how the card is laid out. Without it they assume "website" for every page.

How to fix it.
  1. Add <meta property="og:type" content="website"> on the home page, "article" on posts and "product" on product pages.

8. No Facebook App ID

Why it matters. fb:app_id links the page to a Facebook app so you can see share statistics in Facebook Insights. It has no effect on how the preview looks, so this is optional.

How to fix it.
  1. Optional. Create an app at developers.facebook.com and add <meta property="fb:app_id" content="…">.

9. Link preview could not be rendered

Why it matters. The preview cards show how this link looks on Facebook, LinkedIn, X and Slack before you share it. Rendering them needs the page to be opened in a real browser.

How to fix it.
  1. Nothing to do on your side; the rendered previews appear once the render module has run.

In a report the technical detail reads: The preview cards need the rendered page, which was not available for this report.

Filed under Social previews. Copy is generated from the same catalogue that scores every report, so what you read here is what the report says.