ppclift
Home › Guides › Structured data and discoverability

Open Graph and social previews

When somebody shares your page on Facebook, LinkedIn, WhatsApp or in a text message, Open Graph tags decide whether it appears as a rich preview or a bare address.

What it is

Open Graph is a small set of meta tags, originally from Facebook and now honoured almost everywhere, that specify the title, description and image to use for a link preview. Twitter Card tags do the same for X.

Without them, platforms guess, and often guess badly: a navigation heading as the title and a logo fragment as the image.

Why it matters

A link with a proper image and headline attracts far more clicks than a naked URL. This matters most in exactly the places small businesses get shared, such as local community groups and messaging apps.

It's also the cheapest win on this list. It's a handful of tags and it never needs revisiting once set.

Choosing the share image

The image does most of the work in a link preview, so choose it deliberately. A photograph of real work, real premises or real people reads better at small sizes than a logo on a plain background, and far better than a stock photo that appears on a hundred other sites. Keep any text on the image short and large, because previews are often shown at a fraction of full size on a phone.

Use the recommended 1200 by 630 pixel shape so it isn't cropped awkwardly, and keep the important part away from the edges, since some platforms trim to a square. Compress the file. A preview image of a few hundred kilobytes loads quickly enough to appear before someone has scrolled past the shared link; a five megabyte original may not.

When previews go wrong

Platforms fetch the page once and cache the result, sometimes for days. If a link was shared before the tags were fixed, the old preview keeps appearing. Facebook's Sharing Debugger and LinkedIn's Post Inspector both fetch the page again on request and refresh their cache, and they show exactly which tags they found.

Other common faults are an og:image address that redirects or requires a login, an image blocked by robots.txt, and tags added by a plugin on some pages but not others. Check that the tags appear in the page source rather than being added by JavaScript, because most preview crawlers don't run scripts. If view source shows the tags, the platforms will see them too.

Setting the tags on common platforms

Most platforms can set Open Graph tags without any code. WordPress SEO plugins add a social section to each page's editing screen, with a site-wide default image for pages that don't have their own. Shopify themes generate the tags from each product's title, description and main image. Squarespace and Wix both have a social sharing image setting for the site and for individual pages.

Whatever the platform, set a sensible default image for the whole site, then give the pages most likely to be shared an image of their own: the home page, the main service pages, and any article or offer you promote. Use og:type 'website' for the home page and ordinary pages, and 'article' for news and blog posts.

After changing anything, view the page source to confirm only one set of tags is present. A theme and a plugin both adding Open Graph tags is common, and when two og:image tags disagree, each platform picks its own favourite. Then run the platform debuggers once more, because a preview cached before the fix can linger for days.

Finally, share a test link to the places your customers actually use, such as a private message to yourself, a local community group draft or a business social account, and look at the result on a phone. Debuggers show the tags a platform found, but only a real preview shows whether the image is cropped badly, the title is cut short or the description is missing altogether.

How to fix it

  1. Add og:title, og:description, og:image, og:url and og:type to every page.
  2. Use an image around 1200 by 630 pixels, and make sure it's reachable at an absolute HTTPS address.
  3. Add twitter:card set to summary_large_image so X renders the bigger preview.
  4. Test with the sharing debuggers each platform provides, which also clears their caches.
  5. Give each important page its own image and description rather than relying on a single site-wide default.

What good looks like

<meta property="og:title" content="Emergency Plumber in Ballarat">
<meta property="og:description" content="Same-day callouts across Ballarat. Licensed and insured.">
<meta property="og:image" content="https://example.com.au/social-card.jpg">
<meta property="og:url" content="https://example.com.au/emergency-plumbing">
<meta name="twitter:card" content="summary_large_image">

Common mistakes

  • Using a relative path for og:image, which most platforms can't resolve.
  • Setting one image for the whole site, so every shared page looks identical.
  • Expecting an update to appear immediately; platforms cache previews aggressively.
  • Letting a theme and a plugin both output Open Graph tags, so platforms receive two conflicting sets.

Check your own site. ppclift checks this automatically on every page it audits. Run a free audit and see every check on one page, with no account required.

Doing this for a client? This is one of 15 checks. ppclift is SEO lead generation software that audits every local business in a suburb at once, so you can find SEO clients who already need this work. Free plan, no card.