# Page Title: Write a Descriptive Title for Every Page

Source: https://allyway.ai/glossary/page-title

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](https://allyway.ai/glossary/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](https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html) (Level A, [WCAG 2.2](https://allyway.ai/regulations/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 |

> **Note:** > **Single-page apps**
> W3C notes that when a single-page application changes views without a new address, the title should update to match the current view. Many frameworks keep the first title for every route unless you set it.

The page title works alongside the [lang attribute](https://allyway.ai/glossary/missing-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

```html title="Example"
<!-- 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>
```

**Do:** Do

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.

**Don't:** Don't

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

Q: What makes a good page title?
A: 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.

Q: Should the page title match the h1?
A: 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](https://allyway.ai/glossary/heading-structure).

Q: Is the page title the same as the SEO title?
A: 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.

Q: Does every page need a different title?
A: WCAG asks that each title describes its page. Pages with different content therefore need different titles.