Every time someone shares a link, X, LinkedIn, Facebook, Discord and Slack fetch the page and build a card from a handful of tags in its head. This tool shows you that card first. Enter a web address, paste the page's HTML or type the tags in, and see the five cards, the tags that were found and the ones that are missing.
We fetch the page through our server to read its tags. Only the address is sent.
This is an example, a page with every tag set. Enter yours above to see it.
X
Large image card
Open Graph Preview: see how your link looks when shared
From thecodingkitty.com
Open Graph Preview: see how your link looks when shared
thecodingkitty.com
thecodingkitty.com
Open Graph Preview: see how your link looks when shared
Paste a link and see it as a card on X, LinkedIn, Facebook, Discord and Slack, with the tags that are missing.
Discord
coding.kitty
Open Graph Preview: see how your link looks when shared
Paste a link and see it as a card on X, LinkedIn, Facebook, Discord and Slack, with the tags that are missing.
Slack
Open Graph Preview: see how your link looks when shared
Paste a link and see it as a card on X, LinkedIn, Facebook, Discord and Slack, with the tags that are missing.
Mock-ups in the style of each platform, not screenshots. Platforms change their layouts, and they keep what they have already fetched for a link, so a card you shared yesterday can look different from this one.
What the cards use
- Title
from og:title - Open Graph Preview: see how your link looks when shared
- Description
from og:description - Paste a link and see it as a card on X, LinkedIn, Facebook, Discord and Slack, with the tags that are missing.
- Image
from og:image - https://thecodingkitty.com/cat.webp
- Page
from og:url - https://thecodingkitty.com/resources/tools/open-graph-preview
Tags found (10)
og:titleOpen Graph Preview: see how your link looks when sharedog:descriptionPaste a link and see it as a card on X, LinkedIn, Facebook, Discord and Slack, with the tags that are missing.og:imagehttps://thecodingkitty.com/cat.webpog:image:altA cat in glasses typing on a laptopog:image:width256og:image:height256og:site_namecoding.kittyog:typewebsiteog:urlhttps://thecodingkitty.com/resources/tools/open-graph-previewtwitter:cardsummary_large_image
Nothing missing
Every core tag is set and nothing looks off. Nice.
Only web address mode sends our server anything: the address of the page to fetch, which is not stored or logged. In every mode the preview cards load the page's image and icon straight from the site that hosts them, as a platform would.
Web address mode fetches the page through our server, because a browser is not allowed to read other sites' pages. Pasted HTML and Tags by hand stay in your browser and are never sent to our server. In every mode the preview cards load the page's image and icon from the site that hosts them, just as a platform would. Nothing is stored.
How to use it
- Pick how to give it the page. Web address if it is live, Pasted HTML if you have the source, Tags by hand to try out a title and image before you write any HTML.
- Enter it and, for a web address, press Preview. The cards update as you type in the other two modes.
- Look at the five cards. A missing picture, a title cut off with an ellipsis or a bare link is what your readers would see.
- Read What the cards use. Each value says which tag it came from, so you can
see when a card is borrowing your page's
<title>because there is noog:title. - Work down Worth fixing, most important first. Press Copy to take the
<meta>lines for the missing tags and paste them into your page's<head>.
The tags that matter
| Tag | What it sets | Notes |
|---|---|---|
og:title | The card's headline | Aim for under about 70 characters |
og:description | The sentence or two under it | Aim for under about 200 characters |
og:image | The picture | 1200 by 630 pixels, a full https:// address |
og:url | The address the page should be shared as | Likes and shares of different link variants add up to one count |
og:type | What kind of thing it is | website for most pages, article for posts |
og:site_name | Your site's name | Several cards show it above the title |
twitter:card | The layout on X | summary_large_image for a wide picture, summary for a small square one |
og:image:alt | A description of the picture | For screen readers |
og:image:width, og:image:height | The picture's size | Lets a platform lay the card out before it downloads the image |
When there is no og:title, platforms use the page's <title>. When there is no
og:description, they use the meta description. X reads its own twitter: tags
first and then falls back to the og: ones, so a page with only Open Graph tags
usually still previews on X, as long as twitter:card is set.
Fetching a web address
The server makes one request for you and sends back only the tags. To keep that safe it is strict about what it will fetch:
- Only
httpandhttpsaddresses on the standard ports (80 and 443), with no username or password in them. - Nothing on a private network: not
localhost, not*.localor*.internal, and not a name that resolves to a private address. - Up to four redirects, each checked the same way, and a five second limit for the whole fetch.
- Only HTML, and only as far as the end of the
<head>or the first megabyte. - Ten previews a minute from one connection, so one person cannot turn the tool into a way to hammer someone's site.
It sends no cookies and no headers from your browser, and says honestly who it is
in its User-Agent. It does not run JavaScript, which matches what the platforms'
own crawlers do.
Common gotchas
- A relative image address.
og:image="/cover.png"works in a browser and fails in several crawlers. The preview resolves it against the page address so you can still see the picture, and tells you to write the full address. - Tags added by JavaScript. Crawlers read the HTML as it is served. If a framework adds the tags after the page loads, they are not there for anyone who does not run your scripts, including this tool.
- An old card. Platforms cache. Facebook's Sharing Debugger and LinkedIn's Post Inspector fetch a page again on request. For other platforms, a new query string on the link usually works.
- A picture that is too small. Under about 600 pixels wide, some platforms drop the large card for a small one.
- A site that blocks bots. If the fetch is refused, paste the page's HTML. See the FAQ below.
- Two tags that disagree. The cards use the first value when a tag appears
twice, as most crawlers do. A page with two
og:imagetags shows the first.
Related
- The Favicon Generator for the small icon
that goes with the page, and the HTTP Status Codes
reference for what a
403,404or429from your page means. - The cURL Converter to turn the
curlcommand you check a page with into code, and the JSON Formatter for the JSON-LD structured data that sits beside your Open Graph tags. - The HTML cheat sheet for what belongs in a
<head>.
Common questions
What is an Open Graph preview?
When you paste a link into X, LinkedIn, Facebook, Discord or Slack, the platform fetches the page and builds a card from a few tags in its head: a title, a description, an image and a site name. Those tags are called Open Graph tags, a format Facebook introduced and the others adopted. An Open Graph preview shows you that card before you share, so you can fix a missing image or a cut-off title first.
How do I preview my link on X, LinkedIn and Facebook?
Type or paste your page's address into the box above and press Preview. The tool fetches the page, reads its tags and draws a mock-up card for X, LinkedIn, Facebook, Discord and Slack, with the list of tags it found and the ones that are missing. If the page is not live yet, switch to Pasted HTML or Tags by hand and the same cards appear without anything being fetched.
Which tags does a link preview need?
The four the Open Graph protocol asks for are og:title, og:type, og:image and og:url. In practice add og:description and og:site_name too, and for X add twitter:card, usually summary_large_image. Everything else is a refinement: og:image:alt for screen readers, and og:image:width and og:image:height so a platform can lay the card out before it has downloaded the picture.
What size should an og:image be?
1200 by 630 pixels, a ratio of about 1.91 to 1, is the size that looks right on Facebook, LinkedIn, Discord and Slack and is cropped sensibly by X. Keep the important part away from the edges, because some platforms crop, and use a JPEG or PNG under a few megabytes. Use a full https address: relative addresses and http ones are the usual reason a picture does not show.
Why is my preview wrong or old after I changed the tags?
Platforms keep what they fetched the first time a link was shared and reuse it for days or weeks. Fix the tags, then ask the platform to look again: Facebook has the Sharing Debugger, LinkedIn has the Post Inspector, and for X, Discord and Slack the usual fix is to share the link with a harmless extra query string such as ?v=2. This tool always fetches the page fresh, so it shows what the page says now, not what a platform remembers.
Why does the tool say a site refused the request?
Some sites block automated visitors, and this tool identifies itself honestly rather than pretending to be Facebook's or X's crawler. A 403 or 429 usually means that site's firewall turned us away. Use Pasted HTML mode instead: open the page, choose View source, copy it and paste it in. The result is the same cards from the same tags.
Does it work for pages that are not public yet?
Yes, in two ways that do not need the page to be reachable. Paste the page's HTML, or just its head, into Pasted HTML mode, or type the tags into Tags by hand. Both are handled entirely in your browser. The Web address mode cannot reach pages on localhost, on a private network or behind a login, and that is deliberate: it is how the tool is kept from being used to probe networks.
Is my link or HTML uploaded or stored?
In Web address mode the address is sent to our server, which fetches the page and sends back the tags it found. The address and the tags are not stored or logged, and your IP address is used only to limit how many pages a minute the server fetches for you. In Pasted HTML and Tags by hand modes nothing is sent to our server. In every mode your browser loads the preview image and icon from wherever the tags point, so that site sees the request, as it would when the link is shared. The site records that the tool was used, which mode, whether it worked and how many core tags were missing, so we know which tools are worth building next. The address, the HTML and the tag values are never part of that.
Why does a card look different on the real platform?
The cards here are mock-ups drawn in each platform's style, not screenshots, and platforms change their layouts and truncate text in their own ways. They also read the tags in different orders: X looks for twitter: tags first and falls back to og: ones, and the others read og: tags and fall back to the page title and meta description. The tool shows which tag each value came from so you can see the fallback at work.
Can it read tags that are added by JavaScript?
No, and neither can the platforms. Link crawlers fetch the HTML and do not run your scripts, so tags that a single-page app adds after it loads are invisible to them. If the preview here is empty but the tags show up in your browser's inspector, render them on the server, or in the static HTML, instead.