Anticode Open builder

How to set an Open Graph image for link previews

Add an og:image meta tag to the page's head pointing at a 1200 by 630 pixel image on a full https:// address, along with og:title, og:description and og:url. Then paste the link into a preview tool before you share it, because apps cache the first image they see.

Updated · By the Anticode team

What Open Graph controls

When you paste a link into WhatsApp, Slack, LinkedIn, iMessage or Facebook, the app fetches the page and looks for Open Graph tags: <meta property="og:…"> elements in the <head>. They supply the title, short description and image of the preview card. Without them, each app guesses, often picking a logo, a cropped photo or nothing at all. The tags don't affect search rankings; they decide how your link looks the moment someone shares it.

The tags to add

og:title
The headline of the card. Usually the page title without the site name, or a slightly more conversational version.
og:description
One or two sentences. Many apps show only the first line, so lead with the point.
og:image
A full URL starting with https://. Relative paths such as /share.png fail in some apps.
og:url
The canonical address of the page, so shares of variants with tracking parameters collect on one URL.
og:type
website for most pages, article for blog posts.
og:image:width, og:image:height
Optional, but they let some apps draw the card before they've downloaded the image.
og:image:alt
A description of the image for people using screen readers in apps that support it.

X reads Open Graph tags as a fallback; add <meta name="twitter:card" content="summary_large_image"> if you want its large card rather than the small square.

Make the image, step by step

Here's how to set an Open Graph image that holds up across the apps people share links in.

  1. Start at 1200 by 630 pixels. Meta's image guidance recommends that size, an aspect ratio of about 1.91 to 1, and at least 600 by 315 for the large card. It works well in most other apps too.
  2. Keep the important part in the middle. Some apps crop to a square or a narrower ratio, so leave room around text and faces.
  3. Use a few large words, or none. A business name and one line, set big enough to read at thumbnail size. A photo of the actual place or product often beats text on a coloured background.
  4. Export as JPEG or PNG and keep it well under a megabyte. Meta's limit is 8 MB, but large files load slowly and some apps give up.
  5. Upload it to the site at a stable address, and use a new filename whenever you change it. Apps cache images by URL.
  6. Add the tags to each page's head that you expect people to share. A site-wide default image is a sensible fallback; pages that get shared on their own, such as an event or a product, deserve their own.

Test before you share

  • Meta's Sharing Debugger shows what Facebook and Instagram will display, and its Scrape Again button refreshes the cache after you change something.
  • LinkedIn's Post Inspector does the same for LinkedIn and also refreshes its cached copy.
  • Send the link to yourself in WhatsApp or Slack. Both cache previews, so test with the final URL, not a draft.
  • View the page source and search for og:image. If the tag isn't in the HTML the server sends, apps that don't run scripts won't see it.

Common mistakes

  • Sharing the link before the tags exist. The first fetch gets cached, sometimes for days. Fix it, then refresh in each debugger.
  • Pointing at an image behind a login or blocked by robots.txt. The app's fetcher must be able to download it.
  • One image for every page, so a shared product link shows your logo instead of the product.
  • Tiny text. A headline that reads well on a laptop is unreadable in a phone chat bubble.
  • Setting tags with JavaScript after the page loads. Most preview fetchers read the raw HTML only.

On Anticode sites

Anticode's design-engine pages don't set Open Graph tags today, and the code editor keeps only text, section order and colour tokens, so you can't add them by hand. Collection pages served from the CMS carry og:title and og:description but no og:image. Shared links fall back to whatever each app picks from the page, usually the title and description. If rich previews matter for a campaign, check the link in the debuggers above before posting, and consider the Next.js export, where the head is ordinary code you can edit. A good title tag and meta description still shape the text most apps show.

Limits

Each app decides how to draw its cards and changes it from time to time, so no single image looks identical everywhere. Treat 1200 by 630 as the safe default rather than a rule, and check the two or three apps your audience actually uses.

Questions people ask

Why is an old image still showing?

The app cached the earlier version. Rename the image file, update the tag, then use the platform's debugger to fetch the page again. Messaging apps may hold the old preview for a while.

Does every page need its own og:image?

No. A default image for the whole site is fine. Give pages that people share individually, such as events, products or articles, their own.

Can I use an SVG?

Many apps don't support SVG in previews. Use JPEG or PNG.

Sources

  1. The Open Graph protocol (ogp.me), checked
  2. Images in link shares (Meta for Developers), checked