Title Tag (SEO)

A title tag is an HTML element that specifies the title of a web page. Title tags are displayed on search engine results pages (SERPs) as the clickable headline for a given result and are important for usability, SEO, and social sharing.

Search Engine Optimization (SEO) Menu
Jonathan Griffin. Editor @ The Webmaster

. Hosting Expert & Editor @ The Webmaster:

There are many ways to write a Title Tag, and ultimately it will be down to your decision based on what you think offers the user the best User Experience (i.e. does the Title reflect the intent of the article or were they expecting a different type of content), SEO as well as the information you want to include in a limited space.

Either way, the title tag is important, and we hope this article will provide you with insights on what is recommend, and possible.

What is a Title Tag?

A title tag is an HTML element that specifies the title of a web page. Title tags are displayed on search engine results pages (SERPs) as the clickable headline for a given result and are important for usability, SEO, and social sharing.

Title Tags should be located within the “Head” of the web page:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Title Element goes here.</title>
</head>
<body>
  <p>The main content of your page goes here.</p>
</body>
</html>

For a technical summary of the <title> tag click here.

Suggested format:

The following are some suggested Title Element formats you may wish to consider:

  • Primary Keyword - Secondary Keyword \ Category | Brand Name
  • Primary Keyword - Click-through Optimization Phrase | Brand Name
  • Primary Keyword - Current Month Current Year | Brand Name

Suggested length:

There is no exact character or pixel limit to the width of title tags. However, if you keep your titles to under 60 characters, they should display around 90 percent of the time.

We set out in detail the best practices to follow when crafting Title tags later in the article.

How are Title Tags used?

Title tags are a major factor in helping search engines understand what your page is about, and they are the first impression many people have of your page.

1. Search Engine Result Pages

Your title tag will be displayed in the Search Engine Results Pages (SERPs) as the main title link leading to your web page. As such, it is often your visitor’s first experience of your website. As such, you will want to make sure to create a great title to entice visitors to your website.

You can see an example below:

A screenshot showing the title element in the SERPs
A screenshot showing the title element in the SERPs © The Webmaster

2. Influence your Google Rankings

The title tag can have an influence on your Google Rankings:

Titles are important! They are important for SEO. They are used as a ranking factor.

John Mueller, Google Webmaster Trends Analyst (Jan 26, 2016).

  • John Mueller clarified his earlier (Jan 15, 2016) statement in an English Google Webmaster Central office-hours hangout said that:
  • Titles are important! They are important for SEO. They are used as a ranking factor. Of course, they are definitely used as a ranking factor, but it is not something where I’d say the time you spend on tweaking the title is really the best use of your time.

Detailed discussion and further sources on how Title Tags affects rankings.

3. Show in the Web Browser Title Bar

Your title tag will be displayed at the top of your web browser. It allows users to easily identify the pages content when browsing using multiple tabs. As space is limited, you should ensure that the most important keywords \ keyword phrase are at the beginning.

You can see an example below:

A screenshot showing the title element in the Browser Bar
A screenshot showing the title element in the Browser Bar © The Webmaster

4. By external Websites & Social Media

While Facebook and Twitter use their own meta tags, such as Open Graph, many third-party websites will utilize information from the title when posting to social media.

You can see an example below:

A screenshot showing the title element in Social Media
A screenshot showing the title element in Social Media © The Webmaster

Title Tag Best Practices

1. Keep your title tag length under 600 pixels, which is around 70 characters

Since early 2014, the number of characters you can use in your title tag can vary. Here is a list of some of the factors that can affect title tag length:

  • Wider letters take up more space - Letters such as “i” take up less space than “w”.
  • ALL CAPS take up more space - Words such as “AND” take up more space than “and”.
  • Width varies depending on the search query - Because Google now boldens the search query, and bold letters take up more space, a longer search query would also take up more space.
  • Truncation - When a Title is “cut off” it is appended with “ …”. This means truncated titles show even fewer characters of the Title.

Editor’s Note: The research by Moz has been superseded by changes made by Google in May 2016, which lengthened the Title Tag width. However, the basic concepts remain.

Continue reading the article for more details.

Dr. Peter Meyers, at Moz, analyzed the title tag lengths after cutoff back in March 2014. The title lengths ranged from 42 to 68 characters. You can see the distribution of title cutoff lengths below:

Distribution of title tag cutoff lengths.
Distribution of title tag cutoff lengths. © Moz

In 2014, when Dr. Meyers carried out the analysis, the best practice was keep it under 512 pixels in width, which is around 55 to 60 characters. However, Google made some changes to Title Lengths in May 2016, which we will talk about next.

Title Tags length changes - May 2016

On May 11, 2016 Jonathan Jones reported that Google increased the width of their organic search results. This had an immediate impact on a variety of things, including the width of title tags.

This changed the width of the titles in the SERPs from 500 pixels to 600 pixels. This equates to around 70 characters before Google will truncate the titles with ellipses.

Mobile Title Tag changes - May 2016

At around the same as the May 11, 2016, changes, it that the Mobile Titles tag had increased to about 78 characters.

It remains to be seen how users will differentiate between mobile and desktop search title tags. Certainly, the safe option is to go for the shorter length, but for websites with the majority of their traffic on mobile, it does give the longer title as a credible option.

2. Keep it short, descriptive and relevant to the page content

Matt Cutts gave some advice in April 2014 about how to craft your title tag. He said that if you want your Title to display as intended, then you should ensure that:

  • It is relatively short.
  • Is a good description of the content, and ideally the website that the page is on.
  • And that it is relevant to the query.

If you don’t adhere to this, then Google may use an alternate title. This may be from content on your page, from anchor text pointing to your page, or the Open Directory Project. As this information is approaching two years old, it is unclear as to whether this is still the case.

You can view the full Matt Cutts video below:

3. Separate Words with either a Hyphen “-” or a Pipe “|”

In a video dating back to September 2009, Matt Cutts confirmed that both Hyphens and Pipes are viewed as separators.

Ultimately, it is open to personal taste, but we do think that hyphens tend to be a little more popular. A small benefit of using hyphens is that they may be more likely to be used by users searching with “exact-match” queries.

You can view the whole video below:

4. Avoid keyword stuffing

Besides looking unnatural and providing a bad user experience, keyword stuffing can cause an algorithmic penalty that can hinder your rankings.

Furthermore, Google has made significant strides over the past year or so in understanding the user query and associating words with similar meaning to the query. You can read more about the new RankBrain Artificial Intelligence here.

5. Don’t duplicate titles over multiple pages

Google endeavors to provide its users with unique and valuable content. As such, you should try to give each page a unique title.

Modern CMS, especially WordPress Yoast Plugin, allow titles to be create automatically using various template variables. This should allow you to automate the generation of titles at scale.

Some good examples of titles that can be created using variables are as follows:

  • Primary Keyword - Secondary Keyword \ Category | Brand Name
  • Primary Keyword - Click-through Optimization Phrase | Brand Name
  • Primary Keyword - Current Month Current Year | Brand Name

When automating titles, pay particular attention to the next point about putting the important keywords first.

6. Put important keywords first

There are a couple of reasons to put the most important keywords at the beginning:

  • Google gives greater weight to keywords that are placed at the start of the title tag.
  • The space available in the title bar \ tabs at the top of the browser window is limited.
  • The most important words are less likely to be cut off if you exceed the 600-pixel width limit.
  • A usability study carried out in 2009 indicated that the users might scan as little as just two words of a headline.

7. Maximize Your Click-Through-Rate

If you just wrote a bunch of keywords, you may end up with an uninspiring title. The result you are trying to achieve is to drive high-quality traffic to your website.

While keyword optimization and SEO is important, it wouldn’t mean much if they didn’t click through to your website.

Some good examples are as follows:

  • 16-inch pizzas - Free Delivery in London | Pizza Palace
  • Cheese Pizzas - Hungry? London Delivery within 20 min

As you can see in these examples, the keyword is at the start of the title tag, but we also try to provide something to entice the user to click through to the website.

A quick search for London Pizza Delivery, a highly competitive term, shows companies are putting this into practice:

Maximize CTR rates with title tags.
Maximize CTR rates with title tags. © Screenshot.

8. Leverage branding

Adding branding to the end of your title tag is a widely used technique that helps a business to reinforce branding to their potential customers. Branding also helps to attract repeat customers, so it helps if the brand is clearly marked on the search results.

As we have previously mentioned, Google may rewrite weak titles. Quite often, Google will append your brand automatically to the end of your display title.

Troubleshooting

Google rewriting your display title is not necessarily a bad thing. In some circumstances, by displaying more relevant information (such as an extract from your web page) to the user may be more helpful, and as such may increase click-through rates. However, if this troubles you, check the following:

1. Your title contains too many keywords (stuffing)

If you try to stuff your title with keywords, Google may rewrite it.

2. Your title doesn’t match the user’s search query

If the user searches for a term that is not represented in your title, then Google may rewrite the title. It may, for example, choose to highlight some text from within the web page.

3. You have an alternate title

If you have an alternate title, heading, or meta, and if that better represents the searcher’s query then Google may choose to use that instead.

4. You have an old DMOZ listing

Search engines may pull a title from DMOZ (aka Open Directory Project). You can prevent this by using the Robots NOODP tag:

<meta name="robots" content="noodp">
Jonathan Griffin. Editor @ The Webmaster

About the author

Editor at The Webmaster.

Jonathan Griffin has been the Lead writer at The Webmaster for the last 5 years. Having provided technical SEO, WordPresss development, and hosting services for clients, his passion remains to help small businesses and bloggers develop their online presence.

In his spare time, he loves to push his technical knowledge further, and regularly undertakes professional courses on subjects ranging from python development, digital marketing, and Google Analytics.

Find out more about Jonathan Griffin on our About Page.