Open Graph Tags: How to Control Link Previews
When a link is shared on Facebook, LinkedIn, WhatsApp, Slack or X, a few lines in the page's head decide which title, text and picture people see.
Paste a link into a chat or a post and, a moment later, a card appears with a picture, a headline and a line of text. That card is not guessed from the page: it is built from Open Graph tags, a handful of meta elements in the page's <head>. Pages without them get whatever the network can scrape, which is often the logo, a cookie banner or no picture at all. This guide explains the tags that matter, the image rules and how to fix a preview that will not update.
What Open Graph is
Open Graph is a small set of conventions introduced by Facebook in 2010 so that any web page could describe itself when shared. It caught on far beyond Facebook: LinkedIn, WhatsApp, Telegram, Slack, Discord, Microsoft Teams and many others read the same tags. X reads them too, alongside its own twitter: tags. Writing them once therefore covers nearly every place a link can be shared.
The tags look like this:
<meta property="og:type" content="article">
<meta property="og:title" content="How to Make Cold Brew at Home">
<meta property="og:description" content="The grind, the ratio and the steeping time.">
<meta property="og:url" content="https://example.com/cold-brew">
<meta property="og:image" content="https://example.com/images/cold-brew.jpg">
<meta property="og:site_name" content="The Coffee Blog">The tags that matter
| Tag | What it sets | Advice |
|---|---|---|
og:title | The bold headline of the card | Can differ from the search title: shorter and more inviting |
og:description | The line under the headline | One or two sentences; many apps show only the first line |
og:image | The picture | A full https:// address; see the size rules below |
og:url | The address the share counts for | The canonical address, without tracking parameters |
og:type | The kind of page | website for most pages, article for posts |
og:site_name | The site shown above or below the title | Your brand name |
og:locale | The language and region | Such as en_US; optional |
Note that Open Graph uses property, not name. Most platforms accept either, but property is what the specification says.
The image: size and format
The image is what people notice first, and it is where most previews go wrong.
- Size: 1200 × 630 pixels, a ratio of 1.91 to 1, works everywhere. Images smaller than 600 × 315 may be shown as a small thumbnail or dropped.
- Format: JPG or PNG are safe. WebP is accepted by most but not all platforms; GIFs are shown as a still image.
- File size: keep it well under a few megabytes. Some apps, WhatsApp in particular, skip heavy images.
- Address: an absolute https:// address that anyone can open. Relative paths, images behind a login and addresses blocked by robots.txt do not work.
- Safe area: keep text and faces away from the edges, since some apps crop the image to a square or a narrower strip.
The image converter resizes and compresses an image to these dimensions without uploading it.
X (Twitter) cards
X reads Open Graph tags for the title, description and image, but one decision needs its own tag: twitter:card. With summary_large_image, the picture is shown wide above the text; with summary, it is a small square beside it. Without the tag, links may appear as a plain URL. twitter:site can name the account behind the site. The Twitter card generator writes both sets of tags together.
Open Graph and search engines
Search engines do not rank pages by their Open Graph tags; the <title> element and the meta description shape the search result instead. The two sets often carry similar text, but they serve different readers: the search title should contain the words people search for, while the share title can be written for someone scrolling a feed. The Google search preview shows how the search version looks.
Why a preview is wrong or missing
| Symptom | Likely cause | Fix |
|---|---|---|
| Old image or text after a change | The platform cached the first preview | Ask it to re-read the page, for example with the Facebook Sharing Debugger or LinkedIn Post Inspector |
| No image at all | Relative or unreachable image address | Use a full public https:// address |
| Tiny thumbnail instead of a wide picture | Image too small, or no twitter:card on X | Use 1200 × 630 and add summary_large_image |
| The wrong title | Tags added by JavaScript after the page loads | Put the tags in the HTML the server sends; most crawlers do not run scripts |
| Nothing on one page only | The page blocks bots or needs a login | Allow the crawler to fetch the page |
The JavaScript point catches many single-page apps: if the tags only appear after scripts run, the crawlers of social networks never see them. Render them on the server, or pre-render the pages that are shared most.
Writing the tags
The Meta Tag Generator writes the search tags, the Open Graph tags and the X tags from one short form, with previews for Google, Facebook and X that update as you type. It can also read the tags of an existing page from its HTML, which is the quickest way to audit a page you already have. The Open Graph generator opens it with the social preview in focus.