What is Open Graph, and why does your link show no image?

You paste your website’s link into WhatsApp, LinkedIn or Slack and a card appears: an image, a title and a line of text. Or nothing appears. Or you get a pixelated logo, a title from a different page, or the photo from an old post.

That card is not improvised by the platform. It is built from a few tags in your page’s code that almost nobody checks until an important link comes out wrong. They are called Open Graph.

What Open Graph is

It is a protocol Facebook introduced in 2010 so that any web page could describe itself when someone shares it: with which title, which description, which image and what type of content it is.

Over the years it became the de facto standard. Today it is read by LinkedIn, WhatsApp, Telegram, Slack, Discord, Teams, X and the link previews of many messaging apps. If your page lacks these tags, each platform tries to guess from whatever it finds, and each one guesses differently.

What Open Graph does not control is your Google result. There, the title tag and meta description are in charge; they have their own rules, covered in how to write title tags and meta descriptions.

The tags that matter

They go in the <head> of each page, with the property attribute:

<meta property="og:title" content="Air conditioning servicing in Leeds">
<meta property="og:description" content="Engineer visit within 48 hours and a three-month guarantee.">
<meta property="og:image" content="https://example.com/og/servicing.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Engineer inspecting an air conditioning unit">
<meta property="og:url" content="https://example.com/services/servicing/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="North Cooling">
<meta property="og:locale" content="en_GB">

• og:title: the card’s headline. It can be a little more conversational than the page’s title tag, because it is not competing with nine other results.
• og:description: one or two sentences. Many platforms cut it short or do not show it at all, so the important part goes first.
• og:image: the image. It is the most noticeable tag and the one that fails most often.
• og:image:width and og:image:height: tell the platform the size before it downloads the image, which helps the card render in full the first time someone shares the link.
• og:image:alt: the alternative text, for people using a screen reader.
• og:url: the page’s official address. It groups shares with different parameters together as one.
• og:type, og:site_name and og:locale: the content type, the site name and the language. og:locale is written with an underscore (en_GB), not a hyphen.

What about Twitter tags?

X has its own set of tags, Twitter Cards, but when it cannot find them it falls back to Open Graph. In practice one is enough:

<meta name="twitter:card" content="summary_large_image">

summary_large_image requests the card with the large image; summary, the compact version with a square thumbnail. Duplicating title, description and image in twitter: tags only makes sense if you want to say something different on that network.

The image: dimensions, format and weight

This is where nearly all the problems concentrate.

• Dimensions. 1200 × 630 pixels, a 1.91:1 ratio, is the reference for the large card on most platforms. Below roughly 600 pixels wide it looks blurry, and under 200 pixels a side many platforms discard it.
• Cropping. Not every platform respects the ratio. Some messaging apps show a square thumbnail, so the important part (the logo, the product, a short phrase) should be centred and well clear of the edges.
• Legible text. On a phone the card is less than half the size it is on your screen. A large phrase can be read; a paragraph cannot.
• Format. JPG or PNG are the safe choice. Some newer formats are not accepted by every platform.
• Weight. Some apps ignore images that are too heavy or are slow to process them. Keeping it light, in the region of a few hundred KB, avoids surprises.
• Absolute, public address. The URL must include domain and protocol, and the image must be downloadable without logging in.

Ideally, each important page has its own image rather than one cover for the entire site. For the rest of the decisions about formats and sizes, the guide to image formats and sizes goes into detail.

Why you change the tags and the card stays the same

Because platforms do not read your page every time someone shares the link. They read it the first time, store what they found and reuse that copy for days or weeks. If the first read picked up the wrong image, that is the one that will keep appearing even after you have fixed it.

There are two ways to force a fresh read:

• Each platform’s own tools. Meta offers a sharing debugger and LinkedIn its Post Inspector. Running the URL through them makes them read the tags again.
• Changing the URL. Adding a parameter (?v=2) turns it into a new address as far as the cache is concerned. It is a handy trick for one particular post; og:url should still point to the clean address.

Bear in mind that posts already published do not update themselves: the refreshed cache affects what gets shared from then on.

Common mistakes

• Relative paths in og:image (/img/cover.jpg). The platform’s crawler does not know which domain they belong to.
• The same image and title on every page, because the template sets them once for the whole site.
• Sharing from the staging environment. If the first link shared is from a password-protected server, the platform stores an empty card.
• Tags added with JavaScript. Social network crawlers usually do not run scripts, so they only see what is in the HTML the server delivers.
• A firewall blocking crawlers. Some protections against automated traffic also turn away the readers from Facebook, LinkedIn or WhatsApp.
• og:url pointing to the home page on every page, which makes the platform treat them all as the same one.

Checking yours

The Open Graph preview reads your page from its URL, from pasted source code or from fields filled in by hand, and shows side by side how the card would look on Facebook and LinkedIn, on X, on WhatsApp and Telegram, and on Slack and Discord. It points out missing tags, tries to load the image the way a social crawler would, and generates the corrected block of tags ready to copy.

Once the card looks right there, publish the changes and run the URL through each platform’s tool so it forgets the old version. If you also want the page to appear in full on Google, review its structured data: it is the equivalent for search engines.

---

A well-made card costs a few minutes per page and works every time someone shares your link, in places where you are not around to explain it. It is worth making sure it says the right thing.