How I preview link cards before sharing a page

When you paste a link into Slack, WhatsApp, Telegram, LinkedIn, or another app, it often turns into a card with a title, description, and image.

That preview does not appear by magic. It usually comes from metadata in the page HTML.

The Open Graph Debugger helps check those tags before I share a page publicly.

The simple idea

A link preview usually needs three things:

title + description + image

In HTML, they often look like this:

<meta property="og:title" content="My page title">
<meta property="og:description" content="A short explanation of the page.">
<meta property="og:image" content="https://example.com/og.png">

These are Open Graph tags. Many platforms read them to build the preview card.

Step 1: check the title

The title should explain the page clearly.

<meta property="og:title" content="How to debug CORS without guessing">

A good title is specific. A weak title is generic.

Weak:

Home

Better:

How to debug CORS without guessing

The preview card may be the first thing someone sees. Make it understandable without extra context.

Step 2: check the description

The description should summarize the page in one or two short sentences.

<meta property="og:description" content="A step-by-step guide to reading CORS errors and checking response headers.">

Avoid descriptions that are too vague:

Welcome to my website.

The reader should know what they will get after clicking.

Step 3: check the image

The Open Graph image is usually the biggest part of the preview.

<meta property="og:image" content="https://example.com/og.png">

Use an absolute URL, not a relative path. This is safer for crawlers and chat apps.

Better:

https://example.com/og.png

Risky:

/og.png

Some platforms handle relative URLs. Some do not. I prefer absolute URLs.

Step 4: check image size

A common size for large preview images is:

1200 x 630

Many sites also include:

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

The image should be readable when cropped or displayed small. Avoid tiny text in the image.

Step 5: check Twitter Card tags

Some platforms also read Twitter Card tags:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My page title">
<meta name="twitter:description" content="A short explanation.">
<meta name="twitter:image" content="https://example.com/og.png">

Often the values match the Open Graph values. The important part is that they are present and consistent.

Step 6: paste the HTML into the debugger

Open Open Graph Debugger and paste the page HTML.

The tool extracts the Open Graph and Twitter Card tags and shows a preview. This is useful before deploying, or when debugging a page from view-source output.

Check:

title;
description;
image URL;
card type;
missing tags;
duplicated or conflicting tags.

Step 7: check what the crawler can access

A preview image must be reachable publicly. If the image requires login, blocks bots, or returns a wrong content type, some apps cannot show it.

Things to check:

image URL opens in a private browser window;
image returns 200 OK;
image is not blocked by auth;
image is not too large;
image is served as an image file.

If the image works for you only because you are logged in, it may fail for preview crawlers.

Step 8: remember that apps cache previews

Many chat and social apps cache link previews. If you fix the tags and paste the link again, the old preview may still appear for a while.

That does not always mean your fix failed. It may mean the platform has not refreshed its cache yet.

For testing, I sometimes add a harmless query string:

https://example.com/page?preview=1

Only do this for testing. The canonical page URL should stay clean.

My link preview checklist

Before sharing a page, I check:

Is there an og:title?
Is there an og:description?
Is there an absolute og:image URL?
Is the image publicly accessible?
Is the image large enough for a card?
Are Twitter Card tags present if needed?
Does the preview text match the page content?
Could an app be showing a cached old preview?

A good link preview is small, but it matters. It helps people understand the page before they click.