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.
Step by step, with screenshots: Open Graph tags: how link previews work and how to get them right →
Check your own site
Runs these 9 checks and the other 184, free, in about 45 seconds.
Or run only this check with the free Open Graph & social tag generator, the free Share link generator or the free Meta tag checker.
What it is
Open Graph is a set of meta tags, such as og:title, og:description, og:image and og:url, that decide how your link looks when someone shares it on Facebook, LinkedIn, WhatsApp, Slack and many other apps. The protocol was created by Facebook in 2010 and is documented at ogp.me.
Without them, apps guess: they take the page title, a random sentence and sometimes no image, and a plain-text link gets far fewer clicks than a card with a picture. The image is the part that most often fails: it has to be an absolute https URL that the app's crawler can download.
OK looks like this: og:title, og:description, og:type and og:url matching the canonical, plus an og:image of 1200 × 630 px under 1 MB that loads without a login. getReport checks each tag, fetches the image and renders the preview cards.
What a passing site looks like
- Open Graph image is presentfail · −15 ptseffort S
- Open Graph title is presentwarning · −4 ptseffort S
- Open Graph description is presentwarning · −3 ptseffort S
- Open Graph image can be fetchedwarning · −2 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
- Preview cards built from the tagsinfo 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.
- Add <meta property="og:image" content="https://…/share.jpg"> with a 1200×630 px image.
- 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 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.
- Add <meta property="og:title" content="…"> with the page's headline in under 60 characters.
- In WordPress, Yoast and Rank Math set it under the page's Social tab.
3. 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.
- Add <meta property="og:description" content="…"> with 1-2 sentences (under 200 characters) that say what the page offers.
- Reuse the meta description if it reads well as a teaser.
4. 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.
- Point og:image at an absolute https:// URL that answers 200 with a JPEG, PNG or WebP.
- Check that the image is not blocked by robots.txt, a login wall or a hotlink rule.
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.
- 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.
- Set og:url to exactly the canonical URL of this page, without tracking parameters.
- 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.
- 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.
- Optional. Create an app at developers.facebook.com and add <meta property="fb:app_id" content="…">.
9. No preview card can be built from this page
Why it matters. Each app builds its card from your tags, with its own fallbacks. Facebook, LinkedIn, Slack and WhatsApp read the Open Graph tags; X reads its own tags first and falls back to Open Graph, and shows a plain link without a twitter:card tag. A page with no title and no image gets a bare link everywhere.
- Add og:title, og:description and a 1200 by 630 pixel og:image, and a twitter:card tag; the cards in the social preview checker show which app uses which tag.
In a report the technical detail reads: The cards are built from the tags as they are now, without opening the page in a browser.
Questions people ask
What is Open Graph?
Open Graph is a protocol that lets a web page describe how it should appear when shared on social networks and messaging apps. You add og: meta tags to the page's head, and the app reads them to build the preview card with a title, description and image. Most platforms, not just Facebook, use it.
What is the best OG image size?
1200 × 630 pixels, an aspect ratio of 1.91:1, works on Facebook, LinkedIn, Slack and most other apps. Keep important text and logos in the centre, because some apps crop to a square or 2:1. Save it as JPG, PNG or WebP under 1 MB so it downloads quickly.
What are Open Graph tags?
They are meta tags with a property starting with og:, placed in the page's head. The core four are og:title, og:type, og:image and og:url; og:description, og:site_name and og:locale are common extras. Each one has a content attribute holding the value, for example <meta property="og:title" content="…">.
What is an Open Graph image?
It is the picture set with og:image that social and messaging apps show in the preview card when your link is shared. It should be made for sharing, readable at small sizes, and hosted at an absolute https URL. Without one, apps show a text-only link or pick a random image from the page.
Why is my Open Graph image not showing?
Common causes: the og:image URL is relative or http on an https site, the image is blocked by robots.txt, a login or a hotlink rule, it is too small, or the app cached an old preview. Fix the URL, then ask the platform to re-scrape, for example with Facebook's Sharing Debugger.