Skip to content

See your link card before you share it

Open Graph image previewer

A listing page, a launch post and a directory entry all get shared as a link, and the card that appears is built from a handful of meta tags. Enter a page address or paste its tags and this page parses the Open Graph and card tags, checks the image headers, and draws three generic previews with a list of what to fix.

In URL mode our server fetches the page and only the headers of the image. Only public http and https addresses are requested, each redirect is checked again, and the address is not stored. Pasted tags never leave your browser.

How to use it

  1. Choose how to check. Enter the page address, or switch to paste mode and drop in the head of the page or just the meta tags.
  2. Run the check. Press Check previews. In URL mode the page is fetched once and the image is asked for its headers only.
  3. Read the previews. Compare the large card, the small card and the chat unfurl. Look for a missing picture, a cut-off title or an empty description.
  4. Work through the flags. Fix the items marked Fix first, then the ones marked Check. Notes are optional improvements.
  5. Check again after deploying. Share apps cache cards, so run the check on the live page after your change and expect scrapers to refresh on their own schedule.

Which tags are read and which rules are applied

The tags come from the Open Graph protocol (ogp.me): og:title, og:description, og:image with its width, height and alt companions, og:url and og:site_name. Card tag behaviour follows the X Cards documentation (developer.x.com), which defines the summary card and the large-image card formats: twitter:card, twitter:title, twitter:description and twitter:image, which fall back to the Open Graph values when absent. The canonical link, the favicon link and the page title are read as well.

The flags are fixed rules, not scores. Missing og:image is an error. A relative image address, an http image on an https page, a declared size under 1200 by 630 pixels, an image over 5 MB, a title over 60 characters, a description over 155 characters, a missing twitter:card, and an og:url that differs from the canonical link are warnings. The 1200 by 630 size, the 60 and 155 character lengths and the 5 MB ceiling are common working limits, not a guarantee, because each app crops and truncates in its own way.

The size check uses the width and height you declare, because only the image headers are fetched, not the picture. If the tags are not declared the tool says so instead of guessing. The previews are generic layouts without any app branding, so treat them as a sketch of the proportions. A page that answers differently to bots, needs JavaScript to write its tags, or sits behind a login will show different tags here than a real share would.

Questions

What size should an Open Graph image be?

A common choice is 1200 by 630 pixels, a ratio of about 1.91 to 1, under 5 MB, as a JPEG or PNG. Declare the size with og:image:width and og:image:height so scrapers can lay the card out without downloading the file first.

Why does my card not update after I fix the tags?

Most apps cache a link's card after the first scrape. Fixing the tags does not push a refresh, so the old card can persist until the cache expires or the app lets you re-scrape the link.

Do I need both og:image and twitter:image?

No. Card scrapers fall back to the Open Graph values when the twitter tags are missing. You do need twitter:card, because that tag chooses between the summary card and the large-image card layout.

Why is a relative image path flagged?

The protocol asks for the full address of the image. A path such as /og.png only works if the scraper resolves it against the page, and not every scraper does, so use the absolute https address.

Does this fetch my whole image?

No. It asks the image address for its headers and reads the status, content-type and content-length. If a host refuses that request type, it falls back to a normal request and drops the body without reading it.

Why would a page URL be refused here?

Only public web pages can be fetched for a preview. Addresses that point at your own machine or a private network, that carry a login or a port, or that redirect there are rejected before any request. Paste the tags instead if the page is not public.