How to write a good HTML title tag

Do you want your readers to know what your page is about?

Do you want people reading search engine results to know what your web page is about?

If you answer “No” to these questions, then you should rethink why your on the web.

The title tag places content in the title bar at the top of the web browser.

Why is this important?

The title bar lets readers know what to expect on that page. If no title tag exists, most browsers display the name of the actual html file. Imagine a title bar that looks like this:

By the way, this is a screenshot from an actual website that I found. The website belongs to a department of a prominent university. Not good. The title bar tells the reader nothing about what to expect on that page.

Title tags are also used by search engines. The title tag is typically used as the first line of the search result.

The importance here should be apparent. You need to be telling searchers what your page is about. They are not going to guess. Results with a clear title tag will be more attractive than those whose title tag is murky.

The code for the title tag is fairly straightforward.

<title>Your Title Here</title>

No big secret in writing the tags. The trick is the words between the tags.

Tips on writing good titles:

• 60 characters or less. See my SERP example above? I was experimenting with my title tag and I wrote one that was too long. What happened? Google placed an ellipsis at the end. It cut off some important information I wanted to communicate. I have since shortened the title tag.
• Focus on using your main keyword phrase
• Write it for human readers
• Multiple keyword phrases can be accomplished by writing a good sentence
• If writing a good sentence is impossible or impractial, use short keyword phrases separated by a | (bar). For example: Blue Widgets | Red Widgets | Green Widgets

Put this into practice. Below are three title tags I pulled from some random search engine results. I have rewritten them according to the tips above.

OLD:Webster Groves, Kirkwood, Ballwin and St. Louis Missouri real estate listings, homebuying, sel [cutoff at this point]
PROBLEM: Way to much keyword stuffing. The home page is trying to be to much.

NEW:[Real Estate Broker Name] | Your Saint Louis Real Estate Agent
SOLUTION: Quite different huh. I did some quick keyword analysis and found lots of searches for “saint louis real estate”. Now, what he can do is create separate pages for each of the cities he focuses on.
Example: [broker name] | Webster Groves, Missouri (MO) Real Estate Agent.
This site is trying to capture too much traffic to its home page by using keyword stuffing. Instead, they could expand their reach by tightening up their page title (and content) and then creating more content by adding additional pages focusing on other keywords.

OLD: Baking Tips for the Very Best Homade Cookies
PROBLEM: Misspelling

NEW: Baking Tips for the Very Best Homemade Cookies
SOLUTION: This is a huge oversight. While I have my share of spelling mistakes within my posts, having a spelling mistake in the title is inexcusable.

OLD:Find A Good Job By State, Occupation, Salary and Much Much More
PROBLEM: Too many Muches

NEW: Find A Good Job By State, Occupation or Salary | Job Search Articles
SOLTUION: There was no verb in the title when I felt it needed one. Plus the addtion of “find” may help them pick up a few longtail keywords. Adding things like “much much more” is a waste of time and space. It adds no value. Why not use that space to add a keyword of value or just leave it off.

Where do you put the title tag? Visit the post on creating HTML Head sections.