FreePixel-accurate · desktop + mobile · Google and Bing
Meta tag preview tool —
see the exact snippet before you publish
Enter a title and meta description and watch the Google and Bing snippet update in real time —pixel-accurate for both desktop and mobile. Catch truncation problems before they cost you clicks.
- Google + Bing
- Both
- Desktop + Mobile
- Both
- Price
- Free
50%
Google Search · desktop
seokit24.com
https://seokit24.com › tools › serp-preview
Preview how your page will look in Google. Pixel-accurate title and meta description rendering, FAQ support, and instant desktop vs mobile comparis…
Your snippet will show near the top
for informational intent
Preview trimmed at ~60 chars / 580px
Description long — 161/160 · 1288px. Keep 120–155 for desktop, up to 200 mobile.
Why pixel budgets matter
Google does not count characters — it counts pixels
Google truncates by pixel width, not character count. A title with ten capital Ws takes up far more space than ten lowercase letters. This tool uses the same rendering engine Google applies to your snippets.
Desktop title budget
~580 pixels — roughly 50–60 characters at average character width. Wide characters (W, M, D) reduce the count; narrow characters (i, l, 1) increase it.
Title length indicator — 0 to ~60 characters
Mobile title budget
~920 pixels — roughly 78 characters at average width. The mobile viewport is narrower but Google allocates more vertical space for the title line.
Title length indicator — 0 to ~78 characters
Desktop description budget
~160 characters. Descriptions are counted more loosely by Google — the limit is tightest on the desktop results page.
Description length — 0 to ~160 characters
Mobile description budget
~200 characters. Google gives mobile descriptions more room, which is why a description cut off on desktop often reads fine on mobile.
Description length — 0 to ~200 characters
What the tool checks
Six things that determine your snippet quality
Beyond truncation, the preview surfaces the structural elements that decide whether your snippet earns the click or disappears into the noise.
Desktop and mobile preview
See your snippet at both Google desktop and mobile widths simultaneously. Write for the harder truncation case first.
Pixel-accurate truncation
Titles are measured in actual pixels, not characters — so wide characters like W truncate before narrow ones like i, exactly as Google renders them.
Google and Bing preview
Switch between Google and Bing SERP styles to catch differences in how each engine truncates titles and descriptions.
FAQ rich result preview
Toggle the FAQ rich result toggle to see how your page would appear with FAQPage structured data in the SERP.
Date display toggle
Add or remove the article date from the preview to match how Google renders content pages in the SERP.
No signup, instant results
Open the page and start typing — results update as you type. No account, no waiting, no server round-trip.
Put it to work
From snippet preview to published page
Meta Tag Analyzer
Paste your HTML or a URL and get a 10-check audit of the tags that shape your snippet — Open Graph, Twitter cards, canonical, robots, viewport, and H1.
CTR & Meta Description in 2026
How to write meta descriptions that earn the click — what the research shows about length, positioning, and calls to action.
Free SEO Audit Tool
Run a full 45-point audit on any URL — the meta tag audit is one of the 45 checks, alongside indexing, content, mobile, and more.
On-page SEO guide
The full workflow for writing titles and descriptions that rank — intent matching, keyword placement, length strategy, and CTR optimisation.
FAQ
Frequently asked questions
How does a meta tag preview tool work?
A meta tag preview tool renders your page title, URL, and meta description exactly as Google or Bing would show them — using the same pixel budgets those engines apply on desktop and mobile. You enter a title and description, pick a device width, and the tool shows the truncated result without you having to publish and check the live SERP.
How many characters does Google show in search results?
Google truncates titles around 580 pixels on desktop (roughly 50–60 characters depending on letter width) and around 920 pixels on mobile (~78 characters). Meta descriptions truncate at approximately 160 characters on desktop and 200 characters on mobile. These budgets vary by character width — a title packed with uppercase Ws will truncate earlier than one with narrow i and l characters.
Why does the preview show different results for desktop and mobile?
Google shows wider snippets on mobile because the screen is narrower but the character limit is actually higher — around 78 characters for titles and 200 for descriptions versus ~60 and ~160 on desktop. A title that looks fine on desktop can get cut off on mobile and vice versa. This tool shows both simultaneously so you can write for the harder truncation case.
Does using a meta tag preview tool affect my Google ranking?
No. The preview tool is read-only — it shows you how Google will render your page. To actually change what Google shows, you need to update the tag and meta description in your page HTML and get Google to recrawl the page. Submitting the updated URL through Google Search Console will speed up the process.</div></div></div></div></details><details class="group" data-faq-item itemprop="mainEntity" itemscope itemtype="https://schema.org/Question"><summary class="flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 text-left transition hover:bg-brand-paper/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 [&::-webkit-details-marker]:hidden" aria-expanded="false" data-faq-trigger><h3 class="text-[15.5px] font-semibold tracking-tight text-brand-ink" itemprop="name">Is the SERP preview tool free to use?</h3><span class="grid size-8 shrink-0 place-items-center rounded-full border border-brand-line bg-white text-brand-primary shadow-sm transition-all duration-300 group-open:border-brand-primary group-open:bg-brand-primary group-open:text-white group-open:rotate-45" data-faq-icon aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg></span></summary><div class="grid transition-all duration-300 ease-out" data-faq-panel style="grid-template-rows: 0fr"><div class="overflow-hidden"><div class="px-6 pb-6 pt-1 text-[15px] leading-relaxed text-brand-ink/75" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer"><div itemprop="text">Yes. There is no signup, no email, and no usage limit. The preview runs entirely in your browser. You can test as many title/description combinations as you need before deciding on the final copy.</div></div></div></div></details><details class="group" data-faq-item itemprop="mainEntity" itemscope itemtype="https://schema.org/Question"><summary class="flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 text-left transition hover:bg-brand-paper/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 [&::-webkit-details-marker]:hidden" aria-expanded="false" data-faq-trigger><h3 class="text-[15.5px] font-semibold tracking-tight text-brand-ink" itemprop="name">Can I preview how my competitors' snippets look?</h3><span class="grid size-8 shrink-0 place-items-center rounded-full border border-brand-line bg-white text-brand-primary shadow-sm transition-all duration-300 group-open:border-brand-primary group-open:bg-brand-primary group-open:text-white group-open:rotate-45" data-faq-icon aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg></span></summary><div class="grid transition-all duration-300 ease-out" data-faq-panel style="grid-template-rows: 0fr"><div class="overflow-hidden"><div class="px-6 pb-6 pt-1 text-[15px] leading-relaxed text-brand-ink/75" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer"><div itemprop="text">This tool is designed to preview your own page snippets before publishing — paste your own title and description. To check competitor snippets, you can view their live search result directly, or run a URL through the SEO Analyzer or Free SEO Report to pull the existing tags automatically.</div></div></div></div></details></div><script>
// Single-open FAQ behaviour for the FaqAccordion component.
// Mirrors the previous JS accordion UX on top of native <details> so the
// markup stays zero-JS for readers/print while giving users the familiar
// "open one at a time" feel.
document.querySelectorAll('[data-faq-single-open]').forEach((root) => {
const triggers = root.querySelectorAll('[data-faq-trigger]');
triggers.forEach((summary) => {
const details = summary.closest('details');
const panel = details?.querySelector('[data-faq-panel]');
const sync = () => {
if (!details || !summary || !panel) return;
const open = details.open;
summary.setAttribute('aria-expanded', open ? 'true' : 'false');
panel.style.gridTemplateRows = open ? '1fr' : '0fr';
};
// Initial state on page load (handles SSR open attribute if any)
sync();
details?.addEventListener('toggle', sync);
summary.addEventListener('click', () => {
// The default <summary> toggles `open`. We want single-open behaviour,
// so close the others first, then let the native toggle run.
const wasOpen = details.open;
// Close every sibling before the click takes effect so the user sees
// the previous selection collapse while the new one opens.
triggers.forEach((t) => {
const d = t.closest('details');
if (d && d !== details && d.open) d.open = false;
});
// Allow the native toggle to run; sync() handles the post-toggle UI.
// When `wasOpen` is true the user clicked the currently-open item and
// the default action closes it — nothing more to do.
void wasOpen;
});
});
});
</script></div></section></main><!-- Bottom breadcrumb — sits in the visual band between the page's
in-page CTA (last <slot/>) and the footer's white "Start optimizing
today" CTA. Each page passes the breadcrumb via the named
`footer-breadcrumb` slot; renders nothing when the slot is empty. --><footer class="border-t border-brand-line bg-brand-paper defer-render"><div class="bg-gradient-to-b from-white to-brand-mist/50 px-6 py-12 text-center"><h2 class="text-xl font-bold tracking-tight text-brand-ink">See where your pages rank and why</h2><p class="mt-2 text-sm text-brand-ink/70">Run a 45-point SEO audit and get a prioritised fix list — free, in your browser.</p><a href="/free-seo-report/" class="mt-5 inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-brand-primary px-6 text-sm font-semibold text-white shadow-soft hover:bg-brand-primary-soft hover:-translate-y-0.5 transition">Get your free SEO report →</a></div><div class="container-wide py-14"><div class="grid gap-10 md:grid-cols-4"><div class="md:col-span-2"><a href="/" class="inline-flex min-h-11 items-center py-2 group" aria-label="SEOKit24"><img aria-hidden="true" src="/brand/logo_blue.svg" alt="" class="w-auto h-6" width="149" height="28" loading="eager" fetchpriority="high" decoding="sync"></a><p class="mt-4 max-w-sm text-sm leading-relaxed text-brand-ink/65">Free SEO tools, in-depth guides, and field-tested playbooks. Built by SEOs, for SEOs.</p><div class="mt-5 flex flex-wrap items-center gap-2.5 text-brand-ink/65"><a href="/rss.xml" aria-label="RSS" class="grid size-11 place-items-center rounded-xl border border-brand-line bg-white shadow-sm transition hover:border-brand-primary/20 hover:text-brand-primary hover:shadow-md hover:-translate-y-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg></a></div></div><div><h3 class="text-sm font-semibold tracking-tight text-brand-ink">Explore</h3><ul class="mt-4 space-y-1 text-sm text-brand-ink/70"><li><a href="/tools/" class="group relative inline-flex min-h-11 items-center gap-2 py-2 px-3 -mx-3 rounded-lg transition-all duration-200 hover:text-brand-primary hover:bg-brand-primary/5 hover:-translate-x-0.5">Tools<span class="absolute bottom-2 left-3 right-3 h-px bg-brand-primary/0 group-hover:bg-brand-primary/20 transition-all duration-200 scale-x-0 group-hover:scale-x-100"></span></a></li><li><a href="/guides/" class="group relative inline-flex min-h-11 items-center gap-2 py-2 px-3 -mx-3 rounded-lg transition-all duration-200 hover:text-brand-primary hover:bg-brand-primary/5 hover:-translate-x-0.5">Guides<span class="absolute bottom-2 left-3 right-3 h-px bg-brand-primary/0 group-hover:bg-brand-primary/20 transition-all duration-200 scale-x-0 group-hover:scale-x-100"></span></a></li><li><a href="/blog/" class="group relative inline-flex min-h-11 items-center gap-2 py-2 px-3 -mx-3 rounded-lg transition-all duration-200 hover:text-brand-primary hover:bg-brand-primary/5 hover:-translate-x-0.5">Blog<span class="absolute bottom-2 left-3 right-3 h-px bg-brand-primary/0 group-hover:bg-brand-primary/20 transition-all duration-200 scale-x-0 group-hover:scale-x-100"></span></a></li><li><a href="/newsletter/" class="group relative inline-flex min-h-11 items-center gap-2 py-2 px-3 -mx-3 rounded-lg transition-all duration-200 hover:text-brand-primary hover:bg-brand-primary/5 hover:-translate-x-0.5">Newsletter<span class="absolute bottom-2 left-3 right-3 h-px bg-brand-primary/0 group-hover:bg-brand-primary/20 transition-all duration-200 scale-x-0 group-hover:scale-x-100"></span></a></li><li><a href="/about/" class="group relative inline-flex min-h-11 items-center gap-2 py-2 px-3 -mx-3 rounded-lg transition-all duration-200 hover:text-brand-primary hover:bg-brand-primary/5 hover:-translate-x-0.5">About<span class="absolute bottom-2 left-3 right-3 h-px bg-brand-primary/0 group-hover:bg-brand-primary/20 transition-all duration-200 scale-x-0 group-hover:scale-x-100"></span></a></li></ul></div><div><h3 class="text-sm font-semibold tracking-tight text-brand-ink">Company</h3><ul class="mt-4 space-y-1 text-sm text-brand-ink/70"><li><a href="/sustainability/" class="group relative inline-flex min-h-11 items-center gap-2 py-2 px-3 -mx-3 rounded-lg transition-all duration-200 hover:text-brand-primary hover:bg-brand-primary/5 hover:-translate-x-0.5">Sustainability<span class="absolute bottom-2 left-3 right-3 h-px bg-brand-primary/0 group-hover:bg-brand-primary/20 transition-all duration-200 scale-x-0 group-hover:scale-x-100"></span></a></li><li><a href="/contact/" class="group relative inline-flex min-h-11 items-center gap-2 py-2 px-3 -mx-3 rounded-lg transition-all duration-200 hover:text-brand-primary hover:bg-brand-primary/5 hover:-translate-x-0.5">Contact<span class="absolute bottom-2 left-3 right-3 h-px bg-brand-primary/0 group-hover:bg-brand-primary/20 transition-all duration-200 scale-x-0 group-hover:scale-x-100"></span></a></li><li><a href="/privacy/" class="group relative inline-flex min-h-11 items-center gap-2 py-2 px-3 -mx-3 rounded-lg transition-all duration-200 hover:text-brand-primary hover:bg-brand-primary/5 hover:-translate-x-0.5">Privacy<span class="absolute bottom-2 left-3 right-3 h-px bg-brand-primary/0 group-hover:bg-brand-primary/20 transition-all duration-200 scale-x-0 group-hover:scale-x-100"></span></a></li><li><a href="/terms/" class="group relative inline-flex min-h-11 items-center gap-2 py-2 px-3 -mx-3 rounded-lg transition-all duration-200 hover:text-brand-primary hover:bg-brand-primary/5 hover:-translate-x-0.5">Terms<span class="absolute bottom-2 left-3 right-3 h-px bg-brand-primary/0 group-hover:bg-brand-primary/20 transition-all duration-200 scale-x-0 group-hover:scale-x-100"></span></a></li></ul></div></div><div class="mt-12 flex flex-col items-start justify-between gap-3 border-t border-brand-line pt-6 text-xs text-brand-ink/65 sm:flex-row sm:items-center"><p>© 2026 SEOKit24. All rights reserved. Built for SEOs who run real audits and need real numbers.</p><p class="inline-flex items-center gap-1.5"><span class="size-2 rounded-full bg-emerald-500 shadow-status-glow"></span><a href="https://www.24squad.in/" target="_blank" rel="noopener noreferrer" aria-label="SEOKit24 is backed by 24Squad (opens in new tab)" class="inline-flex min-h-11 items-center py-2 font-medium hover:text-brand-primary transition">Backed by 24Squad</a></p></div></div></footer><!-- Sticky back-to-top button — rendered at body level so its
`position: fixed` pins to the viewport (the `.defer-render`
footer would otherwise contain it). --><button type="button" id="to-top" aria-label="Scroll back to page top" class="fixed bottom-6 right-6 z-[var(--z-overlay)] grid size-11 place-items-center rounded-full border border-brand-line bg-white text-brand-ink opacity-0 invisible transition hover:border-brand-primary hover:text-brand-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button><script>
const toTop = document.getElementById('to-top');
if (toTop) {
const show = () => {
toTop.classList.remove('opacity-0', 'invisible');
};
const hide = () => {
toTop.classList.add('opacity-0', 'invisible');
};
const toggle = () => (window.scrollY > 0 ? show() : hide());
window.addEventListener('scroll', toggle, { passive: true });
toggle();
toTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
}
</script><!-- PWA service worker registration --><!-- ?sw=v2 sidesteps the stale 1y-immutable sw-register.js edge entry the CDN pinned before the server no-cache rules landed --><script src="/sw-register.js?sw=v2" async></script><!-- AdSense with Consent Mode v2 — script loads but pauses ad requests
until the user accepts analytics (task 780). Once CookieConsent.svelte
fires 'seokit24:consent-given', the event listener below sets
adsbygoogle.pauseAdRequests = 0 so Google serves personalised ads.
The entire block is conditional on PUBLIC_ADSENSE_PUBLISHER_ID so
local dev and pre-approval builds run clean with no dead tags. --><script>
// Default: block all ad requests until explicit consent is given.
window.adsbygoogle = window.adsbygoogle || [];
adsbygoogle.push(['request', 'pauseAdRequests', true]);
// Resume personalised advertising once CookieConsent fires its consent event.
window.addEventListener('seokit24:consent-given', function () {
// Grant consent to Google advertising cookies.
window.gtag && window.gtag('consent', 'update', 'ad_storage', 'granted');
// Kick the AdSense queue so queued ads load immediately.
if (window.adsbygoogle) adsbygoogle.push(['request', 'pauseAdRequests', false]);
});
</script><script>(function(){let e=(e,t)=>{let n=async()=>{await(await e())()},r=typeof t.value==`object`?t.value:void 0,i={timeout:r==null?void 0:r.timeout};`requestIdleCallback`in window?window.requestIdleCallback(n,i):setTimeout(n,i.timeout||200)};(self.Astro||(self.Astro={})).idle=e,window.dispatchEvent(new Event(`astro:idle`))})();</script><astro-island uid="ZpqH3n" component-url="/_astro/CookieConsent.rP4kifop.js" component-export="default" renderer-url="/_astro/client.svelte.Dfn1zVcZ.js" props="{}" ssr client="idle" opts="{"name":"CookieConsent","value":true}" await-children><!--[--><!--[0--><div class="fixed inset-x-0 bottom-0 z-50 border-t border-brand-line bg-white px-4 py-4 shadow-[0_-4px_24px_rgba(0,0,0,0.08)] sm:px-6" role="dialog" aria-modal="true" aria-label="Cookie consent"><div class="mx-auto flex max-w-5xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4"><p class="text-xs text-brand-ink sm:text-sm">We use first-party cookies to understand how you use SEOKit24 and to improve your
experience. Advertising partners (including Google) may place their own cookies when you
consent to analytics. See our <a href="/privacy/" class="hidden sm:inline underline underline-offset-2">Privacy policy</a>
for details. GA4 page-views are anonymised.</p> <a href="/privacy/" class="text-xs text-brand-ink/60 underline underline-offset-2 hover:text-brand-ink sm:hidden">Privacy policy</a> <div class="flex shrink-0 gap-2"><button type="button" class="rounded-lg border border-brand-primary/30 bg-brand-paper px-4 py-2 text-sm font-medium text-brand-ink transition hover:border-brand-primary hover:bg-brand-paper/80">Essential only</button> <button type="button" class="rounded-lg bg-brand-primary px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-primary-soft">Accept analytics</button></div></div></div><!--]--><!--]--><!--astro:end--></astro-island></body></html>