Meta Tag & SERP Previewer

How search and social previews are built

Every link preview you see is assembled from a handful of tags in your page's <head>. Google reads the <title> element and the meta description. Facebook, LinkedIn, Slack, iMessage and most chat apps read the Open Graph tags (og:title, og:description, og:image). X reads its own twitter: tags first and falls back to Open Graph when they are missing. Getting all of them right takes five minutes and pays off every single time someone shares your URL.

Titles are measured in pixels, not characters

The "keep it under 60 characters" rule is a rough proxy. What Google actually does is cut the title when it runs out of horizontal space, which on desktop is around 580 to 600 pixels at 20px Arial. A title full of capital W's and M's hits that wall at 45 characters, while one heavy on i, l and t can stretch past 70. This tool renders your title on a hidden canvas with the same font and reports the real width, so the counter goes amber or red based on what Google will actually do.

Put the words that earn the click at the front. Brand names usually belong at the end, after a separator such as | or :. If the title gets cut, the part people need is already visible.

Descriptions: write for the click, not the algorithm

The meta description is not a ranking factor, but it is your ad copy. Google shows roughly 920 pixels on desktop (about 150 to 160 characters) and a little more on mobile, where it can wrap to three lines. Lead with the concrete benefit, include the phrase people are searching for (Google bolds matching words), and end with a reason to act. Generic descriptions such as "Welcome to our website" are the ones Google most often throws away and replaces with a random sentence from your page.

The share image does most of the work

On social platforms the image is the preview. Use 1200 x 630 pixels, which is a 1.91:1 ratio, and every major platform will crop it cleanly. A few practical rules:

• Always use an absolute URL. /img/og.jpg will not work. It must start with https://.
• Keep text inside the middle 80%. Some apps round the corners or overlay the domain name in the bottom left.
• Stay under about 5 MB and use JPG or PNG. WebP works in most places now, but older scrapers still skip it.
• Add alt text with og:image:alt and twitter:image:alt so screen reader users get the same context.

A complete, minimal head block

This is the pattern the generator above produces. It covers Google, Open Graph and X without duplicating anything that falls back automatically.

<title>Handmade Ceramic Mugs | Clay &amp; Kiln</title>
<meta name="description" content="Small-batch stoneware...">
<link rel="canonical" href="https://clayandkiln.com/shop/mugs/">
<meta property="og:type" content="website">
<meta property="og:title" content="Handmade Ceramic Mugs">
<meta property="og:image" content="https://clayandkiln.com/og/mugs.jpg">
<meta name="twitter:card" content="summary_large_image">

Testing after you deploy

Previews here are faithful approximations: each platform tweaks fonts and spacing regularly, so treat them as a layout check rather than a screenshot. Once the page is live, run it through each platform's own inspector to confirm the scraper can reach your image. If a platform still shows an old title or image, it is almost always cache. Re-scrape from the inspector, or change the image filename (for example og-mugs-v2.jpg) to force a fresh fetch.

Finally, remember that every page needs its own tags. A site where every URL shares the homepage title and image looks like spam in search results and gives people no reason to click the specific page they were sent.

Frequently asked questions