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.

In brief

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.

A title placed outside head is a markup error. Browsers forgive it and may still show the text in the tab, but behaviour is unpredictable: different engines (Blink, WebKit, Gecko) handle such cases differently. Googlebot expects title inside head.

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.

HTML
<!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

PropertyRecommendationWhy it matters
Length50–60 characters (~600 px)Google truncates long titles in the snippet; too short wastes keyword real estate
LocationInside <head>, before </head>Outside head, browsers and bots handle the tag non-standardly
Count per pageOneA second title causes unpredictable browser and crawler behaviour
UniquenessUnique per URLDuplicate titles signal low quality; they reduce page relevance
Keyword positionAt the start (first 3–5 words)Earlier placement gives higher weight in SERP and faster scanning
BrandAt the end after a separatorSaves characters for the keyword; aids recognition on repeat impressions
Special charactersHTML entities (&amp;, &lt;, &gt;)Raw < and & break markup and can truncate the title in parsers
EmojisUse sparingly, not at the startGoogle 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.

HTML
<!-- 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.
A second title most often appears when a React / Next.js component and a CMS template both render their own version simultaneously. Check via DevTools → Elements → head and via Screaming Frog during a technical audit.

Substitution: what the browser sees vs what the search engine shows

There are two completely different situations often confused under the word "substitution":

SituationWho changes itLegalityWhat to do
Google rewrites the title in SERPGoogle automaticallyLegal — normal behaviourImprove the title: shorten it, remove stuffing, align with H1
Cloaking: different title for bot vs userThe site itself (intentional)Violates Google's guidelinesForbidden; 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.

Google rewrites title more often when it is: longer than 60 characters, keyword-stuffed, a duplicate of another page's title, or meaningfully different from the H1.

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.

Don't confuse cloaking with legitimate personalisation (showing a logged-in user's name in the title) — the latter is fine as long as it doesn't change the page's meaning for the bot.

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.

HTML
<!-- Correct: HTML entities for special characters -->
<title>Coffee &amp; Tea — Buy Online | Brand</title>
<title>Deal &lt;50% off&gt; on Electronics | Brand</title>

<!-- Incorrect: raw characters -->
<title>Coffee & Tea — Buy Online | Brand</title>
<title>Deal <50% off> on Electronics | Brand</title>
  • `&` → `&amp;` — required; an HTML parser may truncate the title at this character.
  • `<` → `&lt;` and `>` → `&gt;` — required; treated as opening/closing tags.
  • `"` → `&quot;` — 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.
Modern CMS platforms (WordPress, Shopify, Next.js) automatically escape special characters in title. Risk arises when manually generating HTML templates or inserting user-supplied data into the title without sanitisation — this is also a potential XSS vector.

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

1990s – 2000sThe primary relevance signal

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.

2012–2014The ~70-character standard

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 standard
August 2021Google starts rewriting titles at scale

Google 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 name
2022Ahrefs study: 58% of titles changed

A 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 rewritten
2024–2026AI Overviews and the title's new role

In 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

Aim for 50–60 characters or ~600 pixels (Google measures width in pixels). For Latin text 60 characters is a safe ceiling. Check actual display in a pixel-width tool or Search Console.
No, but they should describe the same topic. The title is brief and SERP-oriented; the H1 is the on-page reader heading. Word-for-word identity is unnecessary; a semantic mismatch invites Google to rewrite the title.
Yes. The better your title — precise, right length, no stuffing, aligned with H1 — the higher the probability Google will leave it unchanged. It is not a guarantee, but it is the best you can do.
Both matter but as different signals. The title signals the page topic to search, affecting indexing and CTR. The H1 is a structural heading for the reader and a secondary content signal. When they conflict, Google tends to trust the title as the "official" page name.
Technically no — the crawler will not index the page. Practically yes: the title appears in the browser, in bookmarks, and in history. Keep a readable title even on noindex pages.
Indirectly. Voice assistants most often read from the featured snippet, not the title. But a well-crafted title improves the chance of winning the snippet, which indirectly raises the likelihood of a voice citation.
Direct contacts

Discuss your project?

Share your goals and website context — I will suggest a practical next step.

Title tag — What is it?