Sample X Card page
This page is its own example. The box below reads this page's head, shows which value X would use for each card field, and draws the card.
This page's card, read from its own head
| Field | Value | From |
|---|
Drawn mockup, not a screenshot of X. Layout follows X's current link cards (image with the headline on it, domain below); exact sizes and cropping vary by app version.
The social tags in this page's head
Loading...What this sample shows
Every page on this site carries the same pattern of social tags, and this one is no different. The panel above is not hard-coded: it parses this page's own <head> in your browser with the same code as the Card Preview & Meta Inspector, so what you see is exactly what the page sends.
The set includes twitter:card with summary_large_image, the Open Graph title, description, URL and image with its width, height and alt text, and twitter: copies of the text and image so the X values are explicit. The image is a 1200x630 PNG, which X shows cropped to 2:1. The one tag left out on purpose is twitter:site: this site has no X account, and naming someone else's would be wrong. Add yours on your own pages.
Use it as a template
- Copy the tags from the code block above.
- Replace the title, description, URL and image with your page's values, or let the card generator do it.
- Keep every URL absolute.
- After you deploy, paste your URL into the X composer to see the real card.
If you want to see what a broken page looks like, the inspector has a "broken page" sample with seven common mistakes in it.