Skip to content
Wiki
Page Navigation
Page Title

Page Title

Web pages have titles that describe topic or purpose.

WCAG 2.4.2 (opens in a new tab)

Web pages need to have appropriate titles that describe the page. This is useful for screen reader users navigating between tabs, for power users picking out the relevant tab at a glance, and for everyday users being given useful default bookmark names or page history landmarks.

Having a default title like "Create Next App" or "App Name" may not seem like much of an issue, but a useful title can make a big difference to the user experience by ensuring they're on the right page and can find it again later.

Way to fix

A page should have a title element in the head of the document that should likely differ per page as they will likely perform different functions.

Adding a title

Adding a title tag is the simplest way to add a title, however many frameworks may not allow such a simple change.

  <html>
    <head>
      <title>Home Page - App Name</title>
    </head>
  </html>

In a Single Page App, or similar frameworks, the title may need to be updated dynamically. This can be done using JavaScript to update the document.title property. Whether that's through a react hook, or some other one-off function, it's important to ensure the title is updated to match the page.

  document.title = "Home Page - App Name";

Include the app name

A title like the above, Home Page - App Name describes the page and the app it belongs to. This is useful for users who may have multiple tabs open from different apps.

For example, if a user had eBay and Amazon open on the "Your Orders" page, they wouldn't be able to discern one from the other if both titles were just "Your Orders". However, if the titles were "Your Orders - eBay" and "Your Orders - Amazon", it would be easy to tell which tab belonged to which app.

References