Preview exactly how your page will look in Google search results, Facebook shares, and Twitter/X cards — before you publish. Enter your title, description, and image below to get a live pixel-width preview plus ready-to-copy meta tag code.
1. Enter your page details
2. Live Preview
3. Generated Code
Copy this into your Classic Editor Text tab, or your theme's header/meta area.
<!-- Fill in the fields above -->
Why I Built This
I kept eyeballing meta titles and descriptions in Rank Math, then wondering how they'd actually look once shared on Facebook or X. There wasn't a single place to check all three — Google, Open Graph, and Twitter cards — before hitting publish, so I made one.
This is a genuine pixel-width preview, not a character-count guess. Google truncates titles and descriptions based on rendered width, not letter count, so a title full of "W"s and "M"s will get cut off sooner than one full of "i"s and "l"s — even at the same character length. The meters above use that same logic.
A quick note if you're on WordPress with an SEO plugin: Rank Math, Yoast, and similar plugins already generate these tags automatically based on your settings. This tool is most useful for a pre-publish gut check — seeing the actual rendered preview before you commit — or for pages and platforms where you don't have a plugin generating tags for you (client sites without Rank Math, static landing pages, or anywhere you're hand-coding the '<head>').
Frequently Asked Questions
Does this tool actually change my page's meta tags?
No — this is a preview and code generator only. It shows you how your title, description, and social cards will look, and gives you the exact code to copy. You'll still need to paste that code into your page (or your SEO plugin's fields) for it to take effect.
Why does Google cut off my title even though it's under 60 characters?
Google truncates based on pixel width, not character count. Wide characters like "W" and "M" take up more space than narrow ones like "i" and "l," so two titles with the same character count can render very differently. This tool measures actual rendered width, matching how Google displays results.
Do I still need this if I'm using Rank Math or Yoast?
Those plugins already generate your meta tags automatically. This tool is most useful as a pre-publish check — seeing the actual rendered preview before you commit — or for pages where you don't have a plugin generating tags for you.
What image size should I use for the OG/social image?
1200×630px is the safe standard across Facebook, X, and LinkedIn. Smaller images may get cropped or stretched depending on the platform.
Why does my Twitter/X card look different from my Facebook card?
Twitter/X and Facebook read the same Open Graph tags but render them in different card layouts. The "Summary Large Image" card shows a wide banner image, while "Summary" shows a small square thumbnail beside the text — pick whichever fits your content better.
Is this tool free to use?
Yes, completely free, no sign-up required.