Free tool Open Graph preview and Twitter card validator
When someone shares your link, the app reads a few tags in your page’s head and builds a card from them. Fill in the form to generate those tags, or paste the head of an existing page to see what it says today, then compare the cards side by side and fix what the checklist flags.
- Seven platforms
- Image size and ratio check
- No fetching, no upload
Generate or check share tags
The form starts with TapCub’s own home page tags. Switch to “Paste HTML” to check another page: copy its source (View Source in the browser) and paste at least the head.
What the card headline says. Often shorter than the page title.
One or two sentences. Many cards show only the first line or two.
The canonical address of the page, with https://.
Absolute URL. 1200 × 630 px works across platforms.
Width × height in pixels, written as og:image:width and og:image:height. The preview also reads the real size once the image loads.
Describes the image for screen readers.
Optional, e.g. @yourbrand.
Paste the page source or just the <head>. Only title, meta and canonical tags are read; nothing is fetched.
Share-card previews
Approximate layouts. Platforms change their cards often and cache what they fetched.
tapcub.com
TapCub: Web Analytics, Product Analytics and Live Chat
Web, app and mini-program analytics, product insights and live chat on one platform. Cookieless, bot-free data — chat with visitors while they’re on the page.
X (Twitter)
DocumentedFrom tapcub.com
X currently shows large cards as the image with a short label; the layout changes often.
TapCub: Web Analytics, Product Analytics and Live Chat
tapcub.com
Slack
DocumentedTapCub
TapCub: Web Analytics, Product Analytics and Live Chat
Web, app and mini-program analytics, product insights and live chat on one platform. Cookieless, bot-free data — chat with visitors while they’re on the page.
Without JS-SDK (typical)
TapCub: Web Analytics, Product Analytics and Live Chat
https://tapcub.com/
With the official-account JS-SDK
TapCub: Web Analytics, Product Analytics and Live Chat
Web, app and mini-program analytics, product insights and live chat on one platform. Cookieless, bot-free data — chat with visitors while they’re on the page.
WeChat does not reliably read og: tags. A custom title, description and thumbnail need an official account, the JS-SDK and updateAppMessageShareData; a link pasted into a chat stays plain text.
DingTalk
ObservedTapCub: Web Analytics, Product Analytics and Live Chat
Web, app and mini-program analytics, product insights and live chat on one platform. Cookieless, bot-free data — chat with visitors while they’re on the page.
tapcub.com
Feishu / Lark
ObservedTapCub: Web Analytics, Product Analytics and Live Chat
Web, app and mini-program analytics, product insights and live chat on one platform. Cookieless, bot-free data — chat with visitors while they’re on the page.
tapcub.com
DingTalk and Feishu publish no rules for link previews; community tests show both read og:title, og:description and og:image.
Checklist
- OKImage 1200×630, ratio 1.90:1: suitable for large cards on every platform here.
- OKNo problems found in the tags.
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://tapcub.com/">
<meta property="og:title" content="TapCub: Web Analytics, Product Analytics and Live Chat">
<meta property="og:description" content="Web, app and mini-program analytics, product insights and live chat on one platform. Cookieless, bot-free data — chat with visitors while they’re on the page.">
<meta property="og:image" content="https://tapcub.com/assets/img/og/en/home.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="TapCub: Web Analytics, Product Analytics and Live Chat">
<meta property="og:site_name" content="TapCub">
<!-- X (Twitter) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="TapCub: Web Analytics, Product Analytics and Live Chat">Tags found
Rebuilt from what was found, with relative URLs made absolute and missing basics added.
Share these inputs: the values go after the # in the link, so they never reach a server.
https://tapcub.com/tools/open-graph-preview
Version v1.0Updated Update history
What the previews and checklist tell you
Each card follows the fallback order that platform uses. If something looks wrong in one card only, the cause is usually a tag that platform prefers.
The labels on each card
“Documented” means the platform publishes which tags it reads (Facebook, X, LinkedIn, Slack). “Observed” means there is no public spec and the preview follows community tests (DingTalk, Feishu). WeChat is a special case: ordinary shares need its JS-SDK.
Image size and ratio
Once the image loads in your browser, its real size is read and checked: at least 1200×630 is safe everywhere, 1.91:1 avoids cropping, and the declared og:image:width and height should match the file. File size cannot be checked here; Facebook allows up to 8 MB, LinkedIn and X 5 MB.
Fallbacks
Without og:title, most apps use the page title; without twitter: tags, X reads the matching og: tags. Without og:image there is no good fallback, which is why it is the one error that matters most.
Tags found and suggested tags
In paste mode the table lists every og: and twitter: tag with its line number, so you can find it in your template. The suggested set below it is the same data rebuilt cleanly, with relative URLs made absolute.
Platforms cache cards. After fixing tags, ask Facebook (Sharing Debugger) or LinkedIn (Post Inspector) to fetch the page again; other apps refresh on their own schedule.
Three steps
Nothing is fetched from your site; you paste or type everything.
-
1
Fill in the form or paste HTML
For a new page, fill in the form. For a live page, open View Source in the browser, copy the head and paste it in “Paste HTML”. Server-rendered tags are what platforms see; tags added later by JavaScript are usually missed.
-
2
Compare the cards
Look at the image crop, the headline length and the domain in each card. Switch twitter:card between large and small to see the difference on X and Slack.
-
3
Copy the tags
Copy or download the generated tags and put them in your page head, then clear the platform caches with their debug tools.
Tags and image rules by platform
Compiled from each platform’s documentation where it exists. Where there is none, the table says so.
- The Open Graph protocol lists og:title, og:type, og:image and og:url as the basic properties of every page
- All URLs in these tags must be absolute; no platform resolves relative paths for you
- Tags must be in the HTML the server returns: share crawlers do not run JavaScript
| Platform | Reads | Image guidance | Source |
|---|---|---|---|
| og:title, og:description, og:image, og:url | ≥ 1200×630; ≥ 600×315 for a large card; min 200×200; ≤ 8 MB | Meta for Developers | |
| X | twitter:card, then twitter:* or the matching og:* | Large card 2:1, ≥ 300×157, ≤ 5 MB | X developer docs |
| og:title, og:image, og:description, og:url | ≥ 1200×627, 1.91:1, ≤ 5 MB | LinkedIn Help | |
| Slack | oEmbed, then Twitter Card and og: tags | No published size | Slack developer blog |
| Values set with the JS-SDK; og: tags unreliable | Square thumbnail | WeChat JS-SDK docs | |
| DingTalk, Feishu | og:title, og:description, og:image (observed) | Small square thumbnail | No public spec |
Checking the pasted sample
The “Paste HTML” sample is a sale page with four typical problems. This is what the checker finds and how to fix each one.
| Line | Finding | Level | Fix |
|---|---|---|---|
| 7 | og:description written with name= | Note | Change to property="og:description" |
| 8 | og:image is the relative path /img/sale-banner.jpg | Error | Use https://www.example.com/img/sale-banner.jpg |
| — | No og:type | Note | Add website |
| — | No twitter:card | Fix | Add summary_large_image so X shows the large card |
The relative image is the one that breaks every card: Facebook, LinkedIn and chat apps all fetch og:image from their own servers and cannot guess the domain. The suggested tags under the table already contain the absolute URL.
Why the share card looks wrong
Most broken cards come down to four causes, and none of them are visible on the page itself.
Relative image URL
/og.jpg works in your browser but not for a crawler on another server. Always write the full https:// address.
Tags added by JavaScript
A single-page app that sets og: tags after load shows a blank card: share crawlers read the raw HTML. Render them on the server or prerender.
Wrong image shape
A square logo in a 1.91:1 card gets cropped top and bottom. Design a 1200×630 image with the important part in the middle.
Testing against a cached card
Platforms keep the card they fetched first. After a fix, re-scrape with the Sharing Debugger or Post Inspector, or share a URL with a new query string to test.
See what the shares bring back
A good card earns clicks; analytics tells you how many arrived and whether they converted.
Social as its own channel
Visits from Facebook, X, LinkedIn, Weibo, Zhihu and other social sites are grouped as Social, with the source name kept.
Learn moreUTM for chat-app shares
Links opened inside chat apps often arrive with no referrer and look like Direct. Add utm_medium=social and they are counted as Social.
Learn moreFirst and last touch
See whether a shared link introduced the customer or closed the sale, side by side on the same table.
Learn moreOpen Graph questions
Still have a question?
Chat with the team behind TapCub — we usually reply within a few hours on business days.
Is the Twitter Card Validator still available?
Not as a preview tool. In August 2022 Twitter removed the card preview from its Card Validator and pointed people to the post composer: paste the link into a new post and the card shows before you publish. This page previews the X card from your tags without posting, and flags a missing or invalid twitter:card value.
What are Open Graph tags?
Meta tags in a page’s head, defined by the Open Graph protocol, that tell platforms what to show when the page is shared: og:title, og:description, og:image, og:url and og:type. Facebook introduced them; LinkedIn, Slack, many chat apps and X (as a fallback) read them too.
What size should og:image be?
1200×630 pixels is the safe choice: Facebook recommends at least 1200×630, LinkedIn asks for at least 1200×627, and the 1.91:1 shape fits large cards on X closely. Keep files well under 5 MB and the important part in the centre.
Do I need both Twitter card and Open Graph tags?
You need twitter:card to choose the layout on X. For title, description and image, X falls back to the matching og: tags, so you do not have to duplicate them unless you want different text on X.
Why is my share card not updating?
Platforms cache the first version they fetched. Use Facebook’s Sharing Debugger or LinkedIn’s Post Inspector to fetch it again. For apps without a tool, adding a query string such as ?v=2 to the shared URL forces a fresh fetch.
Why does WeChat ignore my og:image?
WeChat does not reliably use Open Graph for normal web links. Shares from its built-in browser use the page title and a default icon unless the page sets title, description and image through the official-account JS-SDK, which needs a verified account and a whitelisted domain.
Can the tool fetch my page by URL?
No, on purpose: nothing leaves your browser except the preview image request. Paste the page source instead. The image loads straight from the URL in the tag, without a referrer, so its real size can be checked.
Why does my single-page app show no card?
Share crawlers read the HTML the server sends and do not run JavaScript. If og: tags are added by client-side code, crawlers never see them. Render the tags on the server, prerender the page, or use your framework’s metadata API.
Update history
New features, fixes and data refreshes for this tool, newest first.
-
· v1.0
LaunchedFirst release.
Missing something or found an error? Tell us — requests that come up often go into the next update. All tool updates
Track the traffic your shares send
Add TapCub to the page and see social visits, campaigns and conversions in one place.