Social Preview Images: Make Your Links Look Good When Shared

Paste a link into Slack, WhatsApp, LinkedIn, X, Discord, or iMessage, and it usually expands into a card with a title, a description, and an image. Paste your app's link and you might get a bare URL, the wrong title, or a random cropped logo. That card is controlled by a few lines in your page's HTML called Open Graph tags, and getting them right makes every share look intentional.

What Open Graph is

Open Graph is a set of <meta> tags, originally created by Facebook, that tell other sites how to preview your page. When you paste a link, the app fetches your page, reads these tags, and builds the card.

The essential tags go in the <head> of each page:

<meta property="og:title" content="Plant Tracker — never forget to water again">
<meta property="og:description" content="Reminders for every plant you own, on your phone.">
<meta property="og:image" content="https://plants.example.com/og-image.png">
<meta property="og:url" content="https://plants.example.com/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

og:title — the card's headline. Can differ slightly from your page <title>.
og:description — a sentence or two.
og:image — the picture. Must be a full URL, including https://, not /og-image.png.
og:url — the canonical address of the page.
twitter:card — X (formerly Twitter) uses its own tag to choose a layout; summary_large_image gives the big-image card. X falls back to the og: tags for the rest.

The image

Size: 1200 × 630 pixels (roughly 1.91:1). This works across nearly every platform.
Keep important content in the centre — some platforms crop the edges or show it square.
Large, readable text. Previews are often shown small, on phones.
PNG or JPG, ideally under 1 MB or so; some platforms ignore very large files.
Publicly accessible — not behind a login, not blocked by your server.

A good preview image shows your app's name, a short promise, and a hint of the product — a screenshot or illustration — in your brand colours.

Per-page previews

One image for the whole site is fine to start. But for blog posts, product pages, or user profiles, a specific image per page gets far more clicks.

In Next.js, you can set metadata per page, and generate images with code:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.description,
    openGraph: { title: post.title, description: post.description },
  }
}

And a file named opengraph-image.tsx next to a page can generate its image automatically — rendering the post's title onto a branded background — using Next.js's built-in image generation. (What Is Next.js?.)

Other frameworks have their own ways; your AI tool can set it up. Ask:

Add Open Graph and Twitter card tags to every page, with per-page titles and descriptions, and generate a 1200×630 preview image for each blog post showing its title.

Testing your previews

Don't test by posting publicly. Use:

Preview checker sites — search for "Open Graph preview" to find tools that show how your link looks on several platforms at once.
LinkedIn Post Inspector — shows LinkedIn's view, and refreshes its cache.
Facebook Sharing Debugger — same for Facebook.
A private chat with yourself in Slack or Discord.

"My preview isn't updating"

Platforms cache previews, sometimes for days. After fixing your tags:

Use the platform's debugger or inspector to force a refresh (LinkedIn and Facebook both have one).
For others, try adding a harmless query string to test, like ?v=2.
Check you deployed the change — view your page's source in production and search for og:image. (What Is Caching?.)

Common problems

Relative image URL (/og.png). Must be absolute (https://…/og.png).
Image blocked — behind login, on localhost, or on a preview URL that requires authentication.
Tags added by JavaScript after load. Many preview fetchers don't run JavaScript. The tags must be in the HTML the server sends. Server-rendered frameworks handle this; purely client-side apps (many Vite/React setups) may need extra work. (Static vs Dynamic Websites.)
Wrong domain — tags pointing at an old domain or a staging URL.

Don't forget the basics nearby

While you're in the <head>: a favicon (the tab icon), a unique <title> and <meta name="description"> on every page. They overlap with search engine basics. (SEO Basics for Your App.)

EasySpawn serves your app from your own domain with SSL, so your preview images have a real, public, absolute URL from day one. See how it works or join the waitlist.