See how your page looks before you share it

Why pixels and not characters?

Google and social apps cut text when it runs out of room on screen. A "W" is far wider than an "i", so two titles with the same character count can be cut in different places.

What size should my OG image be?

1200 × 630 pixels (1.91:1), under 5 MB, as a JPG, PNG or WebP. Narrower than 600 pixels and LinkedIn and X may show a small thumbnail instead. X crops its large card to 16:9, so keep anything important away from the top and bottom edges.

Why is LinkedIn still showing my old preview?

LinkedIn keeps previews for days. After you change your tags, refresh it in LinkedIn's Post Inspector.

Why doesn't X show a big image?

X needs twitter:card set to summary_large_image. Without it you get the small summary card with a square thumbnail.

Where do I set these in Webflow?

Page settings, then SEO settings for the title and description, and Open Graph settings for the social title, description and image. On a CMS template page, bind each one to a collection field.

Will Google show exactly this?

Usually. Google sometimes rewrites titles and descriptions, and builds some snippets from the page text. This shows what you wrote and where it will be cut.

Rheed MacPherson, founder of Signal Studio

Can’t find your answer?

Book a Discovery call and ask us directly.

Or email hello@signalstudio.co.nz

SHARE-PREVIEW.MD SHARE-PREVIEW

# Social Share Previewer

Preview your title, description and OG image in Google, LinkedIn, X and WhatsApp, measured in real pixels. Free, and nothing is uploaded.

## What it does

Previews a page title, meta description and OG image the way Google (desktop and mobile), LinkedIn, X, Facebook and Slack show them, and marks exactly where each platform cuts the text, including cuts in the middle of a word, with a one-click trim to the last whole word. It also shows close approximations for WhatsApp, iMessage, Instagram direct messages, Discord, Telegram, Threads, Bluesky, Mastodon and Pinterest.

## How it measures

Text is measured in pixels with each platform's own font and width, not counted in characters: Google Sans for Google's titles, Arial for its snippets, Lato for Slack, Helvetica for Facebook. Google's title rules were measured on live results.

## Private

What you type and upload stays in your browser: an uploaded image is never sent anywhere, and a share link carries the page details in the link itself. Fetch from a URL sends only the address you give it.

## Output

A share score out of 100 with a checklist, the meta tags as HTML, the same values as Webflow's Page settings fields, and the previews as a PNG.

## Why pixels and not characters?

Google and social apps cut text when it runs out of room on screen. A "W" is far wider than an "i", so two titles with the same character count can be cut in different places.

## What size should my OG image be?

1200 × 630 pixels (1.91:1), under 5 MB, as a JPG, PNG or WebP. Narrower than 600 pixels and LinkedIn and X may show a small thumbnail instead. X crops its large card to 16:9, so keep anything important away from the top and bottom edges.

## Why is LinkedIn still showing my old preview?

LinkedIn keeps previews for days. After you change your tags, refresh it in LinkedIn's Post Inspector.

## Why doesn't X show a big image?

X needs twitter:card set to summary_large_image. Without it you get the small summary card with a square thumbnail.

## Where do I set these in Webflow?

Page settings, then SEO settings for the title and description, and Open Graph settings for the social title, description and image. On a CMS template page, bind each one to a collection field.

## Will Google show exactly this?

Usually. Google sometimes rewrites titles and descriptions, and builds some snippets from the page text. This shows what you wrote and where it will be cut.