Waning icon

Fully booked: MarkIT Space is currently booked out until 3rd June 2024. Interested in working with us? Join our waiting list.

MarkIT Space

The Ultimate Guide to an Optimised HTML Title

(With Bonus Title Length Check Tool)

Title Length Tool The Ultimate Guide to an Optimised HTML Title (With Bonus Title Length Check Tool)

Written by Kellie Watson, Director ~ MarkIT Space

30th March 2023

Tag

SEO

One of the first things I notice about a web page is the "HTML" title. It's often seen before you even enter the website. In fact, you quite possibly see the "HTML <title> tag" first without even realising it. It's subtle, but it's always there. It's a must-have one-of-a-kind HTML tag that is vital to every page of a website. It's highly valuable to search engines and very important to people, whether they realise it or not.

The HTML <title> tag is not the big headline title you often see first on a website (that's usually, and should be, the <h1> tag). The title I'm referring to is the text that appears at the top of the browser window. It is also used as the headline for search engine results (if it's acceptable to the search engine).

Great web page titles can help you rank higher in search engine results pages (SERPs) and increase click-through rates (CTR) from organic search traffic. It plays a vital role in how users find your website and can lead to more visitors and better engagement with your content. It's one of the first things people will see when they view your page in their search results. So you want to make sure yours stands out from the crowd. A great title should contain relevant keywords that accurately describe what your page is about while being short and engaging enough to make readers want to click on it.

Knowing what I know about how to use the HTML title to its full advantage, I see so many websites where this one very important and super easy thing could be improved. So, this article will share why it is so important for your SEO and potential customers and provide you with the most effective strategies and best practices for crafting your own. By following these guidelines, you can ensure that your web page title will draw people in and help them locate precisely what they're looking for. So, whether you're a website owner or a digital marketer, read on and get ready to create a web page title that will get the next 'click'!

Basic HTML Structure

In case HTML code sounds like gobbledygook to you, I'll give you a brief introduction and rundown of the absolute basics. HTML stands for HyperText Markup Language and is the programming language that is used for creating and structuring every single web page. HTML consists of elements that are referred to as 'tags'. Not tags as in hashtags (#), like you probably know well from social media, tags in HTML are key code words that are surrounded by a less than (<) and greater than (>) symbol. They are used to create the structure of a web page, and content is usually contained within a start tag and an end tag. End tags are distinguishable from start tags as they include a forward slash after the less than symbol, e.g., "</" before the key code word.

The absolute basics of an HTML document (i.e., a web page) before it has any content, includes the following starting and end key code tags:

  • html
  • head
  • title
  • body

All tags are nested between the start and end <html> tags, and all content you see in a web page window is nested between the start and end <body> tags. The <head> tags contain information that is used by the internet browser to help render the page correctly, and the <title> tag is what will be discussed in detail within this article.

The minimum basic structure of an HTML document without any content is shown below:

Basic HTML Structure

What Is the HTML <title> Tag?

The HTML <title> tag is a very important and essential element of every web page. Which is why I've written an entire article about it! It's the first thing search engine bots, and people see when they land on your website. Every web page must have a <title> tag. However, an HTML document should not have more than one <title> tag.

The title appears at the top of every web page in your internet browser window. It also appears as the title when it's added to your shortcut favourites or bookmarks. And quite possibly, the most crucial appearance, is that the title can appear in search engine results.

The title indicates what a web page is about and is an integral part of search engine optimisation (SEO) because it tells search engines what keywords are associated with that page. It can help people to decide whether to click through to your web page or not. So, next, I'll explain how the title tag affects SEO.

How Does The Title Tag Affect SEO?

The web page title is one of the most valuable HTML tags to search engines. It is the first part of a web page that visitors and search engines see. However, it's only beneficial if optimised effectively and follows best practices. So, writing effective titles for every web page you create on your website is essential.

The title tag is used by search engines to understand the content of the web page and to help them determine the page's ranking on SERPs. Search engines compare the titles of web pages with user queries and display only those with the most relevant titles and content. Therefore, having an optimised title tag can significantly help boost your search engine ranking. Additionally, when visitors come across your website from search results, they should be able to recognise what your web page will contain just from its title. This will help visitors find your web pages during searches, increases engagement with your content, increases click-through rates, and ultimately helps drive more traffic to your website.

Why Is My Title Different in Search Results?

Search engines can choose not to use your title if they deem it irrelevant to the web page or if it doesn't contain enough specific information. They aim to display a title that best represents and describes each result. They also might show a different title depending on the device you're using. For instance, they often use a shorter title on a mobile phone to fit into the space available.

Google's generation of title links in SERPs is entirely automated. It decides whether the existing HTML title is suitable for describing the rest of the content on the web page. If they are happy with the title you've created, you've made their job easier, and they don't need to re-write or create a new search title for you for their search results. Bonus points for you!

The Ideal Length of a Title

The length of the title is a very important and fundamental SEO factor. They can't be too short, and they can be too long. So I'll explain how to create them just right...

If your title is too short, it may not provide enough context for people, and they'll be less likely to click on your web page. If a title is too long, Google (for instance) will truncate the title in the SERPs with an ellipsis (...). Or, they can create a different title to appear in SERPs for your web page - it's up to them!

I can't tell you an exact number of words or characters for the perfect title length, as there's no such thing! Instead, the ideal title length is measured by its pixel width. That means, search engines have allocated a set size for each search result title displayed in their SERPs. Because the length of the title is measured by width, the width set by search engines varies depending on your screen size, particularly if you are searching from a mobile device. So the exact width allowed for every device can get extremely complicated! However, for this article, I will stick with the ideal length for searching from a standard desktop computer monitor, which is much simpler.

The ideal length also differs for your home or landing page versus a subpage of your website. Your home page and landing pages, including blog posts, display a longer title in search results. Subpages like your 'About' or 'Contact' page are often displayed under your home page in results and only show a smaller title. For instance, the images below show the difference between the search results from Google and Microsoft Bing for an IT support company that MarkIT Space developed a website for. Note that the subpages are indented. Also, in Bing's result, the subpages are split into two columns. Hence, the space available for the title is even smaller.

Google Search Results for 'MindCache'
Google Search Results for "MindCache"
Microsoft Bing Search Results for 'MindaCache'
Microsoft Bing Search Results for "MindCache"

I've had a sneaky peak at the HTML and CSS source code behind Google's and Microsoft Bing's search engine results to discover the optimal length. The maximum lengths allowed for each search engine are shown in the table below.

Google Bing
Main Landing Pages (on Desktop) 600px 608px
Subpages (on Desktop) 568px 298px

Considering the widths allowed by the two leading search engines listed above, I use the smallest widths allocated so the result isn't truncated. Therefore, the maximum width for your main landing pages should be no wider than 600 pixels. For subpages, the width should be no wider than 298 pixels.

Depending on the font, size, and weight of the title text set by each search engine, that could change things too. However, lucky for us, they've made things easy using the same font and sizes. Both Google and Bing's search result titles are displayed using Arial (or sans-serif as a backup font if Arial isn't available on the device used) at 20px in size and 400 in weight (which means regular or normal).

However, now that you know the maximum width of a title, that doesn't tell you the maximum number of characters you can use. That's because different characters take up a different amount of space. For instance, the capital letter "W" takes up the largest width of 19 pixels. The characters that occupy the least space are a little "i" and a little "l". A space takes up 6 pixels, along with a few other punction marks such as a colon (:), a semi-colon (;), a comma (,), and a full stop (.). A capital "I" also takes up 6 pixels but a pipe "|", which looks very similar, only takes up 5 pixels. If your title contained nothing but capital W's, you could only fit 31 in a row before it gets truncated in search results (if they would be silly enough to allow that). Or, if your title contained only little i's, it could fit 135 in a row.

Phew! If that's all too much for you, don't worry, I've created a handy tool below where you can test your title length. So bookmark this web page for handy reference (and while you're at it, take note of its title)!

Check Your Title Length

Main Landing Page
Subpage
Search result title:
Search Result Title
Optimised Web Page Titles: An Ultimate Guide + Free Title Tool
Your title's total width is 598 pixels, leaving you with 2 pixels remaining.

Sorry, this tool is only available on a wider screen width.

Now that I've gone into great detail about the maximum length of a title, I'll quickly discuss how short a title should be. I mentioned that the title shouldn't be too short as it needs to be clear to both people and search engines what the web page contains. So, I aim to make each title as close to the maximum length allowed so that it includes the most keywords and information possible.

Best Practices for Writing the Most Effective Web Page Title

Crafting an effective title tag requires careful consideration of its length and content. If you tweak your title writing approach correctly, it could boost your visibility online! The following 8 tips are my recommendations from continuous re-writing and testing of titles over the past twenty-something years.

Don't Be Vague

Don't be vague with your title, and avoid using generic words such as "home" or "welcome". This won't help with SEO rankings or CTRs (click-through rates) as they don't provide useful information about your website.

Use Targeted Keywords

Using targeted search keywords in your title can help attract potential customers searching for a specific product or service. Keywords can help increase the visibility of your web page in SERPs, though only if they accurately reflect the page's content. An ideal title should be concise yet descriptive and accurately reflect the page's content.

In addition to providing visibility and attracting customers, keyword-rich titles can help establish trust with customers by providing accurate information about what they will be getting from visiting your site. They also provide context and can set expectations so visitors know what content they will get when they land on your page. Furthermore, keyword-rich titles make it easier for people to share links because they understand what the title is referring to without having to read through the entire page first.

When writing your page titles, identify the most meaningful and relevant keywords that describe the content on that page. These should be the first words you use in your title. While taking into consideration the optimum length of the page title and if there is room to squeeze in more information, add location-specific words or places if it applies to the content. So, put your keywords first and location-specific information second.

Avoid Keyword Stuffing

Don't overdo it, and be a spammy Pammy and stuff with fluff! This is called keyword stuffing if you try to cram too many keywords into a title tag without regard for readability or relevance. This can be seen as an attempt at manipulating search engine rankings and can lower your site's credibility leading to penalties by search engines, who will lower your ranking.

The Brand Awareness Factor

Unless your brand is in the minority of top well-known brands, and it's a name people will be searching for, don't list your brand name first. So many websites do this, and it's a wasted opportunity! Use your keywords first, followed by location (if applicable), then add your brand name only if space is still available within the maximum width allocated. Your brand can shine through the rest of your website. Hook that potential customer first with a relevant title that means more to them.

Powerful Emotive Words

Another thing to consider when writing an effective web page title is the use of powerful and emotive words. Power words are a great way to grab people's attention and increase conversion and click-through rates, leading to better SEO performance. Words such as: exclusive, revolutionary, innovative, ultimate, effective, powerful, limited, guaranteed, proven, best, or save.

Titles with a strong emotional connection, whether positive or negative, can also lead to more click-through rates. Emotional words with a negative sentiment, especially when they are strongly negative, can sometimes increase the CTR since they invoke strong reactions in people. Some examples of positive words include:

  • Amazing
  • Incredible
  • Astonishing
  • Exciting
  • Sensational
  • Spectacular
  • Thrilling
  • Unforgettable
  • Inspiring
  • Miraculous

Negative words include:

  • Shocking
  • Horrifying
  • Devastating
  • Heartbreaking
  • Terrifying
  • Disastrous
  • Catastrophic
  • Traumatic
  • Brutal
  • Terrible

If your title has the room to include a powerful or emotional word to capture the attention of a potential customer, make sure it is appropriate for the context and target audience. It is important that the emotions conveyed in the title accurately reflect the content of the article or webpage to avoid misleading users. It is also important to note that using powerful words in your title may attract more clicks, but it may not necessarily attract the right kind of traffic that will lead to conversions or business growth. Therefore, it is vital to choose your words judiciously and in a way that accurately reflects the value you are offering to visitors.

Get creative with your words, and focus on crafting catchy titles that grab people's attention and pique their interest. Use creative language and clever wordplay while still being mindful of the context of the page content. When crafting titles, use language that reflects the tone of your brand identity and appeals to the target audience you are trying to reach.

By utilising an effective combination of keyword optimisation and creative title writing, businesses can create powerful web page titles that will set them apart from their competition and help build an emotional connection with potential customers. With careful planning and execution, companies can leverage their web page titles as a powerful tool for increasing the visibility of their brand online.

Check Your Spelling and Grammar

Make sure you check your title to ensure it doesn't contain any spelling mistakes or typos. That would certainly look unprofessional and deter people from clicking on your link for fear that your website might be a scam. So re-read and check it.

Creating effective title tags can take time and practice, so don't be discouraged if you don't get it right away! With awareness and dedication, you'll soon master the art of crafting engaging title tags that will bring more visitors to your website.

Every Page Title Should Be Unique

It's important to make sure that every page that belongs to your website has its own unique title. This helps search engines understand the topic of each page better, which in turn, can help with SEO rankings. Duplicating titles across multiple pages can lead to penalties from search engines and confuse them as well as people. This will make it easier for people to find what they're looking for when Googling as well.

If you are struggling to create unique links between some of your web pages, add a modifier such as a year or whatever is applicable so each one is different in some way. For example, "The Best Web Design Trends for 2023". Including the year in the title also provides more information by indicating when the article was published, making it easier for readers to distinguish it from similar posts.

Also, spy on your competition. Check what already exists in search engines when you type in your keywords, and think about how you can make your title stand out from the rest.

The Rise of the Emoji

This last tip about adding an emoji to your title is a little controversial. Some people say it's a "no-no". Google states that adding emojis to titles are allowed, but they have no direct effect on SEO. That's because no one is going to search with an emoji. However, it's also been proven that when an emoji has been added appropriately to a title that enhances its meaning, it increases the CTR. Although search results with an emoji of no relevance, as in a smiley face, that doesn't relate to the result has no effect on CTR. So, although it means nothing to Google, it can mean something to your potential visitors when a related emoji is used.

Pictures are worth a thousand words, aren't they!? They give a quick and easy hint as to what the page is about and stand out amongst a sea of text. For instance, a title named...
"The Ultimate Cocktail Recipe 🍹"
...includes an appropriate emoji, and stands out. It is therefore likely to obtain an increase in click-throughs. So, if your title length has room to squeeze in an emoji, add a relevant one to the end of your title.

Evaluating Your Title

Once you have your web page title in place, keep track of the results. Tracking your page title performance is vital to achieving success with your website's SEO efforts and overall visibility online. Perform a search with your keywords to find your website. Check that the search result is displaying the correct information. If not, reassess and re-write.

Also, use analytics tools to better understand what works best when crafting captivating page titles that will help draw more people to your site. Use Google Analytics to monitor your site's user engagement and Google Search Console to monitor effective keywords. These tools provide valuable insights into how visitors interact with the content on your pages. By understanding this data, you can optimise your titles and make sure they resonate with users.

To ensure that you're getting accurate data from these tracking tools, make sure that you have properly implemented them on your website and configured them correctly. This will help ensure you get the most out of these tools and understand how visitors engage with your titles. If you need help with this, MarkIT Space can assist.

If you've made changes to your title, keep in mind that Google's bots have to recrawl and reprocess your web page to notice updates, which may take a few days to a few weeks. If you'd like to try and speed up the process, you can request Google to add your URL to a priority crawl queue in Google Search Console.

Conclusion

Understanding how to write an effective HTML title is essential to optimising your web page for search engines and creating a great user experience. When crafting web page titles, aim to create titles that are as close to the maximum pixel width as possible by using the handy tool within this article. Use relevant keywords that accurately describe the content on the page in a way that captures the attention of your intended audience and promotes brand awareness, and make sure each page title within your website is unique. Lastly, evaluating and tracking results can help you identify which titles are most effective in engaging visitors with your website.

Creating an ideal web page title requires thoughtfulness and strategy. By following best practices, you can ensure that your pages stand out from the competition. Additionally, it's important to remember that titles should reflect what visitors will find when they click through to the page. With this in mind, you'll be able to create titles that drive traffic to your website while providing a great user experience.

Finally, by staying up-to-date on SEO trends and testing different title variations regularly, you'll be able to maximise the potential of your web pages. If done correctly, you'll see an increase in traffic as well as better rankings on search engine result pages. So go ahead and get started on optimising those titles!

If you'd like to discuss how MarkIT Space can help you set up your Google Analytics tools, send us a message:

If you found this article interesting or helpful, let us know with a thumbs up.

Thanks for the 'like'!

Liked by 0 people

If you have any comments or questions, send us a message:

Post publicly