How to fix a page with no title, or an empty one?

document-title page

The issue

The title is the first thing a screen reader announces when a page opens, and the name of the page in every tab, bookmark and history list. Without one, a person switching between tabs hears a URL or nothing, and can’t tell which open page is which without going in. Search results usually show the same title as the page’s headline.

The cause is a <title> element that is missing from <head> or empty. It happens when a template renders the title from a field the page left blank, or when a single-page app sets it only after load. WCAG 2.4.2 requires every page to have a title that describes its topic or purpose.

Scope

One check per page: is there a <title> inside <head> with text in it? A title that is missing, empty or only whitespace is reported. A <title> outside <head>, such as one inside an SVG, doesn’t count.

How to check you have it

In probeo: the page reports document-title, “Documents must have <title> element to aid in navigation”, with serious impact. It maps to WCAG 2.4.2.
By hand: look at the browser tab. If it shows the URL, the page has no usable title. View the source and check <head> for a <title> with text.
With a tool: axe DevTools and Lighthouse’s accessibility audit both report a missing title.

The fix

Give every page a <title> in its <head> that says what the page is.

Lead with what is specific to the page, then the site name: “Pricing | probeo”, not “probeo | Pricing”. Each page’s title should differ from the others, so a list of open tabs or a history reads as a list of different pages.

<head>
  <title>Return policy | Example Store</title>
</head>

Set it in the template from a required field, so a page can’t publish without one. In a single-page app, set document.title on every route change.

Done when: every page has a non-empty, descriptive title in <head>, and the check above comes back clean.

Do not

Do not use the same title on every page.
Do not use the file name or URL as the title.
Do not rely on an <h1> to stand in for the title; they serve different places.

FAQ

Does this rule check whether the title is good?

No. It checks that a title exists and isn’t empty. Whether it describes the page is a judgment, and the Technical SEO title check adds length and duplicate-of-H1 checks.

Our app sets the title with JavaScript. Will probeo see it?

Probeo checks the page as it captures it after rendering. A title set during the initial render is there; one set much later, after a user action, may not be.

Should the title match the H1?

They should agree on what the page is, but they needn’t be identical. The title has to make sense out of context, in a tab or a search result; the H1 sits on the page itself.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.