Free Tools
By Fadhil Abdulla

Open Graph Images: How to Make Link Previews That Get Clicked

What og:image is, the right size, design rules for share images, the meta tags to add, and how to refresh cached previews on LinkedIn and Facebook.

Editorial disclosure: Pyalm publishes and maintains the products and free tools discussed on this site. Regulatory statements are linked to primary sources where applicable. No independent professional review is claimed unless a reviewer is explicitly named.

When someone shares your link on LinkedIn, WhatsApp, Facebook, X or Slack, the platform builds a preview card from your page's Open Graph tags. The image is the biggest part of that card — and the biggest factor in whether people click.

The essentials

<meta property="og:title" content="Free UAE VAT Calculator">
<meta property="og:description" content="Add or remove 5% VAT in seconds.">
<meta property="og:image" content="https://www.example.com/og/vat.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

The image URL must be absolute and publicly reachable.

Size

1200 × 630 px (1.91:1) works across Facebook, LinkedIn, X and WhatsApp. Keep files under ~5 MB; PNG or JPG both work. Some platforms crop to square in certain views, so keep key content centred.

Design rules that work

  • One clear headline in large type — previews are often thumbnail-sized.
  • Brand colours and logo so people recognise the source.
  • High contrast text on background.
  • Safe margins — keep text away from the edges.
  • Different image per important page — a generic site-wide image wastes the opportunity.

Make one in a minute

  1. Open the free OG Image Generator.
  2. Choose a template (gradient, split, minimal, dark).
  3. Add your title, subtitle, tag, site name, colours and logo.
  4. Download the 1200×630 PNG and copy the ready-made meta tags.

Refreshing a cached preview

Platforms cache previews for days. After changing your image:

  • LinkedIn: Post Inspector → enter the URL → it re-scrapes.
  • Facebook: Sharing Debugger → Scrape Again.
  • WhatsApp: caches per chat; changing the URL slightly (?v=2) forces a fresh fetch.

Automate it

Sites with many pages (blogs, products, tools) should generate OG images automatically from the page title. This site does exactly that for every blog post. Pyalm builds SEO-ready websites with dynamic social images, structured data and sitemaps out of the box.

OG Image Generator | SERP Preview | Favicon Generator | Image Resizer | All free tools

Keep reading

More from Pyalm

Oct 16, 2026

How to Format and Validate JSON (and Fix the 6 Most Common Errors)

Why JSON breaks, how to read a validator's error message, and a quick routine for pretty-printing, minifying and fixing JSON from APIs, logs and config files.

Oct 16, 2026

How to Compare Two JSON Files (Without Drowning in Diff Noise)

Text diffs flag reordered keys and whitespace as changes. Here's how a structural JSON comparison works, and how to use it to review API changes, configs and migrations.

Oct 16, 2026

Regex Cheat Sheet with Real Examples (Emails, Phones, Dates, UAE TRN)

A practical regular expression cheat sheet — the syntax you actually use, plus tested patterns for emails, UAE and Indian phone numbers, dates and tax numbers.

Oct 16, 2026

URL Encoding Explained: %20, + and When to Encode

What percent-encoding is, why spaces become %20, the difference between encodeURI and encodeURIComponent, and how to avoid double-encoding bugs.

Oct 16, 2026

Unix Timestamps Explained: Epoch Time, Seconds vs Milliseconds and Time Zones

What epoch time is, why it's the standard way to store dates, how to tell seconds from milliseconds, and how to avoid the time-zone bugs it causes.

Oct 16, 2026

Minify vs Beautify: What Code Minification Does and When to Use It

How minifying JavaScript, CSS and HTML shrinks files, how much it really saves, and when to beautify minified code to debug it.

Try the free OG Image Generator

Pyalm designs and builds fast, conversion-focused websites in Next.js — the same stack these tools run on. If you'd rather have it built than fiddle with CSS, talk to us.

Open OG Image Generator See website development All free tools