September 16, 2016

The Title Element

title tag

The Html Title Element

The Html title TAG or otherwise known as the title element is one of the most widely overlooked parts of a web page. A little extra time and consideration can go a long way when defining a title for an Html document. Not only should the title element accurately describe the content on the web page for search engines and viewers, but it should also serve as one of the most important areas for SEO (Search Engine Optimization) keywords. The most important place being the content on the page itself. It will show up in three specific areas. First, the browser tab will contain a short version of the title. Second, is in search engine result pages (SERP’s). The title defined in the title element will be the actual HYPERLINK that a user clicks on to visit the site. And finally, when someone bookmarks the page; the title will show up in their favorites list.

The title should be eye-catching and contain the appropriate keywords that you’re trying to rank for. The keywords need to be relevant to the actual content on the web page. For example, if you create a page that displays meatloaf recipes; you wouldn’t want the title to be something like, “John’s Award Winning Desserts“. It would make more sense to title the document, “Award Winning Meatloaf Recipes by John“. FYI, the title tag is required in all Html documents and each document can only have one title. If no title element exists; the document will not validate as Html. Search engines can choose to display an alternate title than what was defined in the title element if it thinks there is a more relevant and better explanation of what the page is about. The new title is obtained through content on the actual web page. Don’t forget to close the title element. If you leave out the closing </title> tag; the rest of the document will not display. Because there is no specific limit to how long the title can be; the browser will interpret the entire document as the title and will display a blank page.

The size of the title element is very important. A good sized title should be somewhere between 50 and 64 characters. To be even more precise, 50 to 55 would ensure that your complete title will display in search engines about 95% of the time and would give you the most amount of keyword usage possible. This clearly can’t be done for every single web page but getting as close to that as possible would give you the most benefits. The most important keywords should appear in the beginning of the title; followed by the secondary keywords; and finally, your brand name, if applicable. If your brand is well known and established, then it might make more sense to place it in the beginning followed by your main keywords. Refer to the images below, for an example of a properly worded and sized title about “web development” web page.

index.html EXAMPLE 1: HTML TITLE ELEMENT

html title tag

DISPLAYED PAGE EXAMPLE 1

Html title element

In the above example, the title element contains 56 characters and the most important keywords are placed in the beginning, followed by the secondary keywords. Some sample content has been added to the body element to give a more relevant example. That is going to wrap up this short lesson on the Html title element. It’s a good idea to consider readability when creating a well sized and worded title. Having a catchy title that makes users want to click on the link is just as important as everything else we discussed in this lesson. Thanks for reading, we’ll see you next time.

index.html Source Code


<!doctype html>
<html>
<head>
<title>Learn Web Development: Html, CSS, and Javascript Courses</title>
</head>
<body>

<h2 style="text-align: center; background: blue;">Learn Web Development</h2>

<p style="width: 60%;">Interested in becoming a web developer? Building websites is rewarding and fun.
A web developer typically should have experience in HTML, CSS, and Javascript.
Start learning web development today by clicking on one of our free courses.</p>

</body>
</html>

posted by Clear Coded Programming

Please Leave a comment