Open Graph Preview

Server assisted New Website & HTTP Diagnostics

Fetches a page through the Mutqan server, or reads HTML you paste, and lists every og:* and twitter:* tag. It shows, as text, what a share card would draw from them — title, description, image URL, site name and link — and flags what platforms trip over: missing properties, relative or http image URLs, undersized or undeclared image dimensions, titles and descriptions that will be cut, and twitter:* tags without a card type. No remote image is loaded.

Privacy: The Mutqan server sends the small, fixed test requests described on this page to the host you name, and nothing is stored. Use it only against systems you are authorised to test.

What are Open Graph tags?

Open Graph tags are meta elements in a page's head, such as og:title, og:description and og:image, that tell social networks and chat apps what to show when the page's link is shared. The protocol (ogp.me) requires og:title, og:type, og:image and og:url; X adds its own twitter:card tags and falls back to Open Graph for the rest. Share scrapers read the HTML the server sends, without running scripts, and cache what they find.

How to use Open Graph Preview

  1. Enter the page URL, or paste the page HTML (its head is enough) — with HTML pasted, nothing is fetched and the URL only resolves relative links.
  2. Optionally choose to fetch as Googlebot or a mobile browser, for sites that serve different HTML to them.
  3. Press Preview tags.
  4. Read the Share preview, then fix what Missing properties and Warnings list, and run the check again.

Open Graph Preview features

  • Reads a page through the Mutqan server (as the Mutqan checker, Googlebot or a mobile browser) or HTML you paste
  • Lists every og:*, article:*, product:* and twitter:* tag in a table you can download as CSV
  • Shows, as text, the title, description, image URL, image alt text, site name, link and card type a share card would draw from
  • Lists the recommended properties the page lacks: og:title, og:type, og:image, og:url, og:description and twitter:card
  • Checks the image: relative, http:// or data: URLs, missing or undersized width and height, SVG and unusual types, several og:image tags
  • Warns about titles and descriptions platforms will cut, og:url pointing elsewhere, unknown og:type values, malformed og:locale and twitter:site without @
  • Never loads the image or renders the page: everything is shown as text and URLs

Inputs and outputs

Inputs

  • Page URL — fetched through the Mutqan server, up to five redirects followed; also the base for relative URLs in pasted HTML.
  • Or the page HTML pasted — read in your browser with nothing fetched.
  • Fetch as — the Mutqan checker, a Googlebot User-Agent or a mobile browser User-Agent.

Outputs

  • Share preview (text only) — title, description, image URL with its declared size, image alt text, site name, link URL and card type, with character counts.
  • Summary — counts of Open Graph tags, Twitter/X tags, images, missing properties and warnings.
  • Missing properties and Warnings — what to add and what platforms will mis-render.
  • Open Graph tags, Twitter/X card tags and Images — every tag as written, and each declared image with its dimensions, type and alt text.

Open Graph Preview example

A product page with a relative image and no site name

Input:

Pasted head with og:type product, og:title, og:description, og:url https://shop.example.com/sale/running-shoes, og:image /img/sale-running-shoes.jpg (1200×630), twitter:card summary_large_image, twitter:site exampleshop

Output:

Title: Spring sale: 30% off running shoes (34 characters)
Image URL: /img/sale-running-shoes.jpg (1200×630 declared) · Site name: shop.example.com (from the host name) · Card type: summary_large_image
Open Graph tags 8 · Twitter/X tags 2 · Images 1 · Missing 0 · Warnings 3
og:image "/img/sale-running-shoes.jpg" is a relative URL; the Open Graph protocol requires an absolute URL and some scrapers do not resolve it.
No og:site_name; cards show the host name instead.
twitter:site "exampleshop" should be the @username.

How to read the Open Graph Preview results

Missing 0 and no image warnings means the tags declare everything a large card needs; the image itself is not checked, so open its URL to confirm it loads. Each missing property is one platforms will guess, usually worse.

A title over 60–70 characters and a description over about 200 are cut on most cards; under 50 characters a description looks empty. The character counts next to the preview show where you stand.

"from the host name" next to Site name means og:site_name is absent and platforms show the bare host instead of the brand.

An image URL that is relative, http:// or data: will fail on some platforms even though browsers display it; the URL must be absolute https.

When to use Open Graph Preview

  • Check a landing page before a campaign so the link looks right when it is shared in chats and social posts.
  • Find out why a shared link shows no image or the wrong title, then re-scrape it in the platform's debugger once fixed.
  • Review the tags a CMS or e-commerce theme generates for articles and product pages.
  • Compare the tags served to a mobile browser and to a crawler on sites that vary HTML by User-Agent.

Troubleshooting

  • No tags found although the page shows them in the browser's inspector: they are added by JavaScript after load. Share scrapers do not run scripts either; render the tags on the server.
  • "The URL returned image/jpeg, not an HTML page": you entered the image URL. Enter the page that should be shared.
  • The page answers 403 or a challenge page: the site blocks automated clients. Paste the HTML from your browser's "view source" instead.
  • The image is right here but wrong on the platform: the platform cached an older scrape. Use its debugger to fetch the page again.

Frequently asked questions about Open Graph Preview

Which tags does a complete share card need?

The Open Graph protocol requires og:title, og:type, og:image and og:url; og:description and og:site_name are strongly recommended, and X reads twitter:card to choose between a small summary and a large image card. The preview lists every recommended property the page lacks.

Why does my shared link still show the old image?

Platforms cache what they scraped, often for days. After fixing the tags, ask the platform to scrape the page again with its own debugging tool (for example Facebook's Sharing Debugger or LinkedIn's Post Inspector). This preview always reads the page as it is now.

Why is the image not shown here?

On purpose: the preview lists the image URL as text and never loads it, so checking a page does not make your browser contact its image host. Open the URL yourself if you want to see the picture; the declared width and height are shown next to it.

What image size works best?

1200×630 pixels (about 1.91:1) gives the large card on Facebook, LinkedIn and X. Below 600 pixels wide most platforms fall back to a small thumbnail, and below 200×200 Facebook may show no image. Use an absolute https URL to a JPEG, PNG, GIF or WebP file; SVG is not rendered.

Does it see tags that JavaScript adds?

No, and neither do most share scrapers: they read the HTML the server sends without running scripts. If the tags only appear after the page runs JavaScript, render them on the server.

Technical notes

Tags are read from meta elements by property or name, the first value of each property winning, as the Open Graph protocol (ogp.me) specifies for scrapers. og:image:width, height, type, alt and secure_url attach to the og:image before them, so a page can declare several images with their own dimensions.

The preview falls back as most share scrapers do: og:title, then twitter:title, then the title element; og:description, then twitter:description, then the meta description; og:image, then twitter:image. Relative URLs are resolved against the page URL and any base element.

The HTML is read by a tokenizer that never builds a DOM or runs scripts, capped at 2 MB and 5,000 tags; a fetched page is read up to 512 KiB, which always includes the head of a normal page.

Limitations and methodology

The preview is a text reconstruction, not a pixel copy of any platform's card: each platform crops, truncates and lays out cards its own way and changes that without notice.

The image is not downloaded, so its real size, format and availability are not verified — only what the tags declare.

The page is fetched once from the Mutqan server with one of three fixed User-Agents. Sites that serve share scrapers (facebookexternalhit, Twitterbot, LinkedInBot) different HTML may show those scrapers other tags.

Security and privacy

The tags are read in your browser, from HTML you paste or from the page the Mutqan server fetched with one of three fixed User-Agents. Only the page URL reaches the server, and it keeps neither the URL nor the HTML.

The page is never rendered and its images are never loaded, so checking a page does not make your browser contact the page's own servers or trackers.

References

  • The Open Graph protocologp.meThe og: meta properties a page uses to describe itself when shared: the four required ones (og:title, og:type, og:image, og:url), the optional ones, structured image properties, object types and how repeated properties are read.
  • HTML Living StandardWHATWGThe HTML language, including named character references (entities) and the parsing rules browsers follow.