Guides

Fix the link card, whatever app it breaks in.

Start with the symptom. Each guide explains what the crawler actually reads, how to check it yourself with curl or view-source, and what to change. All 15 are free to read.

My card isn't showing at all

Crawler blocked

Right tags, bare URL? Bot protection, a WAF rule, robots.txt, or a login wall may be answering the preview crawler instead of your page.

Read the guide

JavaScript / SPA previews

Preview crawlers read server HTML and don't run your bundle. Tags added by React, Vue, or a head manager after load never arrive.

Read the guide

Absolute OG image URL

Relative og:image paths break most crawlers. Use absolute https and verify before you rescrape.

Read the guide

OG image format

SVG share images show no picture, WebP and AVIF are hit and miss, and a CDN can swap your PNG behind your back.

Read the guide

My card shows, but it's wrong or out of date

Clear OG cache

The live HTML is right but Slack, X, LinkedIn, Discord, or iMessage still show the old card. Verify tags, then rescrape.

Read the guide

OG image size

Start with 1200×630 and a center safe zone. Crop notes for Facebook, X, LinkedIn, Slack, Discord, and WhatsApp.

Read the guide

OG title & description

Soft length guidance, specific page titles, and how each platform truncates.

Read the guide

og:url vs canonical

When og:url and rel=canonical disagree, scrapers pick the wrong page identity. Align both.

Read the guide

Twitter Card types

summary is a small square thumb; summary_large_image is the big landscape card. twitter:card picks the layout.

Read the guide

How each app unfurls links

Slack vs Discord

Slack is Open Graph–first with a sidebar thumb. Discord uses twitter:card to pick a large embed.

Read the guide

LinkedIn vs X

LinkedIn is Open Graph with a landscape card. X uses twitter:card to pick large vs small.

Read the guide

iMessage link preview

Apple rich links are Open Graph–based. Missing og:image usually collapses to a plain URL.

Read the guide

WhatsApp / Telegram

Chat unfurls lean on Open Graph. An absolute, publicly fetchable og:image matters most.

Read the guide

Facebook / Meta

Meta reads Open Graph for link cards. Rescrape with the Sharing Debugger after you verify tags.

Read the guide

Adding the tags

OG tags by framework

Copy-paste share tags for Next.js, Astro, Hugo, and WordPress, plus the traps that wipe your image.

Read the guide

Rather see it than read about it?

Paste the exact link you shared. CardScope fetches it from the edge like a crawler and shows the card on X, LinkedIn, Slack, Discord, and iMessage, plus a fix checklist. Previews and the checklist are Pro: $19 once via Stripe Checkout. No account. We parse HTML in memory and discard it.

Check a URL