- Every page must have a unique <title> tag inside <head>
- Target 50–60 characters to avoid truncation in SERPs
- Put the primary keyword near the beginning of the title
- Avoid duplicate titles across pages
Rule Details
The <title> tag is the single most important on-page SEO element. It appears in browser tabs, bookmarks, and as the headline in search result listings.
Code Examples
<!-- ✅ Good: Descriptive, ~55 chars, keyword-first -->
<head>
<title>Sourdough Bread Recipe — Step-by-Step Guide | BakeCo</title>
</head><!-- ❌ Bad: Too short and non-descriptive -->
<head>
<title>Page</title>
</head>
<!-- ❌ Bad: Keyword-stuffed -->
<head>
<title>Bread Bread Recipes Bread Baking Best Bread</title>
</head>Why It Matters
The <title> tag is the most prominent element in search result listings and browser tabs—it directly influences click-through rates and is a confirmed Google ranking signal.
Character Length Guidelines
| Length | Result |
|---|---|
| < 10 characters | Too short — not descriptive |
| 10–60 characters | Ideal — displays fully in SERPs |
| 61–70 characters | May be truncated |
| > 70 characters | Truncated in most search results |
Note: Google measures in pixels (~600px max), so exact character count varies with the characters used.
Title Patterns by Page Type
| Page Type | Pattern | Example |
|---|---|---|
| Homepage | Brand name + tagline | BakeCo – Artisan Bread Recipes |
| Blog post | Topic + Brand | `How to Score Sourdough |
| Product page | Product name + key attribute | Cast Iron Dutch Oven 5.5 Qt – BakeCo |
| Category | Category name + Brand | `Sourdough Recipes |
Next.js Implementation
// app/blog/[slug]/page.tsx
import { Metadata } from 'next'
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug)
return {
title: `${post.title} | BakeCo`,
}
}// app/layout.tsx — default title template
export const metadata: Metadata = {
title: {
template: '%s | BakeCo',
default: 'BakeCo – Artisan Bread Recipes',
},
}Common Mistakes
<!-- ❌ Bad: Missing title entirely -->
<head>
<meta charset="UTF-8" />
<!-- no <title> -->
</head>
<!-- ✅ Good: Unique title per page -->
<head>
<title>Sourdough Starter Guide | BakeCo</title>
</head>
<!-- ❌ Bad: Same title on every page -->
<head>
<title>BakeCo</title> <!-- used on every page -->
</head>Exceptions
- Utility or intentionally noindex pages may keep minimal metadata when richer search presentation is not a goal.
- Template-driven pages can look repetitive in isolation; confirm the fully rendered production output before flagging duplication or omission.
- If a page is intentionally redirected or excluded from indexation, resolve that crawlability decision before treating metadata polish as the primary issue.
Verification
Automated Checks
- View page source and search for
<title> - Check SERP preview with a tool like SERP Simulator (opens in new tab)
- Use Google Search Console → Coverage → check for duplicate title warnings
Manual Checks
- Verify character count (aim for 50–60)
Use with AI
Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.
Check
Verify implementation
Check the <head> section for a <title> tag. Verify it is unique (not duplicated on other pages), between 10 and 60 characters, and contains the page's primary keyword.
Fix
Auto-fix issues
Add or update the <title> tag in <head>. Write a descriptive title of 50–60 characters that includes the primary keyword near the start and is unique across the site. Do not stuff keywords.
Explain
Learn more
The <title> tag appears as the clickable headline in search results and browser tabs. It is a primary on-page SEO factor—Google uses it to understand what the page is about and displays it to users deciding whether to click.
Review
Code review
Check the <head> for a <title> element. Verify: (1) exactly one <title> tag exists, (2) text content is between 10 and 60 characters, (3) the title is not identical to other pages' titles, (4) the primary keyword appears in the first half of the title, (5) the title is not empty or contains only a brand name.
