How to use URL Metadata / OG Preview
What it does & when you need it
Paste a URL and this tool shows you the link preview that Slack, Discord,
iMessage, WhatsApp, LinkedIn, and the social platforms will build when someone
shares that page. That card — the big image, the bold headline, the one-line
description — does not come from the visible page content. It comes from a small
set of Open Graph <meta property="og:..."> tags in the page <head>:
og:title, og:description, and og:image. Crawlers read those tags and
ignore your actual body copy, which is why a page can look great in a browser
and still produce an ugly or blank preview when shared.
Reach for it when you are shipping a marketing page, a blog post, or a launch announcement and want to confirm the card looks right before it hits a thousand timelines — or when a shared link already looks broken and you need to see what the crawler is actually reading.
Unlike most tools on this site, this one is not purely in-browser. To read a
page's tags the way a real crawler does, the request has to come from a server,
not from your browser (cross-origin rules would block a direct fetch anyway). So
when you press Preview, the URL you enter is sent to our server, which fetches
the page — capped at 512KB — parses the <head>, and returns the tags. If
that privacy trade-off matters for an internal or unpublished URL, keep it in
mind: the page is retrieved by us, exactly as a social scraper would retrieve it.
How to use
- Enter the full URL (including
https://) in the Page URL field. - Press Preview, or use
Ctrl/Cmd+Enter. A loading line appears while we fetch the page. - The top card is a rendered social preview:
og:image, then the site name, the Open Graph title (falling back to the<title>), and the description. - Below it, a raw table lists every field we extracted —
title,description,og:title,og:description,og:image, andfavicon— so you can spot exactly which tag is missing or wrong. Fields the page never set are shown as not set.
Things worth knowing
A missing og:image is the usual culprit behind an ugly card. If the tag is
absent, or the image file is too large or too slow for the crawler to fetch in
time, platforms fall back to the page <title> and a generic globe or document
icon. That is why some links render as a sad grey box even though the page
itself is fine — the crawler gave up on the image and moved on.
Use an absolute URL for og:image, ideally 1200×630. Relative paths like
/og.png frequently fail because a scraper resolves them against a different
base than a browser does, so it ends up requesting the wrong address and getting
nothing. Always give the full https://… URL, and size the image at 1200×630
(a 1.91:1 ratio) so it fills the card on the widest surfaces without cropping.
Decoding is not verifying, and reading tags is not fetching assets. This
tool reports the tag values; it does not download and re-encode the image or
guarantee the crawler can reach it. If og:image looks correct here but the
card is still blank, the image host may be blocking bots or serving it too
slowly — check the response with the HTTP Header Viewer,
and confirm the hostname resolves with the DNS Lookup.
Escaping matters inside meta tags. An ampersand or angle bracket in a title has to be written as an HTML entity, or the tag can break parsing; the HTML Entity Encoder is handy for cleaning those up before you paste them into a template. What you see in this preview is what sharers will see — the same page, fetched the same way a social crawler fetches it.