What are the ideal title and meta description lengths?

As a safe target, keep the title under ~580–600px (about 50–60 characters) and the meta description under ~920px on desktop / ~680px on mobile (roughly 120–158 characters, with the first ~120 characters load-bearing for mobile). These are container approximations, not hard cutoffs — Google's layout varies by viewport, zoom, and ongoing UI changes.

Why does my og:image not show when I share the link?

The most common cause is a relative or http:// image URL. Social crawlers (Facebook, LinkedIn, X, Slack, Discord) require an absolute https:// URL, ideally 1200×630px (1.91:1) and under ~1MB. Relative paths like /img/share.png silently render no image. This tool hard-fails relative URLs and warns on http://. Also remember platforms cache aggressively — re-scrape with the official Facebook Sharing Debugger and X Card Validator after changes.

Will Google show exactly the title and description I write?

Not always. This is a preview, not a guarantee — Google rewrites titles and generates its own snippets from page content a large share of the time (studies put title rewrites above ~33%). A green 'Good' here means your text fits the container; it does not force Google to display it verbatim. Treat the preview as a strong starting point and re-validate live.

Is this meta tag generator free?

Yes — it is 100% free and runs entirely in your browser; nothing you type is sent to a server.

Meta Tag & SERP Snippet Preview

Q: Does Google count title length by characters or pixels?

By rendered pixel width, not character count. Google truncates the blue title at roughly 580–600px on desktop, so a 60-character title made of wide letters (W, M, capitals) can be cut while a 65-character narrow-letter title fits. This tool measures the real pixel width with an HTML canvas (the same way a browser lays out the text) and reports it as the authoritative number, with the character count shown only as a secondary guide.

Q: Do I need a meta keywords tag?

No. Google has ignored the meta keywords tag for over a decade, so this tool intentionally does not generate one — adding it as 'SEO' would be misleading. Focus on a unique, click-worthy title and description per page instead, and never duplicate the same pair across many pages.

See your Google snippet, social cards & pixel widths live — then copy ready-to-paste <head> tags. Built in your browser.

Core SEO tags

Page title (title tag)

The clickable blue headline. Google truncates by pixel width (~580–600px desktop), not characters.

Meta description

Truncates near 920px desktop / 680px mobile and snaps to the nearest whole word.

Page URL (absolute)

Shown as the SERP breadcrumb path and used for og:url / canonical. Use an absolute https:// URL.

Preview device

Open Graph (Facebook / LinkedIn / Slack / Discord)

og:title (blank = inherits page title)

og:description (blank = inherits meta description)

og:image URL (absolute https)

Recommended 1200×630px (1.91:1), under ~1MB. Must be absolute https — relative URLs silently fail.

Image width (px)

Image height (px)

og:image:alt (accessibility)

og:type

og:site_name

X (Twitter) card

twitter:card

Without an explicit card type X may default to a tiny summary card even when a large image exists.

twitter:image URL (blank = inherits og:image)

twitter:site (@handle)

twitter:creator (@handle)

Title pixel width

—

Title ——

Description ——

Google snippet preview — Desktop

Acme

https://acme.com › blog

—

View / copy the generated <head> tags

Meta Tag & SERP Snippet Preview — guide & how to use

What it does

This free tool builds your title tag, meta description, Open Graph, and X (Twitter) card tags and shows you exactly how they'll look — a live Google snippet, a Facebook/LinkedIn share card, and an X card — before you ship them. Crucially, it measures your title and description by rendered pixel width (the way Google actually truncates), not just character count, using an HTML canvas. When you're happy, copy a ready-to-paste <head> block. Everything runs in your browser — nothing you type is sent anywhere.

How to use it

Paste your page title, meta description, and the page's absolute URL.
Toggle Desktop / Mobile — truncation thresholds differ, so check both.
Add Open Graph and X card fields. Leave og:title / og:description / twitter:image blank to inherit; the tool labels what filled them.
Watch the pixel gauges and the validation checklist turn green; fix any amber/red items.
Click Copy <head> code and paste the tags into your page's <head>.

Worked example

Say your title is Best Running Shoes for Flat Feet (2026 Guide) | Acme — that's 52 characters. By character count it looks safe. But the canvas measures it at roughly 465px at the 20px Arial size Google uses, comfortably under the ~580–600px desktop cap, so it shows Good. Now imagine a brand suffix made of wide capitals — … | WORLDWIDE MEGAMART OUTLET — that can push the same line past 600px even though it's only a few more characters. The tool flags it, and the SERP preview shows the … exactly where Google would cut, snapping to the last whole word. That's the whole point: pixels override characters when they disagree.

Why pixel width, not character count

Google lays out the snippet in a fixed-width container and truncates the rendered text. A W or M is roughly 14px wide while an i or l is about 4px — a 3× difference. So two 60-character titles can render at very different widths. This tool uses canvas.measureText() (gated behind document.fonts.ready) for the authoritative number, and falls back to a character × average-width estimate only if the canvas isn't available. Character counts are shown as a secondary guide and use code points ([...title].length) so emoji aren't miscounted.

Open Graph & X card essentials

Required OG tags per the OGP spec: og:title, og:type, og:url, og:image. og:description is recommended but optional.
og:image must be absolute https, ideally 1200×630px (1.91:1), under ~1MB. Relative or http:// URLs are the #1 reason share images don't appear.
Set twitter:card explicitly to summary_large_image for the big banner — otherwise X may fall back to a small card even when a large image exists. X inherits OG tags when twitter:* are absent.
Add alt text (og:image:alt / twitter:image:alt) — an accessibility and quality win the checklist flags.

Accuracy & honesty notes

This is a preview, not a guarantee. Google rewrites titles and generates its own snippets from page content a large share of the time (studies put rewrites above ~33%). A green "Good" does not force Google to display your exact text.
Pixel thresholds are approximations of Google's container, which varies by viewport, browser zoom, font rendering, and ongoing UI changes. Treat ~580–600px (title) and 920px/680px (description) as safe targets, not exact cutoffs.
Truncation is by pixel width and snaps to whole words — the canvas measurement is the authoritative number; character counts are a rough proxy.
Social card previews approximate each platform's renderer. Facebook, LinkedIn, X, Slack, and Discord each crop and style differently — always re-validate with the official Facebook Sharing Debugger and X Card Validator, and note crawlers cache aggressively.
100% client-side. Image dimension/ratio checks only work if you enter width/height manually (or the image is CORS-accessible) — no server fetch is performed.
No meta keywords tag. Google has ignored it for over a decade; generating it as "SEO" would be misleading, so it's intentionally omitted.

Common mistakes this tool catches

Optimizing for character count instead of pixel width.
Relative or http:// og:image / twitter:image URLs (they silently fail).
Omitting twitter:card="summary_large_image" and assuming the big banner shows.
Wrong OG image aspect ratio (square/vertical gets cropped to 1.91:1).
Front-loading boilerplate brand names so the unique, click-worthy part gets truncated away.
Missing og:image:alt / twitter:image:alt.
Not HTML-escaping special characters (< > & ") in the markup — this tool escapes them for you.

How to embed this tool on your website

No coding needed. Copy the ready-made snippet from the box below and paste it where you want it to appear.

Frequently asked questions

Does Google count title length by characters or pixels?

By pixel width. A 60-character title of wide letters can truncate while a 65-character narrow title fits. This tool measures real pixels via canvas and treats that as authoritative.

What are the ideal title and description lengths?

Title under ~580–600px (about 50–60 chars); description under ~920px desktop / ~680px mobile (~120–158 chars, first ~120 load-bearing for mobile). These are approximate container limits, not hard cutoffs.

Why doesn't my og:image show when I share?

Usually a relative or http:// URL. Crawlers need an absolute https:// image (1200×630, under ~1MB). Re-scrape with the Facebook Sharing Debugger and X Card Validator after changes — platforms cache.

Will Google show my exact title and description?

Not always — Google rewrites titles and generates snippets from page content a large share of the time. The preview is a strong starting point, not a promise.

Do I need a meta keywords tag?

No. Google has ignored it for over a decade, so this tool doesn't generate one.

Related tools

Put this meta tag tool on your site

Free, one line, no account. Great for an agency blog, a web-dev resource page, or an internal SEO checklist. The height below (1400px) is a typical value — adjust it to fit your layout.

<iframe src="https://snaptoolsuite.com/meta-tag-generator/?embed=1"
  style="width:100%;max-width:560px;height:1400px;border:0;"
  title="Meta Tag & SERP Snippet Preview" loading="lazy"></iframe>

2 Paste it on your page

3 It just works

Built locally in your browser. Nothing you type — titles, descriptions, URLs — is ever sent, logged, or stored.