G4.09.4document title should match the in-page headingdesignresearch

The document title should match the in-page heading, or people suspect the wrong page

Aliases: title matches H1 · wrong-page suspicion · heading contract

What it is

The name on the tab and the largest line on the page should be the same object. document.title and the H1 need not be a verbatim copy, but the conceptual core must be: this invoice, this guide, this step. If each says something else, people infer a wrong-page jump, or that the tab is still on the previous document. Consistency protects “I arrived at the page the tab promised.”

Why it happens

A jump is a prediction test. Link copy and the tab title form an expectation; the H1 is the check on landing. If expectation and H1 disagree, the check fails, and even a correct URL gets a Back and a second click. Screen-reader users have it harder: they use title to judge which page they entered, then the first heading to confirm; two names force them to listen through the page to rule out “wrong page.” A common SPA split is a shell title still on the previous route while the H1 already shows the new object; or SEO wrote a marketing title and design wrote a product H1.

Surface differences are allowed: a brand suffix on the title, dropping “settings” from the H1. Object changes are not (title says order, H1 says return), nor are task changes (title says edit, H1 says preview). People have no lookup table; they judge “does this look like those words I just saw,” and mismatch becomes suspicion.

Studying it

Run title-predict-then-see-H1: given only document.title, people write the expected object, then see the in-page H1 and say whether it is the wrong page.

  • Independent variables: relation of title to H1 (same object, different wording / different objects / identical strings), whether a brand suffix is present.
  • Dependent variables: rate of “wrong page,” Back-and-retry, whether screen-reader users stop at the heading layer.
  • Methodological note: a heavily marketed title makes people expect an ad; if the H1 is a tool page, the failure is object class, not wording. Do not score agreement as string edit distance—score whether object identity is the same. Deep-link arrival has no link copy; title and H1 are the only pair to check, so that path must be included.

Where it stops holding

A list page whose H1 is “All orders” and whose title includes the current filter “Unshipped orders” is a qualification of the same object, not a split. On multilingual sites, title and H1 may each follow an unsynced translation; the inconsistency is in the translation pipeline. An app chrome that puts the product name in the title and the workspace name in the H1 needs people to learn two layers; it cannot pretend they are one line.

Applying it

  • Generate title and H1 from the same page identity: same object name, same task name. The title may add only a brand or a very short status.
  • Change both together on route change; the title must not lag by a beat.
  • Verify: enter the same page from search, from an in-site link, and from a deep link. Compare the tab name and the H1. Someone uninvolved should immediately take them as the same object. As a counter-example, leave the title on the previous page’s name; landing should produce Back—that is wrong-page suspicion.

Related

  • Within the group: G4.09.1 The document title should name this page, not repeat the site name · G4.09.2 The title is how tabs, history, and bookmarks recognize a page · G4.09.3 Duplicate titles make same-site tabs impossible to tell apart · G4.09.5 Dynamic titles must not jitter so hard they break tab scanning
  • Adjacent: T2.02 Predictability of headings and labels · T2.02.3 A label must match the destination page’s title · G4.02 Deep linking
  • Search terms: title heading match · document.title · H1

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/G4.09.4