BrowserTools
Home / Validators / Link Preview

Link Preview

See how a link to your page will look when shared on social apps and in search, and fix the missing tags.

Maintained by BrowserTools · Last updated 2026-09-29

Loading Link Preview… If nothing happens, please enable JavaScript.

When someone pastes a link into WhatsApp, Slack or a LinkedIn post, the app fetches the page in the background and builds a small card from a handful of tags in its head: og:title, og:description, og:image and og:url from the Open Graph protocol, plus twitter:card for X. If those tags are missing, too long or pointing at a relative path, the card comes out as a bare URL, a headline with a "| Company name" tail, or a picture cropped in the wrong place. This tool shows you the result before you publish. Paste the source of your page (or just the head section) and it reads every meta tag with the browser's own HTML parser, works out which value each platform will use, and draws a preview card for Google search, Facebook, X, LinkedIn, WhatsApp, Slack and Discord side by side.

Frequently asked questions

Why can't I just enter my URL?
Fetching another website from a web page is blocked by the browser's same-origin rules unless that site explicitly allows it, and very few do. Getting around that would need a server that downloads the page for you, and this site deliberately does everything on your device. Open your page, use View page source (Ctrl+U or Cmd+Option+U), copy it and paste it here. Only the head section matters, so you can paste just that part.
What is the best size for og:image?
1200 by 630 pixels, a 1.91:1 ratio, is the size Facebook recommends and it works well on LinkedIn, WhatsApp, Slack and Discord. X crops large cards to 2:1, so keep important text and faces away from the top and bottom edges. Images under 600 pixels wide are shown as a small square thumbnail on several platforms, and Facebook ignores images under 200 by 200. Use JPG or PNG under about 300 KB if you care about WhatsApp, and never SVG.
Which tags do I actually need?
For a reliable card everywhere: og:title, og:description, og:image (absolute URL), og:url (the canonical address) and twitter:card set to summary_large_image. og:type, og:site_name, og:image:width, og:image:height and og:image:alt are recommended extras. X reads the Open Graph tags as a fallback, so twitter:title, twitter:description and twitter:image are only needed when you want different text or a different image on X.
Why does Google show a different title than Facebook?
Google search does not use Open Graph. It builds the result from the HTML title element and the meta description, and it may rewrite either one if it thinks another part of the page describes it better. Social apps prefer og:title and og:description. That is why the Google preview here reads the title element, while the other cards read the Open Graph values.
I fixed my tags but Facebook or LinkedIn still show the old preview. Why?
Platforms cache link previews, often for days or weeks. Facebook's Sharing Debugger and LinkedIn's Post Inspector both let you enter the URL and trigger a fresh scrape. X refreshes its cache on its own, usually within a week. WhatsApp and Slack cache per conversation, so sharing the link with a query string such as ?v=2 is a quick way to see the new version.
Why must og:image and og:url be absolute URLs?
The scrapers read your tags as plain text and many of them do not resolve paths against the page address. A value like /images/card.jpg may work on one platform and silently fail on another. Use the full address, starting with https://. The tool flags relative and protocol-relative values and, if you enter the page URL, writes the resolved absolute version into the corrected tag block.
Are the previews pixel-perfect?
They are close approximations of each platform's current layout, drawn with this site's own styles, so you can judge text length, cropping and which elements appear. The real apps change their designs regularly, and truncation depends on screen width, font and language. The thresholds used (about 60 characters for Google titles, 160 for descriptions, 600 pixels for large images) follow the platforms' published guidance and common observed behaviour.
Is my HTML or image uploaded anywhere?
No. The HTML is parsed with the browser's built-in DOMParser, which never runs scripts and never loads images or stylesheets from the pasted code. An uploaded image is shown from a local object URL and never leaves your device. The page makes no request to your site or to any social network.

About Link Preview

The page cannot fetch your URL for you: browsers block that kind of cross-site request, and this site keeps everything on your device, so it never contacts your server either. That also means remote images are not downloaded. The cards show a placeholder with the image address, and if you upload the actual image file you see it cropped exactly as each app would crop it, 1.91:1 for large cards, 2:1 on X and square for small thumbnails, together with its real pixel size and file weight. If you are still designing the page, switch to the form and type a title, description, URL and image address directly, and watch the counters as you get close to the limits.

Under the previews, a list of checks explains what would go wrong and why: missing Open Graph tags, a twitter:card value X does not recognise, titles longer than Google's roughly 60 characters, descriptions past 160, relative or protocol-relative URLs, SVG images that no app renders, images below 600 pixels wide that drop to a small thumbnail, duplicated tags that different apps resolve differently, and tags placed outside the head where some scrapers stop reading. Finally, it writes a clean, corrected tag block with absolute URLs, declared image dimensions and the right attributes, ready to copy into your template. Once the new tags are live, remember that Facebook, LinkedIn and X cache previews, so use their debugging tools to force a fresh fetch.

Open Graph was built for a Like button

Facebook introduced the Open Graph protocol at its f8 developer conference in April 2010, alongside the Like button that any website could embed. The idea was to turn ordinary web pages into objects in Facebook's social graph: a page about a film could declare itself to be a movie, with a title, an image and a canonical URL, and liking it would connect you to that object just like a fan page.

The protocol was designed to be deliberately simple, borrowing RDFa's property attribute so that publishers only had to add a few meta tags. That simplicity is why it spread far beyond Facebook. Twitter launched its own Cards in 2012 but chose to fall back to Open Graph values when its twitter: tags were missing, and later LinkedIn, Pinterest, Slack, Discord, WhatsApp, iMessage and Telegram all started reading the same og: tags. Today, a standard introduced to power one button quietly decides how nearly every shared link on the internet looks.

Related tools

URL Parser

Split a web address into its parts: domain, path, query parameters and more.

llms.txt & AI Robots.txt Generator

Create an llms.txt file that tells AI assistants what your site is about, and robots.txt rules to allow or block AI crawlers.

Favicon Generator

Turn any image into the small website icons browsers need, in every size.

SQL Formatter

Tidy up an SQL query so it is easy to read, or compress it onto one line.
Support