# Social preview checker Every share of a page starts with a fetch: X, LinkedIn, Slack, Discord and the messaging apps read the page's Open Graph tags and draw a card. When the tags are missing or the image is wrong, the card is a bare link, and bare links are scrolled past. This tool reads the tags as the networks do, fetches the image, measures it, and draws the three cards you will see. Updated 2026-09-14 · Source: https://porteur.ai/tools/social-preview-checker ## What it checks The tool fetches the page and reads the Open Graph tags (og:title, og:description, og:image, og:url, og:type, og:site_name, and the image's declared width, height and alt) and the Twitter card tags (twitter:card, twitter:title, twitter:description, twitter:image, twitter:site). Then it fetches the image itself, reads its status and content type, and measures its width and height from the first bytes of the file, for PNG, JPEG, GIF and WebP. With that it draws three cards: the large-image card X shows, the card LinkedIn shows, and the unfurl Slack shows in a channel. They are drawn from the tags exactly as a network would draw them, with the same fallbacks: a missing og:title falls back to the title tag, a missing twitter:image falls back to og:image. - og:title, og:description and og:image present. - The image answers 200 over https, and its type is an image. - The image is at least 1200 by 630 pixels, in the 1.91:1 shape the large cards crop to, and under 5 MB. - twitter:card is summary_large_image when there is an image worth showing large. - og:url is set, so shares through different addresses count as one page. - The title is under about 70 characters, past which cards cut it. ## Why a share card is worth a minute A launch, a guide, a changelog: the pages you want shared are the pages people paste into X, LinkedIn, Slack and email. The card is what they see before they decide to click. A card with an image is looked at; a bare link with a domain is not. The difference is four tags in the head and one image, and both are checked in a second. The image is where most pages go wrong. A logo of 400 by 400 pixels shows as a thumbnail or not at all. A 3000 by 1000 banner has its edges cut. An image on http is dropped by networks that fetch over https. An image behind a redirect or a login answers something other than 200 and the card shows an empty grey box. None of this is visible on the page itself, which is why it lasts. > Networks cache cards. After a fix, X and LinkedIn may show the old card for hours or days on addresses they have already fetched; a new address, or their card validators, refresh it. ## How to read the result The verdict says whether the share looks like a card. Under it, the three cards drawn from your tags, so you see the crop and the cut before anyone else does. Then the list of things to fix, in order, and the tags read one by one with the image's status, size and format. A worked example. yourproduct.com/launch has og:title and og:description, an og:image at /logo.png of 512 by 512, and no twitter:card. The X card shows a small square with the logo cropped; LinkedIn shows the logo squeezed into a wide frame; Slack shows the text and a small thumbnail. The fixes: one image of 1200 by 630 with the product name and one line of what it does, saved as PNG or JPEG under 1 MB, declared in og:image with its width and height, and twitter:card set to summary_large_image. Five minutes, and every share of the page changes. ## What to do with it 1. **Make one share image per kind of page** One for the home page and product pages, one template for guides with the title drawn on it. 1200 by 630 pixels, the important part in the middle third, text large enough to read at a third of the size. 2. **Set the six tags in the template** og:title, og:description, og:image (an absolute https address, with og:image:width and og:image:height), og:url (the canonical address), og:type (website or article), og:site_name. Add twitter:card summary_large_image. Most frameworks set these from the page's metadata. 3. **Check the image answers** Fetch the og:image address in a private window: 200, an image content type, no redirect, no cookie wall. A CDN that blocks unknown user agents blocks the networks too. 4. **Check again after deploying, and once more after a redesign** Share images are the first thing a redesign forgets. Run the check on the three most shared pages after every change to the head. ## Limits - The cards are drawn from the tags with each network's documented fallbacks; the networks change their layouts, and a card can differ in detail from what a phone shows on the day. - The image is measured from its first bytes (300 KB at most). SVG, AVIF and unusual formats are reported by type but not measured; networks mostly do not accept SVG as a share image anyway. - Thirty checks an hour per visitor, public addresses only. Nothing is stored. ## Questions ### What size should an og:image be? 1200 by 630 pixels, the 1.91:1 shape the large cards crop to. Under 5 MB, and comfortably under 1 MB for a fast fetch. PNG or JPEG. ### Why does X show my share as a small card? Because twitter:card is missing or set to summary. Set it to summary_large_image and X shows the og:image at full width. It reads Open Graph for the rest. ### I fixed the tags and the card has not changed. Why? The network cached the old card for that address. Share a slightly different address (a query parameter works), or use the network's card validator to refresh it. This tool reads the live page, so it shows the fix before the networks do. ### Do I need twitter:title and twitter:description too? No. X falls back to og:title and og:description. Set the Twitter tags only when you want a different text on X than elsewhere. ### Does the share image affect search ranking? Not directly. It affects how often a page is clicked when someone shares it, which is where links and mentions come from; Google reads og:image as one of the candidates for an image in Discover. ## Read next - [On-page SEO checker](https://porteur.ai/tools/on-page-seo-checker): Paste a URL and get the page read as a crawler reads it: title, description, canonical, indexability, headings, alt text, links, share tags, what to fix first. - [Title and meta description checker](https://porteur.ai/tools/title-and-meta-description-checker): Paste a page or type a title and a description: pixel widths, character counts, desktop and phone previews, with the h1 and canonical beside them. - [How to write a launch post people read to the end](https://porteur.ai/guides/how-to-write-a-launch-post): Use one structure that works on Hacker News, Product Hunt, Indie Hackers and your newsletter. With a worked example and the lines to cut. - [How to launch on Hacker News with a Show HN that survives the comments](https://porteur.ai/guides/launch-on-hacker-news): Plan a Show HN that earns clicks, survives feedback and leaves a durable thread. Title, first comment, site readiness, timing, answers and follow‑up. - [Title tag length: what fits, what Google rewrites, and how to write one](https://porteur.ai/guides/title-tag-length): About 60 characters is a safe line. Learn pixels versus characters, why Google rewrites titles, and how to write titles that earn clicks. - [Image optimisation for page speed: the hero image and everything below it](https://porteur.ai/guides/image-optimisation-for-page-speed): Fix the hero image first for LCP, then lazy-load the rest. Choose AVIF or WebP, set srcset and sizes, and add width and height to stop shift. - [Structured data](https://porteur.ai/glossary/structured-data): Structured data is schema markup that names your page type. See why it changes results, how to add JSON-LD, and how to validate it. - [Open Graph](https://porteur.ai/glossary/open-graph): Open Graph tags tell other platforms how to draw a link to your page: title, description and image. The tags that matter, image sizes and how to test. The card is the last metre; the free check reads the whole road: the searches your pages are shown on, who takes them instead, and what to change on each page so the click comes to you. Free check: https://porteur.ai/