Paste a page’s HTML to see how its link will look on Facebook, X, LinkedIn, Discord, Slack and iMessage, and get a plain-English fix for every missing or broken tag.
How do I get a page’s HTML?
- Open the page and view its source:
Ctrl+Uon Windows and Linux,Cmd+Option+Uon a Mac (in Safari, first turn on the Develop menu in Settings, then Advanced). Select everything withCtrl+AorCmd+A, copy, and paste it above. - Or, from a terminal:
curl -sL https://example.com/page. To see what Facebook’s crawler is sent, add its user agent:curl -sL -A "facebookexternalhit/1.1" https://example.com/page. - Do not copy from the browser’s developer tools Elements panel. It shows the page after JavaScript has run, and most crawlers read the raw HTML the server sends, so tags added by scripts can be invisible to them.
The HTML you paste is read in your browser and never uploaded. To draw the previews, your browser loads the preview image (and favicon) directly from wherever they are hosted.
Where a link preview comes from
When someone pastes your link into a post or a chat, the platform’s own server downloads the page, reads a few tags in its <head>, fetches the image they point to, and turns the result into a card. Your visitor’s browser is not involved. The crawler typically does not run JavaScript, does not log in, sends no cookies and no Referer header, and saves what it found so the next share reuses it.
The tags it reads are mostly Open Graph, a format Facebook introduced in 2010 that nearly every platform now understands. X adds its own twitter: tags but falls back to Open Graph for anything missing. When even those are absent, platforms guess from the <title> and meta description. A complete set for one page looks like this:
<meta property="og:title" content="How to Fix a Leaky Faucet">
<meta property="og:description" content="A ten-minute repair with one wrench.">
<meta property="og:image" content="https://example.com/img/faucet-card.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A chrome faucet with a drop of water">
<meta property="og:url" content="https://example.com/fix-a-leaky-faucet/">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example Home">
<meta name="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#42a4c7">The image is where most previews break
A preview with a broken image is the most common complaint, and the cause is rarely the tag itself. Work through these in order:
- Use a full https:// address. Several platforms do not resolve relative paths like
/img/card.jpg, and an http image is refused by some apps. - Make it 1200×630. That 1.91:1 shape fills the large card on Facebook, LinkedIn and X without cropping. Facebook turns anything under 600×315 into a small thumbnail and ignores images under 200×200. Use JPEG or PNG; SVG is not accepted.
- Declare the size. Facebook has to download and measure an image before it can display it, so the very first share of a new page can appear with no picture.
og:image:widthandog:image:heightlet it lay out the card immediately. - Check that a crawler can actually fetch it. Hotlink protection is the classic trap. A rule that blocks image requests without a Referer from your own site stops every crawler, because crawlers send no Referer. The image shows perfectly on your pages and fails in every preview. Bot protection and firewalls do the same thing to the page itself, and X’s crawler obeys
robots.txt, so a Disallow rule covering your pages or images stops cards there.
This tool loads your image with no Referer, the way crawlers do, so hotlink protection fails here too instead of hiding behind your browser.
Write the title and description for the card
The <title> tag is written for search results and browser tabs, which is why it usually ends in a separator and the site name. A share card already shows your domain, and Discord and Slack show og:site_name as well, so og:title can drop the suffix and spend its space on the headline. Roughly 60 to 90 characters survive before platforms cut it off, fewer in X’s small card, so put the words that matter first.
Treat og:description as a supporting line rather than the pitch. Facebook and LinkedIn often show one line of it or none at all on phones, and X’s large card shows only the image, the title and the domain. One or two plain sentences under 200 characters is plenty. If a page has no og:description, most platforms fall back to the meta description, which is often written for search engines and reads awkwardly in a card.
What each platform reads
| Platform | Title | Image | Worth knowing |
|---|---|---|---|
| og:title, then <title> | og:image | Follows og:url and builds the card from that page | |
| X | twitter:title, then og:title | twitter:image, then og:image | twitter:card decides between a large image and a small square |
| og:title | og:image | Shows the title and domain, rarely the description | |
| Discord | og:title | og:image | Colors the side bar with theme-color; large image only with summary_large_image |
| Slack | og:title | og:image | Shows og:site_name and your site icon above the title |
| iMessage | og:title, then <title> | og:image | Falls back to your touch icon when there is no image |
When the preview is wrong or will not update
It is cached. Every platform stores the card it built the first time. Facebook’s Sharing Debugger has a Scrape Again button and LinkedIn’s Post Inspector refetches on request. X, Slack and Discord refresh on their own schedule.
The tags are added by JavaScript. Single-page apps often set titles and meta tags in the browser after the page loads. You see them in the developer tools, but a crawler that reads only the HTML the server sends never does. The fix is to render the tags on the server or prerender the page. That is why this tool asks for the page source from view-source or curl: it is what the crawler gets.
og:url points somewhere else. A template that hard-codes the home page into og:url makes every article preview as the home page, because Facebook fetches whatever og:url names. It should match the page’s canonical link exactly, trailing slash included.
There are two sets of tags. A theme and an SEO plugin each writing their own og:title is common, and platforms disagree about which copy wins. Keep exactly one.
For a step-by-step walk through each platform’s debugger, read how to fix link previews.
