How to use the <title> tag to define HTML document title?

Front End ScriptsJavascriptWeb Development

The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It gives a brief and exact description of the documents content. It is also the default name used if the user wishes to bookmarks the web page.

Syntax

<title> Page title content </title>

The <title> HTML plays an important role in on-page search engine optimization, it helps the search engine users decide to click to your site rather than another. Badly-formatted title tags can harm your search rankings and make your links less appealing even though it appears on Google's first page, so it's important to get them right in first place.

Search engine consider content page title while ranking the page, hence content of a title tag has great importance in SEO (search engine optimization). The longer, descriptive title have an edge over a shorter title. Title content is one of the components that helps search engine algorithms to organize how the web pages are to be displayed in search result. In addition to that title is also the first thing to grab the attention of the user on the search

The different purposes of title tags make them important for SEO, usability, and social sharing. To sum up, title tags are used for −

  • The brief title and description of a page as appears at the top of a browser window
  • The default name for user-created bookmarks
  • Search engine rankings
  • The clickable headline of a search result
  • The headline of a link when shared on social media

Tips to Create Great HTML Title Tag

  • Character length between 50 − 60 characters - search engine would show only first 55 - 60 characters of a page title, hence try to have title not longer than that. If the title is long, then make sure that important information comes between 55 - 60 characters.
  • Meaningful title − Always have a descriptive phrase, or a term-definition pairing for glossary or reference-style pages.
  • Include Important Keywords − It always better to have your important keyword first in your title and the brand or company name can come the end. As user is mostly looking out for the products rather than the company or brand. Hence crucial keyword is to be placed first.
  • Title related to page − When create a title always bear in mind that the title should be related to the page or else search engine will display a different title in the search results.
  • Human readable − Remember that, while search engines rank your pages, human beings are the ones actually reading and using them. A human-readable title tag makes your page clickable on SERPs and memorable in bookmarks.
  • Unique title for every page − The title tag should always be appropriate to the page content, so each page needs its own individual title tag to help differentiate it from your other pages. It's also very likely that each page will need a few different keywords, so optimize each title tag accordingly.

Example 1

<title>Awesome interesting stuff</title>

Example 2

<title>Comprehensive DevOps Prime Pack - Tutorialspoint</title>

Example 3

<title> Shopping Cart details - Tutorialspoint </title>

Accessibility concerns

It is important to provide an accurate and concise title to describe the page's purpose.

A common navigation technique for users of assistive technology is to read the page title and infer the content the page contains. This is because navigating into a page to determine its content can be a time consuming and potentially confusing process. Titles should be unique to every page of a website, ideally surfacing the primary purpose of the page first, followed by the name of the website. Following this pattern will help ensure that the primary purpose of the page is announced by a screen reader first. This provides a far better experience than having to listen to the name of a website before the unique page title, for every page a user navigates to in the same website.

Example

<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>
raja
Updated on 17-Aug-2022 13:32:11

Advertisements