Understanding Page Titles
The HTML <title> element gives a webpage its document title and provides important information to browsers, visitors, and search engines.
A well-written title clearly identifies the subject of a page and distinguishes it from other pages on the website. Search engines can also use the title when creating search results, making it an important part of both HTML and search engine optimization.
The <title> Element
The <title> element belongs inside the document's <head> and contains the title of the webpage.
<head>
<title>Growing Tomatoes - Beginner Gardening Guide</title>
</head>Every HTML document should contain a <title> element. Unlike an <h1> heading, the title is not normally displayed as part of the visible webpage content.
Where Page Titles Appear
Browsers commonly use the document title in browser tabs, window titles, bookmarks, history, and other parts of the browser interface. This makes the title useful even before SEO is considered.
Search engines can also use the HTML title as one source when generating the title link displayed for a search result.
A descriptive title therefore helps visitors identify the page whether they encounter it in a browser tab, bookmark, browser history, or search result.
Write Descriptive Titles
A page title should describe the page's primary subject clearly and concisely. Someone reading the title should have a reasonable idea of what the page contains before opening it.
A vague title provides little information:
<title>Information</title>A more descriptive title identifies the actual subject:
<title>How to Grow Tomatoes in Containers</title>Avoid adding words merely to make a title longer. Every part of the title should help identify the page or provide useful context.
Use a Unique Title for Each Page
Different pages should generally have titles that describe their individual content. Repeating the same generic title across an entire website makes pages more difficult to distinguish.
For example, a gardening website might use:
<title>Growing Tomatoes - Gardening Guide</title>
<title>Growing Peppers - Gardening Guide</title>
<title>Growing Cucumbers - Gardening Guide</title>The common wording identifies the broader website or section, while the beginning of each title identifies the specific page.
Title and H1
The document <title> and the page's main <h1> heading serve related but different purposes. The title identifies the document outside the visible page content, while the heading identifies the main content to someone viewing the page.
<head>
<title>Growing Tomatoes - Beginner Gardening Guide</title>
</head>
<body>
<main>
<h1>Growing Tomatoes</h1>
</main>
</body>The two do not need to be identical. The page title can include additional context such as a category, location, or site name while the visible heading remains natural and concise.
They should, however, describe the same page. A title that suggests one subject while the main heading and content discuss something different can confuse visitors and search engines.
Use Relevant Words Naturally
Use words in the title that accurately describe the page and that visitors would reasonably use to identify its subject. Important descriptive wording is often most useful near the beginning of the title.
<title>Tomato Plant Care - Watering, Feeding and Support</title>Do not repeatedly insert variations of the same keyword in an attempt to influence search rankings.
<title>Tomatoes, Tomato Plants, Growing Tomatoes, Tomato Growing Tips</title>Titles written naturally for people are easier to understand and more accurately represent the content of the page.
Adding a Site or Business Name
A site, organization, or business name can be included in a page title when it provides useful context. It is commonly placed after the page-specific portion of the title.
<title>Growing Tomatoes - Example Garden Center</title>For many internal pages, placing the specific page subject first makes it easier to distinguish multiple browser tabs and quickly identify the important part of a search result.
Avoid repeating a long site name or promotional phrase when it overwhelms the information that actually distinguishes one page from another.
Page Title Length
There is no single HTML character limit that determines whether a page title is valid, and search engines do not provide a universal character count that guarantees a title will be displayed in full.
Search-result titles are displayed within limited space and can be shortened depending on the device, query, characters used, and how the search engine presents the result. For this reason, concise titles are generally easier to scan than unnecessarily long ones.
Put the most useful identifying information early and remove wording that does not add meaningful context. Do not shorten a clear title simply to reach an arbitrary character count.
Titles in Search Results
The HTML <title> element is an important source search engines can use when creating a search-result title, but it does not completely control what appears.
A search engine may generate different title text when it determines that other page content better identifies the result. Information used can include the main visual title, headings, prominent text, anchor text from links, and other page signals.
This means changing the HTML title does not guarantee that exactly the same wording will appear in every search result. The best approach is to provide a clear title and make sure the visible page content consistently represents the same subject.
Common Page Title Mistakes
| Mistake | Better Approach |
|---|---|
Missing <title> |
Give every important HTML page a descriptive document title. |
Generic titles such as Home or Page 1 |
Describe the page's actual subject or purpose. |
| Same title on many pages | Write titles that distinguish individual pages. |
| Repeated keywords | Use descriptive words naturally and avoid unnecessary repetition. |
| Very long titles | Keep the identifying information concise and useful. |
| Title does not match the page | Make sure the title accurately represents the visible content. |
Page Title Examples
The following examples show how titles can identify different pages while maintaining a consistent style across a website.
| Page | Example Title |
|---|---|
| Tomato Guide | Growing Tomatoes - Beginner Gardening Guide |
| Watering Guide | How to Water Vegetable Plants - Gardening Guide |
| Container Gardening | Container Gardening for Beginners - Gardening Guide |
| Garden Tools | Essential Garden Tools - Beginner Gardening Guide |
The exact wording will depend on the page and website. Consistency is useful, but each title should still clearly identify the individual page.
Best Practices
- Include a
<title>element in every HTML document. - Write a title that accurately describes the page's primary content.
- Give different pages descriptive titles that distinguish them from one another.
- Place important identifying information early in the title.
- Use relevant words naturally instead of repeating keywords.
- Include a site or business name when it adds useful context.
- Keep titles concise enough to be easily read and understood.
- Do not rely on an arbitrary character count as the only measure of a good title.
- Make sure the title, main heading, and visible content describe the same subject.
- Remember that search engines may display title text different from the HTML
<title>.
Summary
The HTML <title> element identifies a webpage and can appear in browser tabs, bookmarks, history, and search results. A useful page title is descriptive, concise, relevant to the visible content, and distinct enough to identify the page among other pages on the website.
Page titles are an important part of SEO, but they should be written primarily to communicate clearly rather than to manipulate rankings. The next tutorial looks at another important part of the document <head>: the meta description.