What is a Title Tag?

Every web page needs a title. At first look, you would think they are simple. Just adding a title right?!

Yet, they are much more complicated than that.

A title tag is the way your title is displayed on the following;

• On search engines (SERPs, Google, Bing)
• Social media (Facebook, Twitter, Pinterest, etc)
• Web browsers (Chrome, Firefox, IE, Edge, etc)

They are very important for your SEO.

It's the main text that your users will see. Your title tag needs to be engaging, enticing the user to click your link.

There is a lot to think about.

In this post we are going to cover:

• What is a title tag?
• Why they are important?
• Where are they used?
• How to create the perfect title tag?

Let's dive in.

What is a meta title tag?

Let's pretend that we are writing a blog post “How to make a chocolate cake” (I was hungry when I wrote this post!).

The title tag of the page would contain the phrase “How to make a chocolate cake”. This is what it looks like in HTML:

<title>How to make a chocolate cake</title>

The above is a title tag. It seems simple enough, right?

Let's look at how browsers, search engines, and social media use the title tag.

Why are title tags important?

As you now know title tags have three uses:

1. Browsers show the title in the tab
2. Search engines show the title on search results pages
3. Social media sites show your title for a link to your site

Let’s start with web browsers.

Title Tags and Web Browsers

When you add a title tag to your web page it does not get displayed on the page itself. This is because it sits in a special area of the HTML called the HEAD. Instead, browsers, bots, and web crawlers read the data in the HEAD section to understand the page. Once the browser finds your title tag it will display it on the tab like this:

Here are some common bots and web crawlers that will also read the HEAD section of your pages:

• Googlebot - Google search engine results
• Bingbot - Bing search engine results
• Facebot - Facebook links
• Twitterbot - Twitter cards

Let's start with the search engine bots.

Title Tags and Search Engines

When Googlebot or Bingbot visit your site they will copy the title tag and add it to the search results. It appears in the search results like this:

As you can see it is the main text shown to a user so it must be well written.

If you would like to see what your title would look like in the search results you can use the SERP preview tool.

Title Tags and Social Media

For social media, things are not quite as straight forward. This is because both Twitter and Facebook have their version of a title tag.

Both go in the HEAD section and use a meta tag. This is what the Twitter title looks like:

<meta name="twitter:title" content="How to make a chocolate cake">

This is a new HTML tag called a meta tag. It has the name of twitter:title. This is what Twitterbot will look for when it visits your site. The content attribute above should match what you have inside your title tag.

You can test your pages are working by using the Twitter Validator.

Facebook uses its standard called open graph. They have their meta tag called og:title.

This is what you would add for Facebot to read:

<meta property="og:title" content="How to make a chocolate cake">

Facebook's preview tool is the Debug Tool.

Where do I add the Title Tag?

Now we know that that there are 3 tags to add to the HTML of the page.

1. The title tag used by the browser and search engines
2. The Twitter title meta tag
3. The Facebook title meta tag

Let's look at how you can set this up and where the tags should go in the HTML.

Depending on your website set up, you will either do this by:

• Editing the HTML
• Use a WordPress Plugin
• Add the front matter if you are using a static site

Let's look at each.

Title Tag in HTML

It is important to understand a little of how the HTML works when building a site. Even if you never code it yourself you should have a good idea of what is happening “under the hood”.

After all, if something does go wrong you need to be able to diagnose the issue so that you can get help on fixing it.

The title tag is a special tag that is on every web page. You have to add it to the HTML in a special section called the HEAD.

This is an example of a very simple HTML page for our chocolate cake example:

<html>
  <head>
    <title>How to make a chocolate cake</title>
    <meta name="twitter:title" content="How to make a chocolate cake">
    <meta property="og:title" content="How to make a chocolate cake">
  </head>
  <body>
  </body>
</html>

As you can see we have added all three of the title tags. Supporting browsers, search engines, Facebook and Twitter.

Yet, we have not quite finished.

It is a good SEO practice to have the title tag the same as the title of your page. This is called the first heading or h1.

Here is what the HTMML would look like.

<html>
  <head>
    <title>How to make a chocolate cake</title>
    <meta name="twitter:title" content="How to make a chocolate cake">
    <meta property="og:title" content="How to make a chocolate cake">
  </head>
  <body>
    <h1>How to make a chocolate cake</h1>
  </body>
</html>

The heading is set using a <h1> tag this means Heading 1 and you should only ever have one of these on a page. It also should match your title tag.

Title Tag in WordPress

If you are using WordPress to create your site then you can manage your title tags using the Yoast SEO plugin.

This will set up the title tag along with the social media meta tags for you.

Title Tag in Hugo

With the Hugo Static Site Generator all you need to do is make sure that you set the title in your front matter like this:

---
date: 2020-01-19T10:58:08-04:00
title: "How to make a chocolate cake"
---

The front matter contains the page values that you add to the top of each post.

Once you have this set the Hugo theme will set the title tag and social media meta tags.

Why are Title Tags Important to SEO?

Moz highlights the importance of the title tag:

Title tags are the second most important on-page factor for SEO, after content.

When Google shows a link to your page in the search results it will use your title tag as the link. So this is the first thing that a user will see.

You need to write an engaging title so that it answers the user's query.

Back to our chocolate cake example, our keyword is:

“How to make a chocolate cake”

The trick of writing a great title for SEO is to find what your users are searching for. Then create quality content that answers their questions.

This keyword gets 5000 searches a month according to the Google Keyword Planner. By writing a great post about making a chocolate cake we are helping to answer the user's query.

This is why the title tag is so important to SEO. Google looks at your title to learn what the page is about. If it knows that the page is about “How to make a chocolate cake” it will then check the content of the page matches.

If Google feels that the content is good it will start to show your page to users.

How do I Write a Good Title Tag?

As well as targeting keywords there are some other rules to follow. Here are 5 tips for creating compelling titles for every page.

1. Create a unique title for every page

Make sure that you don’t have the same title for every page. This can get very confusing when shown in the search results. Avoid using generic terms like Home, Settings, About, Profile. These do not describe what the page is about.

2. Not too long, not too short

You want your titles to describe the page but don’t make them too long. This is because they will get cut off at around 50-60 characters when shown in the search results.

3. Make sure to include your keyword

When you are writing content for a keyword make sure that your title starts with that keyword. Don’t overdo it by adding as many keywords as possible (keyword stuffing). Google does not like it when you repeat your keyword over and over. So add your keyword but always write your title for humans.

4. Add your brand at the end of the title

It is a good idea to add your brand at the end of the title separated by a hyphen (-) or pipe (|). This is can help when people are scanning the search results and then recognize your brand. Like this:

5. Make sure the title matches the content

Don’t try to trick Google by adding a title that does not match the content on the page. Google has very sophisticated algorithms that match titles with the page contents.

If you stick with these 5 tips then you will be creating excellent titles.

Wrapping Up, What is a Title Tag?

After following this post you now have gained the knowledge of exactly what is a title tag.

You have learned that it appears in three places:

• Browser tabs
• Search Engine Results Pages
• Social Media

Look at what users are already searching for and see if you can target a keyword with your title. When writing engaging titles make sure to:

• Create a unique title for every page
• Don't make the title too long or it will get cut off
• Include the keyword you are targeting at the front of the title
• Add your brand name to the end of the title
• Always write your title so that it is relevant to the content of the page