Skip to main content

Quick review checklist – page titles

Update Website Page Titles

Page titles are the beginning navigation markers of a website. They give users a top-level view of their current location both via the window of the browser, as well as the tabs. These titles are also used in search engines as the link title or are the default names for bookmarks. In terms of accessibility, they are the items that are first read by screen readers to tell users what specific page they are on.

Tabs showing page titles

Many times websites use page titles more like a table of contents in a book: first, the name of the website is presented and is then followed by the chapter title. Sometimes symbols are also used to divide name from the chapter, which can be aesthetically pleasing but can be cumbersome for users of screen readers due to the information bloating the title.

In some cases, site owners choose to use one title across the entirety of the website, which gives no indication of the user’s current location. This can be extremely confusing for users with multiple tabs open from the same website, as they are then forced to click through each one to find the page they are looking for.

Writing Page Titles

When developing page titles, it is best to imagine them as quick, front-loaded descriptions of the current page location. Below are some title examples:

Non-Accessible Titles

Welcome to Smith General Store’s Online Website
Smith General Store | About Us
Smith General Store | Learn More About Our Sales Team
Smith General Store | Contact Us
Smith General Store | Contact Us: Jane Smith


More Accessible Titles

Smith General Store Home Page
About Smith General Store
Sales Team of Smith General Store
Contact Smith General Store
Jane Davis of Smith General Store

 

How to Update Titles in HTML

Title tags are generally found towards the top of each coded page after the tag, but before the tag. Only text and symbols can be used within the <title> tag.

<html>
<head>
<title>Smith General Store Home Page</title>
</head>