Link Preview Simulator (Social Card Preview)
See how a link will look when shared, and which meta tags to fix.
The HTML is parsed in your browser without running scripts. Images stay unloaded unless you tick Load images, which fetches them from their own servers.
About the Link Preview Simulator
Paste a page's HTML to preview how its link looks on Google, X, Facebook, LinkedIn, Slack, Discord and iMessage, with missing or broken Open Graph tags listed.
How to use the Link Preview Simulator
- Open your page, view its source and copy the HTML, or just the <head> section, then paste it into the box.
- Optionally enter the page URL so relative links such as /favicon.svg can be resolved.
- Compare the previews for Google, X, Facebook, LinkedIn, Slack, Discord and iMessage or WhatsApp. Truncated text ends with an ellipsis.
- Work through the list of issues and recommendations, then update your tags and paste again to check.
- Tick “Load images” if you want to see the share image. It is off by default so nothing is downloaded.
Examples
Input
<head> <title>How to Brew Better Coffee at Home | Bean Notes</title> <meta name="description" content="A simple guide to grind size, water temperature and ratios, so every cup you brew at home tastes as good as your favourite café."> <link rel="canonical" href="https://beannotes.example/guides/better-coffee"> <link rel="icon" href="/favicon.svg"> <meta name="theme-color" content="#7c4a1e"> <meta property="og:type" content="article"> <meta property="og:site_name" content="Bean Notes"> <meta property="og:title" content="How to Brew Better Coffee at Home"> <meta property="og:description" content="Grind size, water temperature and ratios explained in five minutes."> <meta property="og:url" content="https://beannotes.example/guides/better-coffee"> <meta property="og:image" content="https://beannotes.example/images/coffee-share.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="A pour-over coffee maker on a kitchen counter"> <meta name="twitter:card" content="summary_large_image"> </head>
Output
Title: How to Brew Better Coffee at Home | Bean Notes Description: A simple guide to grind size, water temperature and ratios, so every cup you brew at home tastes as good as your favourite café. og:title: How to Brew Better Coffee at Home og:description: Grind size, water temperature and ratios explained in five minutes. og:image: https://beannotes.example/images/coffee-share.jpg twitter:card: summary_large_image Canonical: https://beannotes.example/guides/better-coffee Issues: none
Input
<head> <title>Home</title> <meta property="og:image" content="/img/share.png"> </head>
Output
Title: Home Description: (missing) og:title: (missing) og:description: (missing) og:image: /img/share.png twitter:card: (missing) Canonical: (missing) Issues: - [error] og:image is relative (/img/share.png). Use an absolute URL starting with https://; most crawlers do not resolve relative paths. - [warning] No meta description. Add <meta name="description" content="…">. - [warning] No og:title. Platforms will fall back to the <title>. - [warning] No og:description. Platforms will fall back to the meta description, if any. - [warning] No canonical link. Add <link rel="canonical" href="https://…">. - [tip] Add og:image:width and og:image:height so the image shows on the very first share. - [tip] Add og:image:alt to describe the image for screen reader users. - [tip] No og:url. Add the page's canonical absolute URL so shares are counted together. - [tip] No og:type. Use "website" for most pages or "article" for posts. - [tip] No og:site_name. Slack and Discord show it above the title. - [tip] No twitter:card. X will use the small "summary" card; add summary_large_image for a big image. - [tip] No <link rel="icon">. Browsers and Google will try /favicon.ico.
Frequently asked questions
Is my HTML uploaded or run?
No. The HTML is parsed in your browser with DOMParser, which builds an inert document: scripts do not run and nothing is fetched. All text is shown as plain text. Images are only loaded if you tick Load images, and only from http or https addresses.
How accurate are the previews?
They are close approximations of each platform's layout and usual truncation lengths, such as about 60 characters for a Google title. Real platforms truncate by pixel width, cache old versions and change their designs, so use each platform's own debugger for a final check.
What size should my share image be?
1200×630 pixels (a 1.91:1 ratio) works well on Facebook, LinkedIn, X large cards, Slack and Discord. Keep it under about 5 MB, use an absolute https URL, and add og:image:width, og:image:height and og:image:alt.
Why must image and page URLs be absolute?
Crawlers that build link previews often read og:image and og:url without resolving them against the page address, so a path like /img/share.png is ignored. Always write the full URL, including https://.