Title tag
The HTML element that sets the page name in browser tabs and search results. One of the few tags read by both humans and crawlers — and each may see a different version.
The <title> tag sits inside <head> and holds the page's text name. Browsers display it in the tab and history; search engines show it as the clickable snippet link. Google may replace your title with more relevant text taken from the H1 or page body.
Where does the title tag live
The title tag must be placed inside the head element — in the document's metadata section, before the body opens. It is not a visible on-page heading: users never see it in the page body, only in the browser tab, in bookmarks, and in search results.
How it looks in code
A minimal valid HTML document with a title is shown below. The tag has no attributes — just an opening tag, text, and closing tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Buy Laptop in Kyiv — 2026 Catalogue | Brand</title>
<meta name="description" content="Wide selection of laptops...">
</head>
<body>
<!-- visible page content -->
</body>
</html>Typical pattern: Primary keyword — qualifier | Brand. The separator between the keyword and brand is a pipe `|`, em dash `—`, or colon. The choice affects visual weight, not rankings.
Title tag properties
| Property | Recommendation | Why it matters |
|---|---|---|
| Length | 50–60 characters (~600 px) | Google truncates long titles in the snippet; too short wastes keyword real estate |
| Location | Inside <head>, before </head> | Outside head, browsers and bots handle the tag non-standardly |
| Count per page | One | A second title causes unpredictable browser and crawler behaviour |
| Uniqueness | Unique per URL | Duplicate titles signal low quality; they reduce page relevance |
| Keyword position | At the start (first 3–5 words) | Earlier placement gives higher weight in SERP and faster scanning |
| Brand | At the end after a separator | Saves characters for the keyword; aids recognition on repeat impressions |
| Special characters | HTML entities (&, <, >) | Raw < and & break markup and can truncate the title in parsers |
| Emojis | Use sparingly, not at the start | Google often strips emojis from the displayed title in SERP |
What happens with two title tags
The HTML specification allows only one title. If a page has two, it is a bug — usually caused by a templating engine conflict or a plugin injecting its own tag.
<!-- Bad: two title tags — markup error -->
<head>
<title>First title — CMS template</title>
<!-- ... other tags ... -->
<title>Second title — injected by plugin</title>
</head>What happens in practice:
- Chrome, Firefox, Safari — use the first title encountered and ignore the second.
- Googlebot — documentation says it uses the first; in practice, behaviour depends on the render pipeline version.
- HTML validators — flag an error; W3C treats this as a specification violation.
- SEO audit tools — report it as a duplicate or multiple title issue.
- Result: either variant can appear in search results, or Google may rewrite the title entirely.
Substitution: what the browser sees vs what the search engine shows
There are two completely different situations often confused under the word "substitution":
| Situation | Who changes it | Legality | What to do |
|---|---|---|---|
| Google rewrites the title in SERP | Google automatically | Legal — normal behaviour | Improve the title: shorten it, remove stuffing, align with H1 |
| Cloaking: different title for bot vs user | The site itself (intentional) | Violates Google's guidelines | Forbidden; risks manual penalties |
Situation 1 — Google rewrites your title. Since August 2021, Google officially started replacing title links more frequently. The replacement source is the H1, visible page text, or anchor text of incoming links. The user sees your original title in the browser tab; in Google they may see something different.
Situation 2 — cloaking. Deliberately serving one title to the search bot and a different one to human visitors is a violation of Google's guidelines (cloaking). Implementation methods: user-agent detection on the server or JavaScript replacement. Google identifies cloaking through manual reviewers and algorithmic signals. Outcome: manual action or complete removal from the index.
Escaping and emojis
The title tag holds plain text, but some characters must be escaped with HTML entities — otherwise the parser may misinterpret the markup.
<!-- Correct: HTML entities for special characters -->
<title>Coffee & Tea — Buy Online | Brand</title>
<title>Deal <50% off> on Electronics | Brand</title>
<!-- Incorrect: raw characters -->
<title>Coffee & Tea — Buy Online | Brand</title>
<title>Deal <50% off> on Electronics | Brand</title>- `&` → `&` — required; an HTML parser may truncate the title at this character.
- `<` → `<` and `>` → `>` — required; treated as opening/closing tags.
- `"` → `"` — not required inside title but recommended when generating programmatically.
- Typographic quotes "" and dashes are safe and need no escaping.
- Emojis are technically valid: `<title>🚀 SEO Course | Brand</title>` is valid HTML.
Emojis in title: what works and what doesn't.
- Browsers display emojis in the tab without issue.
- Google frequently strips emojis from the title link in SERP — especially when the emoji is at the start.
- Emojis take multiple bytes (UTF-8), but Google measures title width in pixels (~600 px), so a single emoji mid-title barely dents the useful character budget.
- Bing and Yandex are more tolerant of emojis in their results pages than Google.
- Best practice: test via Google Rich Results Test or monitor how your title actually appears in Search Console.
SEO rules
- 50–60 characters in length. Google shows ~600 px. Uppercase and wide glyphs (W, M) consume more space; narrow ones (i, l) less. For Latin text, 60 characters is a safe ceiling.
- Keyword first. Place the target query in the first 3–5 words. Earlier placement gives more weight and improves scannability.
- One unique title per URL. Duplicate titles are a sign of unindividualised template generation; any technical audit will flag them.
- Align with H1. Title and H1 need not be identical, but they must describe the same topic. Meaning mismatches invite Google to rewrite.
- No keyword stuffing. "Buy laptop Kyiv, laptop buy, laptops Kyiv" — classic stuffing. One to two keywords, then qualifier and brand.
- Brand at the end. Exception: the homepage, where the brand can lead if it is the search query itself.
- Numbers boost CTR. "Top 10 Laptops 2026" gets more clicks than "Best Laptops".
- Avoid ALLCAPS and repeated separators. `laptop | laptops | buy | Kyiv | 2026` — Google will rewrite it.
How Google's treatment of title evolved
Early search engines (AltaVista, early Google) gave the title enormous weight: matching a query in the title almost guaranteed a top position. This was the era of keyword stuffing in page titles.
Google expanded the snippet: up to ~70 characters showed without truncation. SEO recommendations synchronised to the new limit. The Penguin algorithm began combating stuffing in titles.
≤70 characters — the era standardGoogle officially announced: the system would generate title links from H1, visible headings, or other page text when judged more accurate. The SEO community responded with a wave of experiments and complaints.
~87% of rewrites used the site nameA large-scale top-10 analysis showed more than half of titles in search results differ from the original. The most rewritten are titles that are too long, stuffed with keywords, or misaligned with the H1.
58% of top-10 titles rewrittenIn AI Overviews, Google synthesises an answer before the click. The title still influences which URL is selected as a source, but traditional CTR is declining — users get the answer before clicking. Title is becoming a trust signal, not just a click prompt.
Checklist
- Title is inside `<head>`, one per page.
- 50–60 characters long (use a pixel counter for accuracy).
- Primary keyword is the first or second word.
- Title is unique — no duplicates across other site URLs.
- Meaning aligns with H1 — mismatches invite Google to rewrite.
- Special characters `&`, `<`, `>` are replaced with HTML entities.
- No keyword stuffing: the target phrase appears once.
- Brand at the end after `|` or `—`.
- Emojis verified in Search Console or Rich Results Test.
Common questions
Discuss your project?
Share your goals and website context — I will suggest a practical next step.