Page title must be non-empty, unique
Last updated:
Related Guides
Page title must not be missing or empty on any page
Every HTML document needs a non-empty, descriptive title element. The title is announced first by screen readers, labels the browser tab, and often appears in search results. Missing, empty, or duplicated titles make pages hard to identify.
Why It Matters
Screen reader users depend on page titles to understand where they are and whether a page is the right destination. If a title is missing or vague, they must explore the page to guess its purpose.
People who use many tabs, have memory or attention limitations, or return via history also rely on clear titles to recognize the correct page. Distinct titles reduce confusion and speed navigation.
Search engines and shared links often surface the title. Informative titles improve findability and context for everyone.
Common Causes
- No
<title>element in the<head>. - An empty or placeholder title (e.g., "Untitled", "Home").
- Reusing the same title across many pages.
- Putting only the site name in the title with no page-specific info.
- Very long titles that bury the important words or get truncated.
- Single-page apps that do not update document.title on route changes.
How to Fix
- Add exactly one
<title>element inside the<head>of every HTML document. - Write concise, descriptive, page-specific text. Recommendation: front-load key words; keep roughly 30–60 characters when possible.
- Make each title unique across the site. Use the page’s primary purpose or content as the lead.
- Place the brand or site name at the end, separated by a dash or pipe.
- Avoid placeholders, emojis, ASCII art, all caps, or keyword stuffing.
- For templates and CMSs, generate titles from page data (e.g., post title, product name, section) and ensure no duplicates.
- For SPAs, update document.title on every route change using your router or a head manager.
- Localize titles for translated pages so users hear/see them in their language.
How to Test
- Visual/browser check:
- Inspect the tab label and window title. Confirm it clearly describes the current page.
- View source or use dev tools to verify there is exactly one
<title>inside<head>and it is not empty or whitespace. - Navigate across several pages and confirm each has a distinct title.
- Screen reader check:
- Load the page; confirm the title is announced on load.
- Use your screen reader’s command to read the window/page title; verify it is meaningful and matches the page content.
- Move between pages (or SPA routes) and ensure the announced title updates.
- Mobile/touch check:
- Open the page on iOS/Android; check the tab/app switcher and share previews for the title.
- With VoiceOver or TalkBack on, load the page and confirm a clear title is spoken.
Good Example
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Order History — Account | Acme Tools</title>
</head>
<body>
<h1>Order History</h1>
<!-- Page content -->
</body>
</html>Bad Example
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Missing or empty title -->
<title></title>
</head>
<body>
<h1>Welcome</h1>
<!-- Same "Home | Acme Tools" used across the whole site would also be a failure. -->
</body>
</html>Quick Checklist
- One non-empty
<title>in the<head>of every page. - Title is concise, descriptive, and page-specific.
- Important words first; brand or site name last.
- Unique across pages; no placeholders or duplicates.
- Updates correctly on SPA route changes.
- Avoid noise (emojis, all caps, keyword stuffing).
- Localized for translated content.
- Manually verified with a screen reader and dev tools.