Introduction to HTML Meta Tags.

Kushal DasKushal Das
4 min read

What are HTML Meta tags ❓

HTML meta tags are used to provide information about a webpage to search engines and web browsers. They are placed in the head section of an HTML document and are not visible to the user. Meta tags consist of a name and a content attribute, and they typically look like this:

<meta name="name" content="content">

Meta tags are used to provide a variety of information about a webpage, such as a title, description, keywords, and viewport. They can also be used to specify the character set, refresh rate, and other settings for the webpage.

Different types of HTML Meta tags 🚀

  1. The title tag: This tag specifies the title of the webpage, which is displayed in the browser tab and used by search engines as the title of the webpage in search results.

     <head>
       <title>My Webpage</title>
     </head>
    
  2. The description tag: This tag provides a brief description of the webpage's content. It is often used by search engines as the description of the webpage in search results.

     <head>
       <meta name="description" content="This is a webpage about HTML meta tags.">
     </head>
    
  3. The keywords tag: This tag specifies a list of keywords relevant to the webpage. It is not as commonly used as it once was, as search engines have become more sophisticated at understanding the content of a webpage.

     <head>
       <meta name="keywords" content="HTML, meta tags, SEO">
     </head>
    
  4. The robots tag: This tag specifies whether search engines should index the webpage and follow its links.

     <head>
       <meta name="robots" content="index, follow">
     </head>
    
  5. The viewport tag: This tag specifies the area of a webpage that is visible to the user. In the context of HTML meta tags, the viewport meta tag is used to specify the size and zoom level of the viewport.

    The viewport meta tag is typically placed in the head section of an HTML document, like this:

     <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
    

    The width the attribute specifies the width of the viewport in pixels.

    The initial-scale the attribute specifies the initial zoom level of the webpage.

    The viewport meta tag is often used in conjunction with responsive design to ensure that a webpage looks good on a wide range of devices. By setting the width attribute to device-width, the viewport will automatically adjust to the width of the device being used to view the webpage. This allows the layout and styles of the webpage to adapt to the size and capabilities of the device.

  6. The author tag: This meta tag in HTML is used to specify the author of a webpage. It is placed in the head section of an HTML document, like this:

     <head>
     <meta name="author" content="Kushal Das">
     </head>
    

    The content attribute of the author meta tag specifies the name of the author. It is typically used to provide credit to the person or organization responsible for creating the content of the webpage.

    The author meta tag is not as commonly used as other meta tags, such as the title and description tags, as it does not provide information that is directly relevant to the content of the webpage. However, it can still be useful to include the author meta tag, particularly if the content of the webpage is original and you want to ensure that you receive credit for your work.

Code for all meta tags mentioned above💻

<head>
  <title>My Webpage</title>
  <meta name="description" content="This is a webpage about HTML meta tags.">
  <meta name="keywords" content="HTML, meta tags, SEO">
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Kushal Das">
</head>

Conclusion 💥

It's important to note that while meta tags can provide valuable information about a webpage, they are not a replacement for well-written, relevant content. Search engines place more weight on the content of the webpage itself, rather than the meta tags when determining the relevance of a webpage to a particular search query.

Many other HTML meta tags can be used to provide information about a webpage, such as the revised tag, and the copyright tag. However, the most commonly used meta tags are the title, description, viewport, and robots tags.


I hope these things help you as much as I do. Please drop a comment 💬 about your feedback or ideas, it will help me a lot to draw experience on next article.

Let's connect! Find me on the web 🔗

If you have any Queries or Suggestions, feel free to reach out to me.

Happy Coding :)❤️

2
Subscribe to my newsletter

Read articles from Kushal Das directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Kushal Das
Kushal Das

A Full Stack Web Developer | A Mentor | A freelancer💻 | Data science enthusiastic | Open source enthusiastic | Create and write content | Enjoy learning new techs | love meeting new people! 😊