How to Write SEO Title Tags That Get Clicks | SlapMyWeb
On-Page SEO9 min read
How to Write SEO Title Tags That Get Clicks
Write SEO title tags that rank and get clicks: character limits, keyword placement, proven formulas, HTML code, and a before/after fix table.
SlapMyWeb Team·
A title tag is the HTML element (<title>) that names your page in browser tabs, search results, and social shares. To write SEO title tags that get clicks, lead with your primary keyword, keep it under ~60 characters (around 600 pixels), give people a concrete reason to click, and make every title on your site unique. The title is both a ranking signal and your sales headline in search — get it right and you win the click before anyone reads a word of your content.
Most pages lose clicks not because they rank poorly, but because their title reads like a filing label. "Home | My Website" is a death certificate, not a headline. Below is the exact playbook for turning forgettable titles into ones that earn the click — with HTML, framework code, formulas, and a fix table you can copy today.
What a Title Tag Is and Why It Matters
The title tag is the single most influential on-page element you control. It lives in the <head> of your HTML and surfaces in three high-stakes places: the browser tab, the search engine results page (SERP), and link previews on social platforms.
html
<!-- Where your title tag lives -->
<head>
<title>How to Write SEO Title Tags That Get Clicks | SlapMyWeb</title>
</head>
Google treats the title as a primary signal for understanding what a page is about, which is why Google's own documentation on title links calls it "the first piece of information used to decide which result to click on." But the title does double duty. It is also your headline — the one line that decides whether a searcher clicks you or the result above and below you.
That dual role is the whole game. A title that ranks but reads like a label gets skipped. A title that's irresistible but vague never ranks. The craft is making one short string do both jobs at once.
SEO specialist reviewing a list of page titles in Google Search Console on a desktop monitor
The Six Rules of a Strong Title Tag
Keep it under ~60 characters
Google renders titles by pixel width — roughly 600 pixels, which works out to about 50–60 characters including spaces. Past that, the title is truncated with an ellipsis and your most persuasive words can vanish. Treat 60 characters as a hard ceiling and aim for the 50–60 band so the full title shows on both desktop and mobile.
Wide characters (capital letters, "M", "W") eat more pixels than narrow ones ("i", "l"), so a 58-character title in all caps may still get cut. When in doubt, preview it.
Put the primary keyword near the front
Place your target term within the first three to five words. Words earlier in the title carry slightly more weight, and — more importantly — people scan left to right and stop reading after the first few words. A front-loaded keyword gets noticed; a buried one gets missed.
"SEO Title Tags: 7 Rules That Win Clicks" beats "7 Rules You Should Know About SEO Title Tags for Better Rankings." Same idea, half the friction.
Make it click-worthy, not just descriptive
Your title competes against nine other results on page one. It needs a hook. Lean on specificity — numbers, outcomes, a year, a concrete benefit — rather than vague adjectives. "Meta Tags Guide" describes the page. "Meta Tags That Rank: 9 Proven Formulas" sells the click.
This is where titles overlap with meta description best practices: the title makes the promise, the description backs it up.
Match search intent
A title has to match what the searcher actually wants. If someone types "best running shoes" they want a comparison or list — a title that says "Buy Running Shoes Now" mismatches the intent, earns a bounce, and the bounce drags your ranking down. Decide the intent first, then write a title that fulfills it. The four intent types and how to read them are covered in the search intent guide.
Keep every title unique
Every URL on your site needs its own distinct title. Duplicates confuse Google about which page deserves to rank for a query, and they look spammy when several of your pages appear in results with identical titles. Duplicate and missing titles are two of the most common findings in a step-by-step SEO audit.
Add the brand at the end
Append your brand after the descriptive part, separated by a pipe (|) or dash (—). For a well-known brand this lifts click-through; for a new one it costs precious characters, so keep it short. Standard format:
Primary Keyword — Compelling Hook | Brand
Title Tag Formulas That Earn the Click
These patterns work because they front-load the keyword and bake in a reason to click. Adapt, don't copy verbatim.
Formula
Pattern
Example
How-To
How to [Outcome]: [Method/Benefit]
How to Fix CLS Issues: A 2026 Field Guide
Numbered list
[N] [Topic] [Tips/Mistakes] That [Result]
11 On-Page Mistakes That Tank Your Rankings
Year
[Topic]: [Angle] ([Year])
Technical SEO Checklist: 47 Points (2026)
Question
[Question]? [Implied Answer]
Why Is My Site Slow? 9 Hidden Performance Killers
Comparison
[A] vs [B]: [What You Learn]
Free SEO Tools vs Semrush: An Honest Comparison
The numbered-list and year formulas pair especially well — a title like "9 Title Tag Rules That Win Clicks (2026)" carries a count, a benefit, and freshness in under 50 characters.
Before and After: Weak Titles Made Strong
The fix is always the same move — trade a generic label for a keyword-rich, benefit-driven line.
Weak title
Problem
Strong title
Home
No keyword, no value
AI Website Audit — Free SEO Score in 30s
Products - My Store
Generic, no keyword
Handmade Leather Bags — Free Shipping Over $50
Blog
Zero information
SEO Tips and Tutorials for Higher Rankings
About Us - Company
Not search-worthy
About [Brand]: A Decade of SEO Wins
Services
No specificity
WordPress SEO Services — Page 1 in 90 Days
Untitled
No effort at all
Set a real title — or delete the page
Run a free SlapMyWeb audit to see exactly which of your pages still ship "Home" or "Untitled" as their title.
Two laptop screens side by side comparing a vague page title against a rewritten keyword-rich title
How to Implement Title Tags in HTML and Frameworks
In raw HTML, the title sits once in the <head>. You can also set a separate social title via Open Graph and Twitter cards — handy when your SERP title and share title need different angles.
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Primary title tag -->
<title>How to Write SEO Title Tags That Get Clicks | SlapMyWeb</title>
<!-- Social share title (can differ from the SERP title) -->
<meta property="og:title" content="Write Title Tags That Actually Get Clicks (9 Formulas)">
<meta name="twitter:title" content="Write Title Tags That Actually Get Clicks (9 Formulas)">
</head>
The split between SERP title and social title is worth using deliberately — the full reasoning is in the Open Graph tags guide.
Setting titles per framework:
html
<!-- Next.js App Router — page.tsx or layout.tsx -->
<!-- export const metadata = { title: 'Your SEO Title Tag Here' } -->
<!-- WordPress — let your SEO plugin (Yoast/RankMath) own the <title> -->
<!-- Theme header.php should only call wp_head(); -->
<!-- React Helmet (SPA) -->
<!-- <Helmet><title>Your SEO Title Tag Here</title></Helmet> -->
<!-- Shopify Liquid — theme.liquid -->
<!-- <title>{{ page_title }} | {{ shop.name }}</title> -->
On WordPress, never hardcode a <title> in the theme and let a plugin also output one — you'll ship two title tags. The full plugin-vs-theme setup is in the WordPress SEO guide, and the store equivalent is in the Shopify SEO checklist.
A useful rule: your <title> and your visible <h1> can differ. Keep the title concise and keyword-led for the SERP; let the h1 be a touch more descriptive for the reader on the page.
Common Title Tag Mistakes to Avoid
Too long. Anything past ~60 characters risks truncation that cuts your hook. Preview before publishing.
Keyword stuffing. "SEO Title Tags | Title Tag SEO | Best Title Tags" reads as spam to people and to Google. Use the keyword once, naturally.
Duplicate titles. Fifty pages titled "Products | My Store" give Google nothing to differentiate. Make each one unique.
Missing titles. Some templates and generated pages ship without a title; Google then invents one from your h1 or body text, and its guess is rarely optimal.
Intent mismatch. A title promising a product page on top of a blog post earns bounces and lost rankings.
Brand-only titles. Your homepage can lead with the brand; every other page should lead with descriptive keywords.
Per Google Search Central, the most common reason Google rewrites a title is that the on-page title is "half-empty, low-quality, or doesn't match the page" — every mistake above is an invitation for a rewrite.
Tools for Writing and Checking Titles
You don't need a stack to nail titles, but a few tools speed up the loop:
A site audit — flags titles that are too long, duplicated, missing, or keyword-thin across every URL at once.
Google Search Console — the only source of real CTR data per query; sort by impressions-high / CTR-low to find titles worth rewriting.
A SERP preview — renders your title at true pixel width so you catch truncation before publishing.
Marketer typing a new page title into a CMS editor with a live character-count indicator on screen
Frequently Asked Questions
How long should an SEO title tag be?
Keep your title tag between 50 and 60 characters, which is roughly 600 pixels of width. Google measures titles by pixel width, not character count, so wide capital letters can push a 58-character title past the limit. Put your keyword and hook in the first 50 characters so they always show.
Does Google always use the title tag I write?
No. Google rewrites a title when it judges your version to be empty, low-quality, stuffed with keywords, or mismatched to the page. You reduce rewrites by keeping the title concise, unique, and accurately descriptive of the content — a clean, relevant title is rarely changed.
Should the title tag and the H1 be the same?
They can be, but they don't have to be. The title tag is optimized for the search result, so it stays short and keyword-led; the H1 speaks to the reader who already landed on the page and can be slightly longer or more descriptive. Keeping them closely related (not identical) is good practice.
How often should I update my title tags?
Review titles roughly quarterly, or whenever Search Console shows a page with strong impressions but a weak click-through rate. Change one title at a time and give it two to four weeks before judging the impact, so you can attribute any CTR movement to that single edit.
Where do I put my brand name in the title?
Put it at the end, separated by a pipe or dash — for example, "Primary Keyword — Hook | Brand." Leading with the brand only makes sense on your homepage or if the brand is widely recognized; on every other page, lead with the descriptive keywords and let the brand close it out.
