How to Write Title Tags and Meta Descriptions That Actually Get Clicks

If you have spent any time studying SEO, you have heard the advice: write a good title tag and meta description. But what does "good" actually mean in practice? How do you know when your title is too long, and why does a 58-character title sometimes still get cut off in search results? This tutorial walks you through the mechanics of meta tags, explains the pixel-width problem that trips up most SEO writers, and shows you how to use a generator to produce copy-ready HTML in seconds.

What Are Title Tags and Meta Descriptions?

A title tag is the HTML element that defines the name of a web page. It appears in three places: the browser tab, the bookmarks menu, and — most importantly for SEO — as the blue clickable headline in Google search results. A meta description is a short summary of the page's content. Google displays it as the grey paragraph beneath the title in the search snippet.

Neither element is a direct ranking signal in the way that backlinks or page content are. But they have an outsized effect on your click-through rate (CTR) — the percentage of people who see your result and actually click it. A higher CTR sends a positive user-engagement signal to Google, and it drives more qualified traffic regardless of your ranking position. Getting these two tags right is the fastest on-page win available to most sites.

The Character Count Myth (and the Pixel-Width Reality)

Most guides tell you to keep titles under 60 characters and descriptions under 160 characters. These numbers are not wrong, but they are incomplete. Google does not truncate text based on character count — it truncates based on rendered pixel width on screen.

The practical implication: a title made entirely of wide letters like "MWWM WMWM" will hit Google's pixel limit at around 40 characters, while a title full of narrow letters like "fill illicit" might fit comfortably at 65 characters. Google renders title tags at approximately 20px Arial and clips them at around 600 pixels wide. Descriptions render at 14px Arial and clip around 920 pixels wide.

This is why a live pixel-width counter matters. Character count gives you a rough guide; pixel width gives you the accurate picture. Use both.

Step 1 — Enter Your Page URL

Start by typing your full page URL into the URL field at the top of the generator. This populates the SERP preview with a realistic-looking breadcrumb. It does not affect the generated HTML — the URL field is purely visual so you can see exactly how your result will look in Google before you publish anything.

Step 2 — Write Your Title Tag

Click into the Title Tag field and start typing. As you write, two progress bars update in real time: one tracking your character count against the 60-character recommendation, and one tracking your estimated pixel width against the 600-pixel limit.

The bars turn amber when you approach the limit and red when you exceed it. The Google SERP preview above turns the title text red when it would likely be clipped, so you get an instant visual warning without having to guess.

What makes a strong title tag? Put your primary keyword near the beginning — research consistently shows that front-loaded keywords correlate with higher rankings and better CTRs. Include your brand name at the end if you have space, separated by a pipe or dash (Best Running Shoes for Flat Feet | BrandName). Avoid keyword stuffing; each title should read naturally and answer the question a searcher is likely to have.

Step 3 — Write Your Meta Description

Move to the Meta Description field. This text should function like a mini advertisement. You have roughly 120–158 characters (or up to 920 pixels) to convince someone that your page answers their question better than the nine other results on the page.

Effective descriptions share a few qualities. They include the target keyword (Google bolds keywords that match the search query, making your snippet stand out). They communicate a clear benefit or answer. They often end with a soft call-to-action: "Learn more," "Find the right plan," or "Compare models side by side." The description does not need to be a complete sentence — a punchy fragment that answers the intent works just as well.

Watch both meters as you type. If your pixel bar turns red before your character count does, trim wide letters or replace long words with shorter synonyms. If your character count is low but the pixel bar is already near the limit, your text contains unusually wide characters — check for capital-heavy phrases or wide punctuation.

Step 4 — Check the SERP Preview

The Google SERP preview panel updates as you type. This is the most important feedback loop in the tool. Look at it with fresh eyes: does the title make the page's topic immediately clear? Is the description compelling enough to earn the click over the adjacent results?

A useful exercise: mentally place your snippet between two competitors. If you do a real Google search for your target keyword, you can see what your competitors are writing. Your title and description need to differentiate your result — either by being more specific, more benefit-focused, or more directly answering the searcher's intent.

Step 5 — Generate and Copy Your HTML

When you are satisfied with both fields, click Generate Meta Tags. The tool produces six lines of copy-ready HTML: a <title> tag, an Open Graph title, a standard meta description, an Open Graph description, and Twitter Card equivalents for both. Paste all six into your page's <head> section.

Use the individual copy buttons if you only need one piece. The Title Only button grabs the three title-related lines; the Description Only button grabs the three description lines. All special characters are properly HTML-escaped, so you can paste the output directly without worrying about quote marks or ampersands breaking your markup.

Common Mistakes to Avoid

Duplicate tags across pages. Every page on your site should have a unique title and description. Duplicate tags send a confusing signal to Google about which page to rank and dilute the authority of both.

Letting CMS auto-generate tags. Most content management systems generate titles from the post title and truncate descriptions from the first paragraph of body text. This produces tags that are rarely optimised for CTR or search intent. Always write these manually.

Writing for the algorithm, not the human. A title tag stuffed with keyword variations might feel SEO-smart, but it reads poorly and earns fewer clicks. The best title tags are the ones a searcher would immediately recognise as relevant and trustworthy.

Ignoring mobile truncation. On mobile devices, Google sometimes shows fewer characters than on desktop. Aim to front-load the most critical information in the first 40 characters of both your title and description as a buffer against tighter mobile clips.

When Google Rewrites Your Tags

It is worth knowing that Google reserves the right to rewrite your title and description if it determines that your tags do not accurately represent the page content. This happens most often when the title is too generic, too long, or appears stuffed with keywords. The best defence is to write tags that genuinely and specifically describe the page — Google is far less likely to override tags that match the body content and satisfy user intent. Use the generator to stay within recommended limits, and use natural language rather than keyword strings.