Page Title: Write a Descriptive Title for Every Page
Also called: title element, Document title, HTML title tag
Definition
The page title is the text in a page's <title> element. Browsers show it in the tab, screen readers announce it first when the page loads, and it should describe the page's topic or purpose.
The page title is the text inside the <title> element in a page's head. It appears in the browser tab, in bookmarks and in search results, and it is the first thing a screen reader announces when a page opens. A good page title answers "Where am I?" before anyone reads a single word of content.
What it means
WCAG 2.4.2 Page Titled (Level A, WCAG 2.2) says: "Web pages have titles that describe topic or purpose." Two things are needed: a title exists, and it says what the page is about. W3C's sufficient technique combines G88 (descriptive titles) with H25 (using the title element). Failure F25 covers titles that do not identify the content – "Untitled", "Home" on every page or a file name such as "page-2.html".
W3C lists who benefits: everyone who has to judge quickly whether a page is relevant, people with visual disabilities who tell open tabs apart by their title, and people with cognitive, memory or reading disabilities who recognize content by its name.
| Title | Verdict |
|---|---|
Garden chairs – Teak & Aluminium – Shopname |
Good – topic first, site name last |
Order confirmed – Shopname |
Good – describes the state of the page |
Shopname on every page |
Fails 2.4.2 – does not identify the content |
Untitled document / no title |
Fails 2.4.2 |
The page title works alongside the lang attribute in the same head section: one tells assistive technology what the page is about, the other which language to read it in.
Examples
<!-- Good: specific topic first, site name last -->
<head>
<title>Shipping times to Austria – Help | Shopname</title>
</head>
<!-- Good: update the title in a single-page app -->
<script>
document.title = 'Checkout – Step 2 of 3 | Shopname';
</script>
<!-- Bad: same generic title everywhere -->
<title>Shopname</title>Write a unique title for every page, put the specific topic first and the site name last, and reflect important states such as "Step 2 of 3" or "Search results for teak". Keep the main heading and the page title close in meaning.
Use the same title on every template, leave CMS defaults like "Untitled" or "New page", start every title with a long brand slogan, or stuff it with keywords that do not describe the page.
How to check page titles
Questions
What makes a good page title?
It names the specific topic or purpose of the page, starts with the most important words and ends with the site name. It is unique across the site and short enough to read in a browser tab.
Should the page title match the h1?
They do not have to be identical, but they should agree in meaning. The h1 introduces the content on the page, the title names the page in tabs, bookmarks and search results – see heading structure.
Is the page title the same as the SEO title?
In most cases yes – search engines usually show the content of the title element as the result headline. A descriptive title therefore helps accessibility and click-through at the same time.
Does every page need a different title?
WCAG asks that each title describes its page. Pages with different content therefore need different titles.
Related terms
Missing Lang Attribute: Error Explained and Fixed
A missing lang attribute means the html element of a page has no lang attribute, or an empty or invalid one. Browsers and screen readers then cannot tell which language the page is written in.
Read definition: Missing Lang Attribute: Error Explained and FixedScreen Reader: How It Reads Websites and What It Needs
A screen reader is assistive software that reads the content and controls of a screen aloud or outputs them on a braille display. It relies on the names, roles and states that a website exposes through the browser's accessibility tree.
Read definition: Screen Reader: How It Reads Websites and What It NeedsSkip Link: Jump Straight to the Main Content
A skip link is a link at the very top of a page that jumps to the main content, so keyboard and screen reader users do not have to pass the whole menu on every page. It is a sufficient technique for WCAG 2.4.1.
Read definition: Skip Link: Jump Straight to the Main ContentHeading Structure: Build a Clear Page Outline
Heading structure is the outline a page forms through its h1 to h6 elements. Each heading marks the start of a section, and its level shows where that section sits in the hierarchy.
Read definition: Heading Structure: Build a Clear Page Outline