Title Tags
Write title tags that describe the page and earn clicks in the SERP.
Syntax
<title>Primary Keyword - Benefit | Brand</title>The title tag is the clickable headline shown in search results and browser tabs. It is one of the most important on-page signals.
Best practices
- Keep it under about 60 characters so it is not truncated.
- Put the primary keyword near the front.
- Make every title unique across your site.
- Add your brand at the end, separated by a pipe or dash.
- Write for humans - it must earn the click.
Title tag vs H1
The title tag lives in the <head> and shows in the SERP. The <h1> is the on-page heading. They can differ, and often should.
Example
<head>
<title>Pour Over Coffee: A Beginner's Guide | SoundsCode</title>
</head>
<!-- Weak title (vague, no keyword): -->
<title>Home</title>When to use it
- An e-commerce site rewrites vague title tags like 'Product 123' to 'Waterproof Hiking Boots for Women - Free UK Delivery | Acme' and sees a 15% CTR lift.
- A blog adds the current year to evergreen article titles so they appear fresher in the SERP and regain lost click-through during annual content audits.
- A developer uses a CMS template to auto-generate unique title tags for 5 000 product pages from the product name, category, and brand fields.
More examples
Basic SEO title tag pattern
Leading with the primary keyword and including a value differentiator keeps the title within the display limit while maximising relevance and CTR signals.
<!-- Formula: Primary Keyword - Secondary Modifier | Brand (≤60 chars) -->
<head>
<title>Waterproof Hiking Boots for Women - Free UK Delivery | Acme</title>
</head>
<!-- Character count: 59 — within the ~60-char SERP display limit -->Dynamic title tag via template
Template-driven title tags ensure every page has a unique, keyword-rich title without manual editing across thousands of pages.
<!-- Jinja/Twig/Blade template for category pages -->
<title>
{{ category.name }} - Shop Online | Acme
</title>
<!-- Product page template -->
<title>
Buy {{ product.name }} - {{ product.color }} | {{ site.brand }}
</title>Audit title tag lengths with Python
Fetching and measuring title tags across key URLs quickly surfaces pages that are too long, too short, or missing entirely.
python3 - << 'EOF'
import requests
from bs4 import BeautifulSoup
urls = [
"https://example.com/",
"https://example.com/hiking-boots/",
"https://example.com/about/",
]
for url in urls:
r = requests.get(url, timeout=5)
title = BeautifulSoup(r.text, 'html.parser').title
t = title.string.strip() if title else "[MISSING]"
flag = "LONG" if len(t) > 60 else "OK"
print(f"[{flag}] {len(t):2}ch {t[:70]}")
EOF
Discussion