html

HTML meta tag explained with examples

In HTML, a meta tag holds the information about a particular page. The meta-tag is named after meta-data that is data about data:For instance, linuxhint provides an extensive range of tutorials and guides for computing enthusiasts. However, the information/data about linuxhint will be provided by the meta-tags. This information is for the users and the search engines to guide them about the purpose or basic knowledge about that page.

The meta-tags are declared inside the head tag of an HTML document and are not visible on the web layout of that page. However, meta-tags of any webpage can be checked by using the keyboard shortcut CTRL+U or right click at any place on a web page and navigate to View page source option.

Following are the learning outcomes of this guide:

  • The importance of meta-tags
  • Types of HTML meta-tags
  • Using meta-tags in an HTML document with examples

Why meta-tags are important

Some of you might be exploring the purpose and importance of the meta-tags. This section provides a deep insight into the importance of meta-tags. The meta-tags are the key player in Search Engine Optimization of a webpage. The meta-tags are used by browsers and search engines to filter the content according to the search performed by any user. Furthermore, the keywords used in meta-tags enable web-browsers to rank the specific HTML page.

Several well-known browsers like Chrome, Firefox, Edge, Safari, and Opera do support meta-tags. By practicing proper meta-tags, one can get the following outcomes:

  • Positive impact on the number of users visiting the webpage
  • The engagement and traffic of a webpage can be increased

Types of meta-tags

Before getting into the usage, let’s have a look at the various types of meta-tags that could be used in a webpage.

  • Title: The title tag of an HTML page is used to show the purpose of that page in a few words.
  • Description: As the name directs, it provides a piece of short and precise information about an HTML page. A search engine shows the description of the webpage under the title.
  • Revision: A revision date of a specific page can be defined to show that you are updating the content with time.
  • Refresh: A page can be reloaded automatically using this meta tag.
  • Redirect: One can redirect the page to other pages.
  • Author: The author’s name can be specified using this tag.
  • Charset: The character set is required by the browser and this meta tag is used to define the character set being utilized in an HTML document.
  • viewport: This meta tag sets the size and zoom scale of an HTML page.

How meta-tags are used

From the above section, you would have gone through the basic information of HTML meta-tags. Here, we have provided a few examples that demonstrate the usage of the above-stated meta-tags:

Title: The title of an HTML document gives an overview in a few words. The title of an HTML document is displayed on the top of the web browser as shown in the image below:

Graphical user interface Description automatically generated

A title meta-tag can be created inside the head tag of an HTML document. For example, we have created a title meta-tag as shown in the following image:

Graphical user interface, text Description automatically generated

Description: A short and to the point description about an HTML page is provided by using the description tag. The following image shows the usage of description tags. It is recommended to write a description of up to 160 characters.

Text, website Description automatically generated

Revision: This meta-tag is used to denote the updating date of the page. It is recommended to update your content frequently and use this tag to show the date of recent update. This would help in ranking your HTML page. The following image shows that, on 1/1/2022 the content of this page was updated:

Refresh: For automatic refreshing, this meta tag can be used to specify the time limit for an auto refresh. In the following image, the auto-refresh time is set to 11 seconds:

Moreover, the same meta tag can be used to specify the URL in the content attribute. Your page will be redirected to that URL after the specified time limit is reached. For instance, the following image shows the page will be redirected to www.linuxhint.com after 8 seconds:

Text Description automatically generated

Author: A website comprises several HTML pages and these pages can be built by several authors. To give credits, the author’s name can be defined in the meta tag. For instance, the following image shows that the author of this page is Mike Anroz:

Text Description automatically generated

Charset: Most of the browsers use utf-8 to encode characters on a web page. However, one can use ascii, but it has been replaced by utf-8. Whenever an HTML meta-tag is started in an HTML editors like Sublime Text and VS code, you would see that it automatically sets the character set to utf-8:

Text Description automatically generated

Viewport: The viewport functionality allows you to get your HTML page compatible with several devices. A charset and viewport meta-tags are called by default in several HTML editors like Sublime Text. The viewport is used here and the following image shows the size and zoom scale of the HTML image:

Text Description automatically generated

Conclusion

The meta tags assist in getting the content in an easy and efficient way. Although these tags are not visible, however, they act as ghost players in SEO. This article contains the demonstration of several meta-tags used in an HTML document. After following this guide, you will get a basic understanding of various types of meta-tags, their importance, and how to use them on an HTML page.

About the author

Adnan Shabbir