# How to set up Open Graph tags

> 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.

Social previews · HTML version: https://getreport.app/learn/open-graph

## Open Graph image

Passing looks like: Open Graph image is present.

**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.

## Open Graph image reachable

Passing looks like: Open Graph image can 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.

## Open Graph title

Passing looks like: Open Graph title is present.

**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.

## Open Graph description

Passing looks like: Open Graph description is present.

**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.

## Open Graph image size

Passing looks like: Open Graph image size passes.

**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.

## og:url and canonical URL match

Passing looks like: og:url matches 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.

## Open Graph type

Passing looks like: og:type is set.

**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.

## Facebook App ID

Passing looks like: Facebook App ID is set.

**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="…">.

## Link preview rendering

Passing looks like: Link preview 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.

Check your own page: https://getreport.app/