Title Tag – What it is, Best Practices and Examples

title tag seoptimer guide

Table of Contents


A title tag is a piece of HTML code located in the <head> element. It tells users of both search and search engines what the topic of the webpage is while also defining the content of that page. It is not a part of the HTML document; instead, it consists of the whole HTML document. It is also one of the most important (and easiest) on-page SEO factors.


Where can you see the title tag?


Here’s how it looks if you right click your mouse and select “Inspect Element” or “View Page Source”:

how to inspect element on chrome


<title>Analyze Websites With Our Free SEO Audit & Reporting Tool - SEOptimer</title>


The title tag is prominently featured as a clickable link in search engine results pages (SERPs):


where title tag shows on serp


Your HTML title tag can appear in three additional areas even though you or your visitors might not see the actual HTML <title> code unless they view the page source. Those areas are:


  • In your browser toolbar when you are on the actual site

title tag on browser tab example


  • In your bookmarks if you’ve bookmarked the page

bookmark title tag shown example


  • On social networks when you share the link to that page

social network title tag shown


Why is title tag important?


The title tag is often the primary piece of information you can give users of both search and search engines to help them decide where they end up and which results are displayed. It’s important to use high-quality and accurate titles relevant to searchers’ queries. If you search “SEO audit tool” (singular) versus “SEO audit tools” (plural), you might receive two different results: one providing a site that provides the tool and the other providing articles featuring top X lists of SEO audit tools you can choose from.


More importantly, it is a ranking factor for Google.


What does Google say about title tags?


John Muller (Webmaster Trend Analyst) said about title tags in 2016, “We do use it for ranking, but it’s not the most critical part of a page. So it’s not worthwhile filling it with keywords to hope that it works that way. In general, we try to recognise when a title tag is stuffed with keywords because that’s also a bad user experience for users in the search results. If they’re looking to understand what these pages are about and they just see a jumble of keywords, then that doesn’t really help.”Google Webmaster Youtube Video


He later mentions in a 2018 Reddit article:


Good titles & descriptions are some of the easiest wins you can get on web pages. We did a round of site-reviews for some NPOs recently, and the number one item that came up for almost all of them was that what they cared about wasn’t front & center on their pages, and reflected in their meta-data. How are search engines supposed to guess what you want your pages to rank for?



Difference between title tags and meta titles


You might get confused between title tag and meta title. These are two different elements.

You might see <title>, an HTML element, and <meta property=“og:title”>, a meta element known as “meta title.”

Here is an example of a title title:


<head> <title>Analyze Websites With Our Free SEO Audit & Reporting Tool - SEOptimer</title>

Here is an example of a meta title:


<meta property="og:title" content="Analyze Websites With Our Free SEO Audit & Reporting Tool - SEOptimer"/>


Note: If you are using some sort of CMS (Content Management System), it might generate additional meta information. What’s the difference between title tags and meta titles? Title tags are a required page element while meta tags are optional.


How title tags work


Title tags are the strongest ranking and easiest wins for SEO, if your title tag accurately represents and describes how your content relates to your user’s query.


Search engine bot crawlers will first detect the site’s HTML <head> element to understand what your content is about. If your title tag is not accurately portraying your content and does not follow Google’s or any other search engines’ guidelines, they may try to generate an improved title from other sources, like anchors or on-page text.


When search engines know the user’s query, they will try to figure out why the results (i.e., your page) are relevant by pulling from elements within the page or from alternative text. A title that is tailored for the query can increase the chances of higher ranking and click-through-rates.


How to create an SEO-friendly title tag


To create the most effective title for your site, you need to follow certain guidelines. There are two main things to keep in mind in order to create creative and clickable title tags: 1) The length of your title tag and 2) What you can do and what to avoid.


How long should a title tag be?


Let’s find out how long your title tag should be. There are several well-known sites that have tested the limits to how long a title tag should be:


Here at SEOptimer, we recommend anywhere between 10–70 characters.


W3.org suggests around 60–80, and mention that title tags should ideally be less than 64 characters in length.


When it comes to Moz, a title tag should ideally be 50–60 characters, and since there’s no exact character limit provided by Google, they also suggest 600 pixels in width.


At SEJ, 64–70 characters is recommended, depending on your word breaks.


Wix, a CMS platform, recommends that you keep your title between 55–60 characters, removing all “stop words” such as “the”, “to”, and “in” if and when the title gets too long.


At SEOptimer, we wanted to test the 70-character limit that we recommended with our very own home page title tag:


Analyze Websites With Our Free SEO Audit & Reporting Tool – SEOptimer


Our SEO Audit tool detected that our title tag is 73 characters in length.

example title tag over 70 characters


When we typed in our website’s name, “SEOptimer”, we found that the entire title tag was present, with no characters cut off.


Here is a desktop view of the search result:

where title tag shows on serp


Notice that Google’s search engine title snippet shows “SEOptimer: Analyze Websites With Our Free SEO Audit & Reporting Tool”. It’s quite possible that when you type in “SEOptimer”, they are providing a more accurate, alternative title tag to best represent the search.


We also checked the mobile view and noticed that once again all 73 characters of our title are present.


While searching for “how to create the best title tag”, we found an article title that contained 93 characters in length:


“A beginner’s guide to writing title tags and meta descriptions that get clicks | 123 Reg Blog”

example of bad title tag with long character


While searching mobile, we found some interesting title tags:

mobile search results on title tag example character


We’ve noticed some titles like Wix’s “How to Write a Strong SEO Title Tag that Google Will Love – Wix.com” had a title tag without “– Wix.com”, but Google added the brand’s name to help users identify who wrote that content.


Unamo’s title, which was only 56 characters in length, was cut off by Google. Their original title, “SEO Title Tags: Best Practices and Examples | Unamo Blog”, was cut off on a 5.5-inch smartphone.


You can also see in the above screenshot how Ahrefs.com has their full title displayed versus seo-hacker.com.


Titles can be both short and informative, regardless of whether or not you go beyond 56 characters or your page title gets cut off by search engines. The only thing you can do is focus on providing the most optimal titles for each page, following these best practices for a title tag.


Title tag best practices


Ensure that title tags are as clear and succinct as possible. In just a few characters, the title should accurately describe your page in a striking manner. Therefore, you should not use ambiguous descriptors like “Home” for your homepage or “Profile” for a particular user’s profile. As previously discussed, your title should not be too wordy in order to avoid any cut off from SERPs.

Avoid keyword stuffing

Don’t fill your title with numbers and keywords in an attempt to manipulate your site ranking because this may create a negative user experience.


Here is an example of obvious keyword stuffing:


“How-to SEO: Your Ultimate SEO Guide for Your SEO Needs”.


Titles similar to this can be assumed to be spam by users. Instead, focus on generating helpful and informative content that makes use of the keyword in the most natural way.

Boilerplate or repetitive keywords

It’s important to have clear-cut titles for every page on your site that will accurately describe the content of those pages. Don’t use ambiguous titles that will make it difficult for users to distinguish one page from another. For example, titling every single page on a dating site as “Best Dating Tips” makes it very strenuous for users to differentiate how one page differs from another. Our “Task” can help you identify any duplicate titles.


Using long titles that differ by one piece of information is not recommended either. Uninformative page titles should be redeveloped to accurately reflect the content of each page. For example, “tips”, “pick up lines”, “conversation starters”, and “quotes” should not be included on every page. Include the words “tips for dating”, “dating quotes you can use”, or “pickup lines that work” only if the page actually contains those elements.


Clearly label your titles. If your title is short and striking, it is recommended you add your brand name at the end of the title tag throughout the site. The title of your site’s home page is a good place to add more details about your site.

Bad example:

“SEOptimer, Your Website SEO Audit Tool” is a good title, but displaying your brand name on each page for your site will negatively affect readability. You could use a delimiter such as a colon, pipe or hyphen to separate your site’s name from the rest of the title, such as:


Your Website SEO Audit Tool – SEOptimer”, or

Website SEO Audit Tool: Register Your SEOptimer Account”.


Take caution when limiting your site’s access by using robots.txt which can block search engines from indexing your site if you enable noindex. Your page might be indexed if search engines discover it via a link from another site, or even from your own.


Title tag best practice summary


In summary, use titles that accurately describe the content of your page. Pick a title that is as natural as possible and successfully defines the content of the page. You should not use indeterminate titles that are not connected to the content of the page, for example, “New Page” or “Untitled”.


Create distinctive individual page titles. Search engines will be able to discriminate each page from  each other if each one possesses a unique title. If your site incorporates mobile pages, make sure you create successful versions for mobile users as well. Be sure to avoid the use of a single title across all the pages on your site or over a large number of pages.


Use short and succinct titles. Titles should be short yet very descriptive since search engines will truncate long and uninformative texts on its search results, only showing a portion of it. A user’s device or query may also determine how search engines display the results on SERPs. You should, therefore, avoid stuffing keywords and using long and less relevant titles that might become problematic to users.


What to do after you create your title tag


Once you’ve created your title tag and after Google has indexed your page, you’ll want to see how it actually shows up on Google.


You can type in “site:www.yoursite.com” on either Google or Bing and identify each page that has been indexed. Make sure not to insert a space between “site:” and “www.yoursite.com”.

check on serp for title tag


Here’s a Bing example:

bing serp title tag


What to do if Google doesn’t show the optimized title


There are a few reasons why your search might not show the current optimized title. As mentioned before, if you do not see your page using this method, you will have to wait until they have indexed your site.


Your site SERP information might be cached


Check the Google Cached link under your listing in search engines to see which page Google is using for your page.

google searp cached selection link


More than likely, Google hasn’t crawled your site and or noticed the changes you’ve made. You can try logging in and submitting your URL under Crawl Fetch as Google, then hit the “Fetch and Render” button.

fetch google search console and render


Google will render your page and show you how their bot crawler saw your page. You can verify that your page has been rendered based on your optimization. For example:

title tag googlebot


If you still see a different title once your site has been indexed, search engines might have determined that the title needed optimization based on their criteria. Continually practicing creating title tags will eventually result in successful titles. Remember: Practice makes perfect.


Looking to update your title for WordPress, Wix or Shopify? We wrote a guide for each:


How to Modify My WordPress Title Tag to Set Page Titles

How to Change My Wix Site Title

How to Add Title Tags with Shopify 


In Conclusion

We learned what a title tag is and why it is important for SEO. It’s one of the easiest wins in SEO but few people know how to do it right. We also learned the difference between a meta title and a title tag, along with best practices to help you optimize your sites SEO.

Looking to know more about meta description and why it is important for SEO?

Related Articles

SEOptimer Report Preview

SEOptimer - SEO Audit & Reporting Tool.
Improve Your Website. Win More Customers.

Get a Free Website Audit Instantly