# How I preview link cards before sharing a page

A beginner-friendly guide to Open Graph and Twitter Card tags, why link previews break, and how to test a page preview before posting it.

- Date: 2026-09-27
- URL: https://ilham.dev/posts/how-to-preview-link-cards-with-open-graph/
- Markdown: https://ilham.dev/posts/how-to-preview-link-cards-with-open-graph/index.md
- Tags: open-graph, seo, web, tools
- Reading time: 4 min


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](/tools/open-graph-debugger/) helps check those tags before
I share a page publicly.

## The simple idea

A link preview usually needs three things:

```text
title + description + image
```

In HTML, they often look like this:

```html
<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.

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

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

Weak:

```text
Home
```

Better:

```text
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.

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

Avoid descriptions that are too vague:

```text
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.

```html
<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:

```text
https://example.com/og.png
```

Risky:

```text
/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:

```text
1200 x 630
```

Many sites also include:

```html
<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:

```html
<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](/tools/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:

```text
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:

1. Is there an `og:title`?
2. Is there an `og:description`?
3. Is there an absolute `og:image` URL?
4. Is the image publicly accessible?
5. Is the image large enough for a card?
6. Are Twitter Card tags present if needed?
7. Does the preview text match the page content?
8. 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.