When someone pastes your link into WhatsApp, LinkedIn or Slack, the preview card they see is built from Open Graph tags in your page's HTML. If those tags are missing or wrong, you get a bare URL, the wrong photo or a title that's been cut off, and fewer people click. This Open Graph tags guide covers the tags that matter, image sizes that work on every major platform, how to clear a stale preview, and how to set it all up in WordPress, Shopify, Wix and Squarespace.
Key takeaways
- A 1200 x 630 px JPG under about 1 MB, served from an absolute HTTPS URL, is the safe default og:image for every major platform.
- Set og:title, og:description, og:image, og:url and og:type explicitly, and add twitter:card set to summary_large_image for X.
- Facebook caches images by URL, so upload a replacement under a new filename and click Scrape Again in the Sharing Debugger.
- Open Graph tags must be in the HTML the server sends, because most social crawlers do not run JavaScript.
What Open Graph tags are and why they matter
Open Graph is a protocol Facebook introduced so that any web page could describe itself as a rich object when shared. It's now read by almost everything that unfurls links: Facebook, LinkedIn, WhatsApp, Slack, Microsoft Teams, Discord, iMessage and X (which also has its own twitter: tags).
The tags are <meta> elements in the <head> of each page. They don't affect your Google rankings directly. They do affect how many people click a shared link, and social shares are often the first impression a prospect has of your business.
A minimal, complete set looks like this:
<meta property="og:title" content="Boiler Servicing in Leeds | Smith Heating">
<meta property="og:description" content="Gas Safe registered engineers. Fixed-price annual servicing from £75, with same-week appointments across Leeds.">
<meta property="og:image" content="https://www.example.com/images/og/boiler-servicing.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Engineer servicing a combi boiler in a kitchen">
<meta property="og:url" content="https://www.example.com/boiler-servicing">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Smith Heating">
<meta property="og:locale" content="en_GB">
<meta name="twitter:card" content="summary_large_image">
Note that Open Graph uses property=, while X's tags use name=. Mixing them up is a common reason a tag gets ignored.
The core Open Graph tags explained
The Open Graph specification lists four required properties: og:title, og:type, og:image and og:url. In practice you also want a description.
| Tag | What it does | Good practice |
|---|---|---|
og:title |
Headline on the card | Write it without your brand bolted on; Facebook's guidance says to leave branding out. Keep it short enough not to wrap badly, roughly 40-60 characters. |
og:description |
Line or two under the title | One or two sentences with a clear reason to click. Facebook suggests 2-4 sentences, but most cards truncate long text. |
og:image |
The preview picture | Absolute HTTPS URL, 1200 x 630 px, JPG or PNG. See the image section below. |
og:url |
The canonical address | Must match your canonical URL, without tracking parameters, so shares of different variants are counted together. |
og:type |
Kind of object | website for most pages, article for blog posts. Facebook defaults to website if missing. |
og:site_name |
Brand name shown on some cards | Your business name. |
og:locale |
Language and territory | en_US for US sites, en_GB for UK sites. The spec defaults to en_US. |
og:image:alt |
Text description of the image | The spec says pages with og:image should also set this. It helps screen reader users. |
If og:title or og:description is missing, platforms fall back to your <title> and meta description, or to whatever text they can scrape. That fallback is unpredictable, so set the tags explicitly. Our guide to title tags and meta descriptions covers writing the HTML versions, and you can usually reuse that copy with light edits.
X (Twitter) card tags
X reads Open Graph tags as a fallback, but it decides the card layout from twitter:card. Without it you may get a small square thumbnail instead of a large image.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="Engineer servicing a combi boiler in a kitchen">
summary_large_image gives the wide card most businesses want. summary gives a small square image beside the text. You only need twitter:title, twitter:description and twitter:image if you want X to show something different from your Open Graph tags.
Open Graph image sizes that work everywhere
The image is what makes people stop scrolling, and it's where most problems happen.
| Platform | What the docs say |
|---|---|
| At least 1200 x 627 px, 1.91:1 ratio, max 5 MB. Images under 401 px wide show as a small thumbnail. | |
X summary_large_image |
2:1 ratio, minimum 300 x 157 px, maximum 4096 x 4096 px, under 5 MB. JPG, PNG, WEBP and GIF; SVG isn't supported. |
Specify og:image:width and og:image:height so the image renders on the first share. |
A 1200 x 630 px JPG under about 1 MB is the safe default. It meets LinkedIn's minimum, is close enough to X's 2:1 crop, and loads quickly on WhatsApp over mobile data. To resize artwork without distorting it, lock the ratio in our aspect ratio tool. Some practical rules:
- Keep important content in the centre. Each platform crops slightly differently, so leave a margin of roughly 10% around logos and text.
- Use an absolute HTTPS URL. Relative paths (
/images/og.jpg) andhttp://images are skipped by some platforms. - Make sure crawlers can fetch it. LinkedIn notes that images in protected directories, or on servers that block its crawler, won't appear. Check your firewall, hotlink protection and any bot-blocking rules on Cloudflare.
- Don't use SVG or WebP-only images for
og:image. JPG and PNG are the most widely supported. - Give every important page its own image. A generic logo on every share looks lazy and gets ignored. For a blog, a branded template with the article title works well.
For general image compression advice, see our guide to WebP and AVIF image optimisation. For og:image, though, stick with a well-compressed JPG.
Why your link preview is wrong (and how to refresh it)
The most common complaint is "I fixed the tags but the old preview still shows". That's caching. Every platform scrapes your page once and stores the result.
Facebook caches images by URL and won't update them unless the URL changes, according to its own webmaster documentation. So if you replace an image, upload it under a new filename rather than overwriting the old file.
How to force a fresh preview
- Facebook (and usually WhatsApp and Instagram DMs): open the Facebook Sharing Debugger at developers.facebook.com/tools/debug, paste the URL and click Scrape Again. It shows exactly which tags Facebook found, plus warnings.
- LinkedIn: paste the URL into LinkedIn Post Inspector at linkedin.com/post-inspector. Inspecting the URL fetches it again and shows the title, image and description LinkedIn will use.
- X: X's Card Validator no longer shows a preview. Compose a post (you don't need to publish it) to see the preview, and make sure
twitter:cardis present. - Slack and Teams: these cache previews too. Adding a harmless query string such as
?v=2to the link makes them treat it as a new URL. Don't use that trick for links you want counted against your canonical page. - WhatsApp: previews are generated when the message is composed and cached, so a fresh scrape from Facebook's debugger usually helps. Testing in a new chat is the quickest check.
Common causes of a broken preview
- The page returns a 403 or a bot challenge to social crawlers (security plugins and "under attack" modes are frequent culprits).
og:imagepoints to a file that 404s, or to a staging domain.- Two sets of tags are output, for example by a theme and an SEO plugin. Platforms usually take the first, which may be the wrong one.
- The tags are injected by JavaScript. Most social crawlers don't run JavaScript, so tags must be in the HTML the server sends.
og:urlpoints to a different page, so the platform fetches that page's tags instead.
How to add Open Graph tags on popular platforms
WordPress
You don't need to edit theme files. Yoast SEO, Rank Math, All in One SEO and SEOPress all output Open Graph and X card tags by default.
- In the post editor, open your SEO plugin's panel and find the Social tab.
- Set a social title, description and image (1200 x 630) for important pages.
- Set a site-wide default image in the plugin's social settings so no page shares without one.
- If you also use a social sharing plugin or a theme that adds OG tags, turn one of them off to avoid duplicates.
Shopify
Most Shopify themes output Open Graph tags from a snippet such as meta-tags.liquid.
- Set a default social sharing image under Online Store > Preferences > Social sharing image.
- Products use the featured product image, and collections use the collection image, so make those images wide enough to crop well.
- Page titles and descriptions come from each item's Search engine listing section.
Wix
Wix generates tags automatically. To customise them, open a page's SEO basics or Social share settings in the editor and upload a social image and text. Blog posts and products have their own social share settings.
Squarespace
Set a site-wide social sharing logo and image under the site's SEO or social image settings, then override the image for individual pages and blog posts in each page's Social image settings.
Custom sites and frameworks
Add the tags server-side in your layout template. In single-page apps (React, Vue), use server-side rendering or prerendering for public pages. Tags added only in the browser won't be seen by most link unfurlers.
Checking your Open Graph tags
Our free Open Graph checker loads a page and reports whether og:title, og:description, og:image, og:url, og:type and og:site_name are present. It requests the og:image URL to confirm it actually loads, warns if the image is served over plain HTTP, checks for a twitter:card tag and shows a preview of the card. You need a free account to run it.
Alongside it, the meta tag checker checks the title, meta description and canonical tag that platforms fall back to. If you'd like a broader picture of your on-page SEO, run a free website audit.
Open Graph checklist
-
og:title,og:description,og:image,og:urlandog:typeon every indexable page -
og:imageis an absolute HTTPS URL, about 1200 x 630 px, JPG or PNG, under 5 MB -
og:image:width,og:image:heightandog:image:altset -
twitter:cardset tosummary_large_image -
og:urlmatches the canonical URL - Only one set of tags in the page source
- Social crawlers aren't blocked by your firewall or security plugin
- Preview refreshed in the Facebook Sharing Debugger and LinkedIn Post Inspector after changes
Frequently asked questions
Do Open Graph tags help SEO?
Not directly. Google doesn't use Open Graph tags as a ranking factor. They improve how shared links look, which can raise click-through from social and messaging apps and bring more people to your content.
What size should an Open Graph image be?
Use 1200 x 630 pixels. That meets LinkedIn's minimum of 1200 x 627 at a 1.91:1 ratio, crops well for X's large card, and stays well under the 5 MB limit LinkedIn and X set.
Why is Facebook showing an old image for my link?
Facebook caches images by URL and won't refresh them unless the URL changes. Upload the new image under a new filename, update og:image, then click Scrape Again in the Facebook Sharing Debugger.
Does WhatsApp use Open Graph tags?
Yes. WhatsApp builds link previews from og:title, og:description and og:image. Keep the image small and fast to load, and make sure your server doesn't block the request.
Do I need Twitter card tags if I have Open Graph tags?
You need at least twitter:card, because X uses it to choose the card layout. For the title, description and image, X falls back to your Open Graph tags if the twitter: versions are missing.
Sources
More guides for your industry
Free checklist (PDF)
Free restaurants & cafés website checklist
29 practical checks for restaurants & cafés: website speed and mobile, Google Business Profile and reviews, email security, booking and enquiry handling, and AI search visibility. Each one says why it matters, and many link to a free tool that checks it.
Written by the MakeItFlow team
We build the website audit these guides are based on. Every fact is checked against the primary sources listed above and this guide was last reviewed on 30 October 2026 . How we research and check
Check your own site in 30 seconds
Run a free audit covering speed, SEO, DNS, email authentication and security headers — and get a prioritised fix list.
