Meta tags and Open Graph, previewed as you type
Write the title and description once and see exactly how Google and a shared link will show them. Lengths are measured in pixels, the way Google cuts them. Copy the finished head block when it reads right.
Google result
SSite namehttps://example.com
Your page title
Your meta description appears here.
Shared link
1200 × 630 image
example.com
Your page title
Your meta description appears here.
Worth fixing
Your head block
After you paste them
Check the live page with the social preview check, which fetches the image the way the apps do, and the SERP preview for how the title reads beside competitors. For many pages at once, the title fixer rewrites titles in bulk, and the schema generator adds the structured data a rich result needs.
Questions
How long should a title and meta description be?
Google cuts by width, not by character count: about 580 pixels for a title and about 920 pixels for a description on desktop. That is roughly 55 to 60 characters and 150 to 160 characters of ordinary text, fewer if it is full of wide letters like W and M. The meters here measure the width.
Do I need both Open Graph and Twitter tags?
Open Graph covers Facebook, LinkedIn, WhatsApp, Slack, iMessage and most others. X (Twitter) reads Open Graph too, but needs twitter:card to show the large image, so the block includes that one line.
What size should the share image be?
1200 by 630 pixels, under 5 MB, as JPEG or PNG, at an absolute https address. Keep the important part in the centre: some apps crop it square.
Should every page have a canonical?
Yes, pointing at itself on the address you want indexed. It stops tracking parameters and duplicate paths from being treated as separate pages.
Where do these tags go?
In the head section of the page, before the body. On Shopify, WordPress or Wix, most of them are set in the page or product SEO fields rather than pasted as code; the preview still shows what those fields should say.