An OG (Open Graph) image is the preview image shown when your URL is shared on social media such as Facebook, LinkedIn or X. The recommended size is 1200×630 pixels (1.91:1). Without one, platforms pick an image from the page or show none.

What is the ideal meta title length?

Google cuts a title by width, not by a fixed number of characters, and publishes no exact limit. About 600 pixels is the commonly measured limit, which is roughly 50–60 characters of ordinary text; capital letters and wide characters such as W use more room. The preview measures your title in pixels and tells you when it is likely to be cut. Put the important words first.

What is the ideal meta description length?

Google says it shortens snippets to fit the device width and sets no limit on length. The commonly measured widths are about 920 pixels on desktop and 680 on mobile, around 155–160 characters of normal text on desktop. Google may also ignore your description and write its own from the page.

What is Twitter Card?

A Twitter Card is X's version of Open Graph. summary_large_image shows a large image above the title; summary shows a small square image beside it. If twitter: tags are missing, X falls back to the og: tags. Pick the card type in the tool and the matching tag is written.

Do meta tags affect SEO rankings?

Meta description does not directly affect rankings but strongly influences click-through rate in search results, which is an indirect ranking signal. Meta title is a confirmed ranking factor for Google.

Why are quotes and ampersands escaped in the HTML?

A title such as Tom "the Cat" & Dog would end the attribute early if it were written as it is. The generator escapes &, , " and ' so the tags stay valid, and it leaves out any tag whose field is empty.

Meta Tag Preview

Preview your page in Google, X and Facebook with pixel-width checks, and copy escaped title, description and Open Graph tags. Free, instant.

Last updated: 7 October 2026

Page title

50 characters, about 500 of 600 px

Meta description

129 characters, about 903 of 920 px on desktop

Page URL

OG image URL (leave empty for none)

Image description (alt text, optional)

Site name

X (Twitter) handle

X card type

stax.tools

Stax Tools — Free Online Developer & Finance Tools

100+ free browser-based tools — JSON formatter, EMI calculator, QR code generator, and more. No sign-up, no server, 100% private.

An approximation: Google, X and Facebook choose what to show and change their layouts. Google publishes no exact length, so the pixel widths follow commonly measured limits (about 600 px for titles, 920 px desktop and 680 px mobile for descriptions).

HTML meta tags

<!-- Primary Meta Tags -->
<title>Stax Tools — Free Online Developer &amp; Finance Tools</title>
<meta name="title" content="Stax Tools — Free Online Developer &amp; Finance Tools" />
<meta name="description" content="100+ free browser-based tools — JSON formatter, EMI calculator, QR code generator, and more. No sign-up, no server, 100% private." />
<link rel="canonical" href="https://stax.tools" />

<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://stax.tools" />
<meta property="og:title" content="Stax Tools — Free Online Developer &amp; Finance Tools" />
<meta property="og:description" content="100+ free browser-based tools — JSON formatter, EMI calculator, QR code generator, and more. No sign-up, no server, 100% private." />
<meta property="og:image" content="https://stax.tools/og/1571bd3355932a.jpg" />
<meta property="og:site_name" content="Stax Tools" />

<!-- X (Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://stax.tools" />
<meta name="twitter:title" content="Stax Tools — Free Online Developer &amp; Finance Tools" />
<meta name="twitter:description" content="100+ free browser-based tools — JSON formatter, EMI calculator, QR code generator, and more. No sign-up, no server, 100% private." />
<meta name="twitter:image" content="https://stax.tools/og/1571bd3355932a.jpg" />
<meta name="twitter:site" content="@staxtools" />

Was this tool useful?

Use the tool above and you can rate it here.

How the Meta Tag Preview tool works

The meta tag preview shows an approximation of how your page can appear in Google Search, on Facebook and on X (Twitter), and writes the matching HTML tags to copy. LinkedIn reads the same Open Graph tags as Facebook. Enter a title, description, page URL and image address and the preview updates as you type. Nothing is uploaded, and each network decides for itself what it finally shows.

Title tag best practices

Google cuts a title by width, not by a set number of characters, and publishes no exact limit. About 600 pixels is the commonly measured limit, roughly 50 to 60 characters of ordinary text. The tool measures your title in Arial at 20 px and reports the width, so a row of capital Ws is flagged as too wide while sixty narrow letters are not. Put your main keyword near the start and your brand at the end. Google can also rewrite a title it considers poor.

Meta description optimisation

Google shortens a snippet to fit the device width and sets no length limit. The commonly measured widths are about 920 pixels on desktop and 680 on mobile, and the Desktop and Mobile buttons switch between them. A meta description is not a direct ranking factor, but it can lift clicks, and Google sometimes shows its own text instead.

Open Graph image requirements

Facebook, LinkedIn and other networks use og:image for link previews. The recommended size is 1200×630 pixels (1.91:1), and the address must be a full URL that is publicly reachable. If the image fails to load, the preview says so instead of showing an empty card. Add an image description if you want og:image:alt and twitter:image:alt written.

X (Twitter) card tags

twitter:card chooses the layout: summary_large_image puts a large picture above the text, and summary shows a small square picture beside it. Pick one in the tool and the matching tag is written. If twitter: tags are missing, X falls back to the og: tags. The handle is written with an @, and any tag whose field is empty is left out. All values are HTML-escaped, so a quote or ampersand cannot break the markup.

Frequently asked questions

What is an OG image?: An OG (Open Graph) image is the preview image shown when your URL is shared on social media such as Facebook, LinkedIn or X. The recommended size is 1200×630 pixels (1.91:1). Without one, platforms pick an image from the page or show none.
What is the ideal meta title length?: Google cuts a title by width, not by a fixed number of characters, and publishes no exact limit. About 600 pixels is the commonly measured limit, which is roughly 50–60 characters of ordinary text; capital letters and wide characters such as W use more room. The preview measures your title in pixels and tells you when it is likely to be cut. Put the important words first.
What is the ideal meta description length?: Google says it shortens snippets to fit the device width and sets no limit on length. The commonly measured widths are about 920 pixels on desktop and 680 on mobile, around 155–160 characters of normal text on desktop. Google may also ignore your description and write its own from the page.
What is Twitter Card?: A Twitter Card is X's version of Open Graph. summary_large_image shows a large image above the title; summary shows a small square image beside it. If twitter: tags are missing, X falls back to the og: tags. Pick the card type in the tool and the matching tag is written.
Do meta tags affect SEO rankings?: Meta description does not directly affect rankings but strongly influences click-through rate in search results, which is an indirect ranking signal. Meta title is a confirmed ranking factor for Google.
Why are quotes and ampersands escaped in the HTML?: A title such as Tom "the Cat" & Dog would end the attribute early if it were written as it is. The generator escapes &, <, >, " and ' so the tags stay valid, and it leaves out any tag whose field is empty.