In one sentence
The inspector parses pasted HTML, resolves each card field the way X documents it (twitter: tag first, then the Open Graph tag), checks limits and image rules, and draws a preview of the result.
How do I check a page with the inspector?
Copy the page's <head> from View Source, paste it in, and press Inspect tags.
- Open the page in your browser and view its source. In Chrome, Edge and Firefox that is Ctrl+U on Windows and Linux or Cmd+Option+U on a Mac.
- Select from
<head>to</head>and copy it. Pasting the whole page also works; the inspector ignores scripts and styles. - Optionally type the page's URL. The inspector uses it to show what a relative image path would resolve to, and as the domain in the preview.
- Read the "What X would use" table first. The From column tells you which tag supplied each value.
The two sample buttons load a correct page and a deliberately broken one, so you can see what each kind of finding looks like.
Which tags does it look at?
Every <meta> tag, plus <title>, the canonical link and any meta refresh. For the card itself it resolves:
| Field | Order the inspector tries |
|---|---|
| Card type | twitter:card, then a summary card if og:type, og:title and og:description all exist |
| Title | twitter:title, og:title |
| Description | twitter:description, og:description |
| Image | twitter:image, twitter:image:src (old spelling), og:image, og:image:url, og:image:secure_url |
| Image alt | twitter:image:alt, og:image:alt |
The first two columns of that table come straight from X's documentation. The extra image spellings are ones you still find on older sites; the inspector accepts them and tells you to modernize.
What problems does it catch?
The ones that cause most broken cards in practice: relative or http image URLs, SVG images, a misspelled card type (large_image instead of summary_large_image), titles over 70 characters, missing alt text, og: tags written with name= instead of property=, duplicated tags with different values, a canonical link that disagrees with og:url, and meta refresh redirects. If you declare og:image:width and og:image:height, it also checks the ratio against the card type.
What it cannot see is anything outside the HTML: whether robots.txt blocks Twitterbot, whether the image URL actually returns an image, whether your CDN blocks unfamiliar user agents, or whether X has a cached older version. The card not showing guide walks through those.
Reading the preview
The preview is drawn by this page, with a generic avatar and no X branding. It follows the layout X has used for link cards since early 2024: the image on top with the headline laid over its lower-left corner, and "From domain" underneath. Summary cards show the square thumbnail beside the title and description. Use the toggles to check how a long title truncates on a phone, and whether your image still reads well against a black dark-mode background.
Questions
Why can't I just enter a URL?
A web page cannot read another site's HTML from the browser without that site's permission (CORS), and we do not run a server that fetches pages for you. Open the page, use View Source (Ctrl+U or Cmd+Option+U), copy the head section and paste it here. Nothing leaves your browser.
Is this a replacement for the old Twitter Card Validator?
For checking the markup, yes. For seeing X's real rendering, no tool outside X can do that: paste the URL into the X composer. Since August 2022 the official Card Validator no longer shows previews.
My page builds its tags with JavaScript. Will this work?
Paste the server-sent HTML from View Source, not the DOM from developer tools. Twitterbot does not run your JavaScript, so tags added after load are invisible to it. If the tags only exist in the DOM, that is the bug.
What does 'inferred from og:type' mean?
X's markup reference says that if a page has og:type, og:title and og:description but no twitter:card, it may render a summary card. The inspector shows that case so you know the card is a fallback, not a choice.