Sep 12, 2024

Mastering `<title>` Tags: The Ultimate Guide for SEO and Usability

A comprehensive guide to optimizing the most crucial tag for SEO success and a good user experience

Christian Charukiewicz Founder & CEO at Cloudtrellis

The <title> tag is one of the most essential HTML elements on any web page, as it defines the page title displayed in the browser's tab, search engine results, and social media link previews. For users, it aids in navigating between tabs and understanding a page's purpose. For search engines, it serves as a critical factor in how your page is indexed and ranked. A well-written <title> tag not only boosts your SEO performance but also enhances accessibility and improves click-through rates from search results.

In this guide, we’ll explore the best practices for creating effective, SEO-optimized, and accessibility-friendly <title> tags. We'll also take a look at common mistakes in title tags as well as tools to assist us with optimizing the title tags on our website.

Where exactly does the `<title>` tag go on a page?

The basic HTML format for a title tag is:

<title>The title of your page</title>

The <title> tag should always be placed within the <head> section of your HTML document. Here's an example of correct placement:

<!DOCTYPE html>
<html>
	<head>
	    <title>Your Page Title | Your Brand Name</title>
	    <!-- Other meta tags, scripts, and stylesheets -->
	</head>
	<body>
	    <!-- Your page content -->
	</body>
</html>

The <title> tag typically has no attributes, and must only contain text. Putting other tags inside the <title> tag will result in them getting treated as text and displayed as part of the title (e.g. "<b>My page title").

Best practices for `<title>` tags

There are a few key aspects that all good web page titles will have:

Titles should accurately describe what's on the page
Titles should be readable
Titles should be short
Titles should be unique across all pages on your site

A title that hits on all of the above will be maximally useful to users, be helpful to search engines, and create relevant inbound traffic when it is seen by the correct audience.

Title formats

The general format for page titles is typically the following

Primary key words | Secondary key words | Brand name

Example: Request a demo | Website error checker | Cloudtrellis

The above is something you might see on an ecommerce site or other commercial site that seeks strives for search engine optimization. Another, simpler format, used by blogs, magazines, newspapers, and other publications is:

Article title | Brand name

Example: The ultimate guide to <title> tags | Cloudtrellis Blog

Sometimes the brand name can come at the beginning of the <title> tag content, but this is generally used only for the home page of a website:

Brand name: Description of the brand/service/product

Example: Cloudtrellis: Website error scanner & monitoring tool

Putting the name of the brand first is not recommended for most pages on a given site. This is extremely valuable space, and it's not the most important part of a page for anything but the home page on a given site.

Separator characters

Title tags should have a separator that delineates the sections of the title. Typically, characters like the pipe (|), the em dash (—), or the bullet (·) are used to separate the title of the individual page and the brand name. In the final example above, a colon (:) is used to separate the brand name from the title, but as mentioned, this is a special case where the brand name comes first for only the home page of the site.

Which separator character you choose isn't particularly important, but it should be consistent across all pages of the site. Do not switch from Page title | Brand name to Page title — Brand name across pages.

Capitalization styles

While search engines aren't sensitive to capitalization, a consistent style can improve readability. Common approaches include:

Title case: "How to Find and Fix SEO Issues With Cloudtrellis"
Sentence case: "How to find and fix SEO issues with Cloudtrellis"

As with separator characters, using a consistent style across your whole site is important. Moreover, readability should be a consideration, and typically sentence case will be more readable than title case, especially for titles with more than just a few words.

Length limitations of `<title>` tags

Keep in mind, that while your <title> tag can be any length, there's a practical limit of only about 60 characters that users will be able to read in most contexts where your page's title is likely to appear.

Browser tabs - browsers will display the page title from the <title> tag when users open that page in a tab. However, typically only about 30 characters are displayed in in the at-a-glance view of the tab, and in desktop browsers, that number increases to about 60 characters when the user hovers their mouse over the tab. What is displayed in the at-a-glance view is likely to decrease even further when the user has many tabs open (tab hoarders may see as few as zero characters of the page title once they have dozens or hundreds of tabs open), as well as in certain contexts on mobile browsers (where as few as 13 characters are displayed).

Search engine result pages (SERPs) - SERPS will only display about 60 characters of the title. Unlike with browser tabs, there's no expansion at all when hovering over the search result text.

Social media / instant messaging - Various social media and instant messaging platforms will display page titles if the page URL is included in the text of the post or message content. This is one of the few places where the 60 character limit may not be imposed, as many platforms will display 100 or more characters of the title¹.

The table below shows the approximate lengths of characters displayed in a page title various locations at the time of writing of this article.

Title display location	Approximate length displayed
Browser tab, no hover	30 characters
Browser tab, hover (Chrome)	60 characters
Browser tab, hover (Firefox)	No limit
Search engines	60 characters
Facebook	100 characters
Linkedin	150 characters
Twitter	80 characters

How a good title should be written

The content of a title tag should prioritize for relevance and readability. This means that it should first and foremost describe the contents of the page in a manner that maximizes ease-of-reading and understanding. Titles do not need to be boring, and can certainly seek to pique a viewer's interest (e.g. "Here's what everyone gets wrong about <title> tags"), but they should never be misleading.

While SEO is not a concern for every type of web page—for example: content that is visible only after users login does not typically need to be optimized for search engines—when SEO is a priority it should be balanced against the two aforementioned points of relevance and readability. There are numerous techniques page authors will employ in attempt to optimize a title for SEO purposes, but this harms relevance and readability. Moreover, these SEO anti-patterns such as keyword stuffing (which we'll discuss below), can are usually incorporated into search engine heuristics as indications of a spammy or low quality web page.

Harmony with other tags

Although the <title> tag is arguably the most important HTML element on the page, its content must be considered in relation to several other types of tags on the page. The title tag will typically reflect the main title of the page found in the <h1> tag at the top of the page². While there need not be a match between these two tags, the tone and general content should be identical. Do not make your <title> "The ultimate guide to SEO" while making your <h1> be "How to apply SEO techniques to your site"—the content is similar but the tone is completely different. This will be a jarring experience for users and could adversely impact SEO.

Another tag that should be considered is the meta description tag, which is defined in the <head> of the page and whose content is displayed in search engine results and social media embeddings of the link to the page. The title and description should always compliment one another. Here's an example:

<head>
	<title>Cloudtrellis: Website error scanner & monitoring tool</title>
	<meta name="description" content="Cloudtrellis scans your entire site for broken links, accessibility issues, and SEO improvements to ensure a flawless user experience.">
</head>

The description never be identical or extremely similar to the <title> tag. This will not help SEO (search engines are likely to ignore the duplication) and will look silly and redundant if seen by a user in a social media embedding.

Accessibility considerations

Another reason that <title> tags should be concise and accurate is their significant role in accessibility. For users with screen readers, the <title> tag provides a crucial first impression of the page. When the page loads, the <title> tag is typically the first element announced by the screen reader. For example, a screen reader might say "Contact us | Cloudtrellis". If the title tag is omitted, inaccurate, excessively long, or stuffed with redundant keywords, it can lead to confusion or frustration for users.

Beyond the initial page visit, the page title is also read aloud as users navigate between browser tabs or switch between windows. Additionally, it’s usually the text read by screen readers when users browse search engine result pages.

Common mistakes in `<title>` tags

1. Duplicate `<title>` tags across several pages

Each title on your website should be unique relative to all the other titles. This benefits both usability and search engine indexing. It's fairly easy to set unique titles when using a content management system like WordPress, or an ecommerce tool such as Shopify—the title displayed at the top of the page body (what should be an <h1> tag, as previously discussed) is usually also the title set in the <title> tag, so remembering to set one automatically sets the other.

However, a common mistake that people creating their own website make when creating their own HTML templates is forgetting to set unique titles even if the tags in the body are unique. What often happens is a <title>Brand name</title> gets set as the default value and then titles for individual pages do not get set. Both your users and your SEO performance will suffer if you make this mistake.

2. Omitting the title tag

Similar to duplicating title tags, omitting the title tag entirely harms both your users and your SEO. When a user is on a page without any <title> tag at all, the browser will typically display the website domain and path (e.g. https://www.cloudtrellis.com/about gets displayed as "cloudtrellis.com/about"). This is a browser's attempt to compensate for the lack of a title, but this should always be avoided.

3. Keyword stuffing

Keyword stuffing is placing as many SEO keywords as possible in a title in an attempt to get search engines to favor your page for more search than if you omitted the extra words. For example, instead of "Cloudtrellis: Website error scanner & monitoring tool", we made our home page "Cloudtrellis: Website error scanner | monitoring tool | website error checker | HTML checker | website health check", that would be keyword stuffing, even if all of the various phrases were technically relevant to the page.

The problem is that first and foremost, this looks spammy and harms the readability of your title. A title like the one above is a great way to lose your credibility as a respectable business, product, or publication. The other problem is that this doesn't work reliably. Search engines typically have heuristics that detect keyword stuffing and will either ignore the extra keywords or even penalize you, potentially putting you in a worse position than if you hadn't stuffed the keywords to begin with.

4. Putting the brand name first on anything but the home page

As discussed earlier in this article, the home page is a potential candidate to put the name of your brand as the first word in the title. For other pages, this almost never makes sense. The most relevant thing about the page to the user is a description of what the page is, not the brand. This is true for your "About us" page, contact pages, product pages, documentation, blogs, articles, and every other page. On every single one of these types of pages there is a term or phrase that more accurately describes the contents of the page than merely your brand name, so don't put your brand name first.

5. Titles that are incongruous with page content

Titles should always reflect what's on the page. We've already discussed the importance of relevance when it comes to titles. One issue related to this is when a page is copied as the starting point for a new page. For example, you might copy your "About us" page as a starting point for your "Pricing" page. Typically when this happens, you immediately start working on the main content of the page, forgetting to update the title. When published, you now have two "About us" pages, one that talks about your organization and another that talks about your pricing. Not only is this a case of duplicate titles, you're now also confusing both users and search engines in the case of the latter page.

Advanced `<title>` tag strategies

There are several advanced techniques employed surrounding <title> tags that are worth mentioning in this article. These are either specializes uses that require either more sophisticated code or other instrumentation to employ.

Dynamic `<title>` tags

Many web applications will dynamically change the page title based on some sort of data on the page changing. This is most commonly used as an indicator of unread messages or notifications, to draw the user's attention to the new content.

Setting a title tag dynamically requires JavaScript. To simply change the title requires only a single line of code:

document.title = "New title of the page"

A more sophisticated approach would be setting the title based on a number of unread messages:

const originalDocumentTitle = document.title;

function setUnreadMessageCount(count) {
	if (count == 0) {
		document.title = originalDocumentTitle;
	} else {
		document.title = `(${count}) ${originalDocumentTitle}`
	}
}

The above code is reading the original title of the page when it loads and saving that off in an immutable variable originalDocumentTitle. It then defines a function (setUnreadMessageCount) that takes a number. When the number is zero, it resets the title to the original title. Otherwise, it'll prefix the original title with the provided count in parentheses.

This code is only responsible for setting the title. What is beyond the scope of this article is the additional code required to dynamically receive messages from a server, or to determine how many unread messages there actually are on the page after the user begins reading them.

A/B testing

Another technique related to page titles is A/B testing, also known more generally as "split testing". This requires instrumenting your website to serve and measure different versions of pages titles to different segments of users, and then tracking what proportion of each segment achieves some sort of conversion goal (be it press a button, buy a product, etc.)

There's a large number of A/B testing services available, and A/B testing is a complex topic that can be employed in far more than page titles. What's unique about A/B testing page titles, however, is that if done incorrectly, doing so can harm your search engine rankings and page indexing. Special care needs to be given when A/B testing of titles is to be employed, such as ensuring that search engines are always served a single canonical title, even if different groups of users see variations in the <title> and <h1> tags on a page.

Tools for improving `<title>` tags

There are many tools available to improve the quality of your page titles. We'll walk through several options here.

Google Search Console

Google Search Console (GSC) is a tool that website owners can set up to monitor their performance in Google Search. This is a useful tool that virtually every website operator that cares about search engine performance should consider using.

Pros and cons of Google Search Console

(pro) GSC shows you the top performing search queries for your site under the "Performance" tab, allowing you to consider search terms when writing titles
(pro) GSC allows you to submit pages for indexing or reindexing, so when you update your page titles, which can lead to faster updates in search results
(pro) GSC is free to use
(neutral) GSC doesn't do much for inspecting the actual content of your page titles, so you'll probably want to use another tool in tandem
(con) Data in GSC appears to be sampled, so it's hard to trust that it is completely accurate
(con) Changes take a long time to get reflected, both in terms of data displayed and pages submitted for reindexing

Lighthouse (Google Chrome)

Lighthouse is an open source tool that ships built into the dev tools of Chromium based browsers (which includes Google Chrome, Brave, Edge, and others). This is a powerful tool to find a wide range of on-page issues.

Pros and cons of Lighthouse

(pro) Lighthouse shows you a wide range of issues, and will highlight when titles have certain types of problems (e.g. title is completely missing)
(pro) Lighthouse is free, easy to use, and probably already exists on your computer if you have a Chromium based browser installed
(con) Lighthouse runs on only one page at a time so it can't indicate whether titles are duplicates across several pages
(con) Lighthouse reports take a while to run and interpret, so using them on a site with dozens, hundreds, or even thousands of pages isn't easy to do

SEO Spider

SEO Spider is a freemium desktop tool that allows you to scan an entire site for potential issues to mitigate them.

Pros and cons of SEO Spider

(pro) Unlike the above tools, SEO Spider will start from a single URL and scan an entire site
(pro) SEO Spider provides a comprehensive breakdown of issues on your site, with <title> tag issues being one of many types issue checked
(netural) SEO Spider is free for 500 pages and then requires a purchase
(neutral) SEO Spider is focused on SEO issues
(con) Since SEO Spider is a desktop tool, it need to be ran manually when your computer is on
(con) Some users report that the tool performs poorly on large websites (1,000+ pages)
(con) There's no way to track resolution progress or mark issued as resolved in SEO Spider
(con) If you have a team with several people that need to use SEO Spider, you need to buy separate licenses for each person

Cloudtrellis

Cloudtrellis (our tool) is a cloud-based website error scanning tool that monitors your entire site for broken links, accessibility issues, and SEO improvements.

Pros and cons of Cloudtrellis

(pro) Cloudtrellis runs both manual and scheduled scans in the cloud, so there's no need to run anything on your computer
(pro) Cloudtrellis scans for a variety of issues across all pages on your site
(pro) Cloudtrellis allows you to set issue statuses directly in the software, so you can mark issues as to-do or resolved without having to export the list of issues into another tool
(pro) Cloudtrellis supports multiple users within a single organization, so everyone on your team can use the tool and work on the same sets of scan results
(neutral) Cloudtrellis isn't free but offers competitive pricing based on your use case
(con) Since Cloudtrellis is a newer tool, it doesn't scan for as many SEO issues as a tool like SEO Spider

Regarding how titles appear in social media posts: The <title> tag contents may not be what is displayed if certain other social media focused <meta> tags are defined in the <head> section of the web page. These include special sets of tags (some of which are specific to only certain social media platforms, such as Twitter/X) that define things like thumbnail image as well as an alternate title that does not necessarily have to match the main <title> tag. These additional tags are outside of the scope of this article, but this is something we'll cover in the future.↩︎
Each page on your site should have a exactly one <h1> tag with the title you want the user to see when on the page. Omitting the <h1> tag (by using an <h2> or just a <div> with large text) harms both the SEO and usability of the page. Search engines look at the <h1> tag and many screen readers give the <h1> tag special weight.

One of the most common mistakes developers make is using the various heading tags (<h1>, <h2>, <h3>, etc.) as font size selections. You should use CSS to set the font size of your headings, and always maintain the correct heading hierarchy (e.g. don't skip from <h1> to <h3> unless you include an <h2> in between them).↩︎

Where exactly does the <title> tag go on a page?

Best practices for <title> tags