Open Graph Images: How to Make Your Links Look Great When Shared

When you paste a link into WhatsApp, Facebook, LinkedIn, Slack or X, a preview card appears with a title, a short description and usually a large image. That card is built from a few tags in the page's HTML, known as Open Graph tags. A good preview image can noticeably increase how many people click. This guide shows how to set it up correctly.

The tags you need

Add these inside the <head> of each page:

<meta property="og:title" content="How to Brew Perfect Filter Coffee">
<meta property="og:description" content="A simple 5-step method for rich South Indian filter coffee.">
<meta property="og:image" content="https://example.com/images/filter-coffee-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Filter coffee being poured into a steel tumbler">
<meta property="og:url" content="https://example.com/filter-coffee">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">

The image address must be absolute (starting with https://) and publicly reachable. Relative paths such as /images/photo.jpg often fail.

The best image size

Use 1200 × 630 pixels (a ratio of about 1.91:1). It displays well on Facebook, LinkedIn, WhatsApp, Slack and X's large card. A few practical rules:

Rule	Why
1200 × 630 px, JPEG or PNG	Widely supported; sharp on high-density screens.
Keep the file small (ideally under 300 KB)	Chat apps may skip large images or show them slowly.
Keep text and faces in the centre	Some apps crop the edges or show a square thumbnail.
Large, short text only	Previews are often shown small on phones.
Avoid WebP/AVIF for this tag	Not every platform's preview generator supports them.

One image per page

Using the same logo image for every page is a missed opportunity. For articles, use the main photo or a simple branded card with the article title. For products, use the product photo on a clean background. Many content management systems and SEO plugins let you set this per page.

Fixing a preview that shows the wrong image

Platforms cache previews, sometimes for days. If you changed the image but the old one still appears:

Check the tags are really in the page source (Ctrl + U and search for og:image). Tags added later by JavaScript are usually ignored by preview bots.
Open the image address directly to make sure it loads and isn't blocked.
Use the platform's tool to refresh the cache: Facebook's Sharing Debugger and LinkedIn's Post Inspector both have a “scrape again” button.
For WhatsApp and some other apps there is no refresh tool; adding a harmless query string such as ?v=2 to the shared link forces a fresh preview.

See any page's preview image

Want to see which image a page uses for sharing, or grab a competitor's preview to compare styles? Enter the page in our extractor. It reads og:image and twitter:image tags and lists them along with the other media, so you can check size and format at a glance.

Key takeaways

Set og:title, og:description and og:image on every page.
Use a 1200 × 630 JPEG or PNG with an absolute HTTPS address.
Keep important content centred and the file small.
Use the platforms' debugging tools to refresh old previews.