Skip to content
Metaspry

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:image 1.91:1, og:title, og:description, hostname.
  • Twitter - splits into summary (1:1, side-by-side) vs summary_large_image (2:1 hero) based on twitter:card value.
  • 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

PlatformTitleDescriptionImage
Facebookog:title -> <title>og:description -> descriptionog:image
Twittertwitter:title -> og:title -> <title>twitter:description -> og:description -> descriptiontwitter:image -> og:image
LinkedInog:title -> <title>og:description -> descriptionog:image
Discordog:title -> <title>og:description -> descriptionog:image
Slackog:title -> <title>og:description -> descriptionog:image
Google SERP<title> -> og:titledescription -> og:descriptionfavicon (from <link rel="icon">)
iMessageog:title -> <title>og:description -> descriptionog: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.