Docs
Social previews
How Metaspry renders each platform's link preview - and the fallback chains it uses when tags are missing.
The Previews tab renders seven platform mockups from your page’s actual Open Graph + Twitter tags.
Platforms
- Facebook -
og:image1.91:1,og:title,og:description, hostname. - Twitter - splits into
summary(1:1, side-by-side) vssummary_large_image(2:1 hero) based ontwitter:cardvalue. - LinkedIn - identical layout to Facebook with platform label swapped.
- Discord - embed style (colored left bar, title, description, image).
- Slack - unfurl style (vertical bar, blue title, image below).
- Google SERP - search snippet with favicon, breadcrumb URL, blue title, description.
- iMessage / WhatsApp - chat bubble preview.
Fallback chains
| Platform | Title | Description | Image |
|---|---|---|---|
og:title -> <title> | og:description -> description | og:image | |
twitter:title -> og:title -> <title> | twitter:description -> og:description -> description | twitter:image -> og:image | |
og:title -> <title> | og:description -> description | og:image | |
| Discord | og:title -> <title> | og:description -> description | og:image |
| Slack | og:title -> <title> | og:description -> description | og:image |
| Google SERP | <title> -> og:title | description -> og:description | favicon (from <link rel="icon">) |
| iMessage | og:title -> <title> | og:description -> description | og:image |
What happens when a tag is missing
Each preview card stays visible even when source tags are absent. Images degrade to a frosted gradient placeholder labeled “no og:image”. Title falls back to <title> or (no title). Description falls back to an empty string (renders as zero text).
Above the preview row, an amber callout flags whichever required tag is missing, with a copy-snippet button to fix it.