Web Page Titles & HTML Title Tags

HTML title tags (or title elements) are used to mark up a web page's title. Page titles should describe the main idea of the page. This text is displayed in search results and is one of the strongest ranking factors used to determine a page's position in the Search Engine Result Pages (SERPs). Every page on a website should contain a unique, descriptive page title.

Code example

<head>
  <title>Example Title | Example.com</title>
</head>

Search engine guidelines

There are a few guidelines to consider when developing a page title that is optimized for search engines.

Length

Page titles can be cut off in the SERPs if they are too long. Page title length is based on pixels shown in the SERPs. Although search engines will read the full title regardless of length, users will only see up until a certain threshold in search results. Google's threshold is 512 pixels, which equates to anywhere from 50-60 characters depending on the characters used.

Keywords

Using strong and descriptive keywords is critical to the success of a page title. In general, using 1-3 primary keywords or keyword phrases in a page title is a good rule of thumb. These keywords should reflect the main topic of the page and accurately tell a user what they can expect to find.

Branding

Search engines may insert the brand name of the website into the page title they choose to display. To protect against the risk of a search engine changing your carefully chosen page title, include branding from the start.

Potential pitfalls

Search engines reserve the right to display a different page title than the one marked up with your title tags. There are a few major ways this can happen.

Cut off page title with ellipsis

If a page title is too long, this one is basically a given. Search engines will find a way to shorten your page title, and the most common way is by truncating it and adding an ellipsis at the end. The follow example shows how this might look.

Rewritten page titles

In some cases, search engines will replace your page title with their own if they determine that something else is more relevant. This relevance can be influenced by the query used to search.

Below is a good example of rewritten page title from Moz. In her post, Ruth Burr Reedy explains that at the time of the "before" picture, the page title was too long and for some reason Google was using the text from the URL; as seen in the "after" picture, once they shortened the page title, Google began showing the specified title tag again.


Before


After


According to the algorithm

For anyone out there interested in the technical programming behind these, we've gathered a few algorithmic specs from Google's blog that affect how the page title displays in search results.

Trigger alt title when HTML title is truncated:

[launch codename "tomwaits", project codename "Snippets"] We have algorithms designed to present the best possible result titles. This change will show a more succinct title for results where the current title is so long that it gets truncated. We'll only do this when the new, shorter title is just as accurate as the old one."

Efficiency improvements in alternative title generation:

[launch codename "TopOfTheRock", project codename "Snippets"] With this change we've improved the efficiency of title generation systems, leading to significant savings in cpu usage and a more focused set of titles actually shown in search results."

Better demotion of boilerplate anchors in alternate title generation:

[launch codename "otisredding", project codename "Snippets"] When presenting titles in search results, we want to avoid boilerplate copy that doesn't describe the page accurately, such as "Go Back." This change helps improve titles by avoiding these less useful bits of text."



Related Topics

Google SERP Simulator (Snippet Preview)

Get a Google snippet preview to check how title tags and meta descriptions are displayed in search results.

Google SERP Simulator