Social Sharing and Metadata Preview
Paste a page's head HTML to see how its link could look when shared on Facebook, LinkedIn and X, with every Open Graph and Twitter Card tag checked against each platform's documentation. The cards are approximations drawn in your browser from what you paste, type or choose, so nothing is uploaded and no live page is fetched.
How to get the HTML
- On a computer, view the page source with Ctrl+U on Windows or Linux, Cmd+Option+U in Chrome on a Mac, or Cmd+U in Firefox on a Mac, then copy everything from <head> to </head>.
- Or open DevTools, choose Console, run
copy(document.head.outerHTML)and paste the result here. - On Android Chrome, type
view-source:before the page address, then copy the head.
Try other values
Results
- Tags found
- -
- Card title
- -
- Card description
- -
- Card image
- -
- X card type
- -
- Checks
- -
| For | Level | What the check found |
|---|
| Tag | Value | Used by |
|---|
Suggested tags for the values shown
How to use the Social Sharing and Metadata Preview
- Open the page source, copy everything from the opening head tag to the closing one, and paste it into the box.
- Type the page address if the tags use relative links.
- Choose the share image file to see it in the cards and check its limits.
- Read the checks and the tag table, try other values (the Settings fields on a wide screen, the Try other values control on a phone), then copy the suggested tags.
Worked example
The head of a gardening article whose image tag uses a relative path, with the page address typed in so the tool can resolve it. Press Load the example to fill in the HTML and the address listed below; these are the results the page shows.
<head> <meta charset="utf-8"> <title>Balcony Tomatoes in Pots | Small Plot Gardener</title> <meta name="description" content="Grow tomatoes in pots on a balcony: the pot size, the sunniest corner, the right variety and a weekly care plan."> <meta property="og:type" content="article"> <meta property="og:title" content="How to Grow Tomatoes in Pots on a Balcony"> <meta property="og:description" content="Pick a pot of at least 20 liters, a sunny corner and a compact variety, then follow a season of watering, feeding and pinching out, week by week."> <meta property="og:url" content="https://www.example.com/grow/balcony-tomatoes/"> <meta property="og:image" content="/images/balcony-tomatoes.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:site_name" content="Small Plot Gardener"> <meta name="twitter:card" content="summary_large_image"> <script src="/js/analytics.js"></script> </head>
- Page address (optional, for relative links)
- https://www.example.com/grow/balcony-tomatoes/
- Tags found
- 8 Open Graph, 1 Twitter
- Card title
- 41 characters, from og:title
- Card description
- 145 characters, from og:description
- Card image
- Relative, resolved with the page address
- X card type
- summary_large_image, from twitter:card
- Checks
- 1 warning, 4 notes
How to read the results
- Tags found
- How many Open Graph and Twitter tags the HTML holds, counting repeated and empty ones. The table under the cards lists each one with what it is used for.
- Card title and Card description
- Characters as the Word and Character Counter counts them, and which tag or field supplied the text. A source marked as a guess means no tag gave one, so a platform would pick its own. (X only) means no Open Graph tag gave a value, so it comes from a Twitter tag; Facebook and LinkedIn do not read it.
- Card image
- Whether the image address is a full web address, a relative one resolved against the page address or a base element, or one no card could use. The address itself is never loaded.
- X card type
- The twitter:card value X would use, which is the last one on the page, or summary when X's documented fallback applies. None means X describes no card for this markup.
- Link card previews
- Three drawings, not screenshots. The image frames use LinkedIn's 1.91:1 and the 2:1 or square shapes of X's archived card pages; Meta documents no shape for link images, so its frame borrows 1.91:1. Long text is shortened by the layout, since none of the three documents where it cuts a line.
- Checks
- A warning means a documented requirement is not met or a card is likely to lose a part. A note is advice or a fact worth knowing, such as a value that came from a fallback.
- Suggested tags
- Meta tags that would give every card the values shown, with relative addresses written out in full and og:type set to website when the page names none. Review them before you paste them into a page.
How this tool works and its limitations
The pasted HTML goes to the browser's DOMParser, which builds a separate document that is never shown: scripts in it do not run and nothing it names is loaded. The tool reads every meta element in page order and writes each value back as plain text.
Each card takes its value from the tag that platform reads first, then from the fallback it documents: X falls back from twitter:title, twitter:description, twitter:image and twitter:image:alt to the Open Graph tags and takes the last twitter:card, while Open Graph prefers the first of repeated tags. A settings field replaces the matching tags in every card. Relative addresses are resolved only against a base element or the page address you type. A chosen image is read in this tab through a temporary address that is released when you change or clear it.
The figures come from the Open Graph protocol, Meta's guide and best practices, LinkedIn's help page and X's card pages, all read on 21 October 2026. X's card documentation could not be read on X's developer site on the dates we checked, 21 and 22 October 2026, so every X figure here comes from the Internet Archive's copies of those pages from December 2025 to February 2026, and X may have changed its rules since. The 5 MB limit is read as 5,000,000 bytes, and a ratio within 3 percent of a documented one counts as a match; both are this tool's own choices. What it cannot do:
- It reads pasted markup only, so live addresses, tags a script adds later, redirects and robots.txt blocks are beyond it. An image is measured only if you choose its file or the tags give its size.
- None of the three platforms documents its card layout; each can change it or keep showing a saved preview.
- Where a platform documents no fallback for a missing tag, the cards show the title element or meta description as one possible guess.
- Messaging and chat apps that read Open Graph tags are not drawn.
- Pasted HTML is capped at 1 MB. A longer paste is read only up to its closing head tag, if that tag is within the first 1 MB. An image file has no size cap, though a huge one may be slow on a phone.
Features
- Facebook, LinkedIn and X style cards from one paste, using each platform's documented fallbacks.
- Checks against the Open Graph, Meta, LinkedIn and X documentation.
- Size, ratio, format and file size checked on a local image that never leaves your device.
- Every Open Graph and Twitter tag in a table, plus suggested meta tags ready to paste.
Which tag each card reads, and what happens when one is missing
The Open Graph protocol names four required properties, og:title, og:type, og:image and og:url, and when a tag repeats, the first one wins. X reads its own tags first and, according to its Cards markup reference, falls back to the Open Graph title, description and image. twitter:card is the exception: without it, X says only that a summary card may appear when og:type, og:title and og:description all exist. Meta's guide for webmasters says its crawler guesses when tags are absent, and LinkedIn's help page says og:title, og:image, og:description and og:url must exist.
One share image that suits all three platforms
LinkedIn asks for at least 1200 x 627 pixels and no more than 5 MB, and recommends 1.91:1. X's archived card pages give 2:1 for its large image card, from 300 x 157 up to 4096 x 4096 pixels, under 5 MB, as JPG, PNG, WEBP or GIF but never SVG, and its summary card crops to a square. Meta's sharing best practices suggest 1080 pixels of width or more for high resolution screens. A 1200 x 630 JPEG or PNG under 5 MB meets all of these except X's slightly wider shape, so keep the subject and any words away from the edges, where a 2:1 or square crop could cut them.
Why a corrected page can still show the old card
Each platform stores what it read the first time a link was shared. Meta caches an image by its address and updates it only when that address changes, and mentions a standard 24 hour update period. X's archived getting started guide said card content stays cached for 7 days. LinkedIn's help page names no period. After a fix, give a replaced image a new file name, then ask Meta's Sharing Debugger or LinkedIn's Post Inspector to read the page again. This preview shows the tags as they are now, not a card already sitting in someone's feed.
Frequently asked questions
Can I check a live page by typing its address?
Not yet. Reading a live page needs a server that fetches it, and this site has none, so the address field only resolves relative links. View the page source and paste its head here instead.
Why does my image not appear in the cards?
The tool never requests addresses from pasted tags, so a pasted page cannot make your browser contact its server. Choose the image file itself to see it.
Is it safe to paste HTML that contains scripts?
Yes. The browser's DOMParser builds a separate document where scripts do not run and event handlers are not called, and every value is shown as plain text.
Do I need Twitter tags if my page already has Open Graph tags?
Often only twitter:card. X falls back to og:title, og:description, og:image and og:image:alt, so write separate twitter tags only when X should get different wording or a different picture.
What do I do after fixing the tags on my site?
Publish the change and run the address through Meta's Sharing Debugger and LinkedIn's Post Inspector. X's archived troubleshooting guide says its crawler rereads card tags roughly every seven days and caches images by address, so a replaced image needs a new one.
Will a complete set of tags get my links more clicks or shares?
Nobody can promise that. This tool shows whether the tags meet each platform's documentation and how a card could be drawn; what readers do with a shared link depends on the post and on them.
Guides for this tool
Last updated .