HTML Meta tags

Meta tags provide information about the properties of the webpage given to the browser. It will impact how the page will be displayed in the browser.

They don't appear on the webpage, but they are present in the head tag of the HTML document, as they are machine parsable, web browsers can comprehend. They are the metadata of the webpage.

Meta tags are crucial as they will tell the browser; what the webpage is all about and; how it can display in the search results in the browser. It will increase the web page's visibility. Thus, they are crucial for Search Engine Optimization.

• charset attribute

  It tells the browse in which character set, the website is written.
  The above code tells the browser to use UTF-8 character encoding. UTF-8 is the most common character encoding used. It encodes human-readable text into a machine language or vice versa.

  <meta charset="UTF-8">

• content attribute

  It gives the value of the information associated with the http-equiv or name attribute.

  <meta content="text">

• http-equiv attribute

  It acts as an HTTP response header (carries information for Request and Response body) to define settings without using an actual HTTP response header.
  The HTTP-equiv and content pair provide the HTTP header with its corresponding value.

  < meta http-equiv="refresh" content="30">

  Values of http-equiv:

  1. content-security-policy

     It adds security to the webpage as it protects from data theft, injection, or other malpractice.
     
     <meta http-equiv="content-security-policy" content="default-src'self'">

  2. content-type

     Specifies the type of the data in the body of an entity by sending type/subtype as information.
     
     <meta http-equiv="content-type" content="text/html">

  3. default-style

     It tells to use the specified stylesheet as the default stylesheet if no stylesheet is linked.
     
     <meta http-equiv="default-style" content="default_stylesheet.css">

  4. refresh

     Defines a time after which the document has to refresh itself. In the code below, it will refresh the page after every 30 seconds.
     
     <meta http-equiv="refresh" content="30">

• name attribute

  It specifies the name of the metadata.

  <meta name="author"content="John Doe" >

  1. applicationName

     It specifies the name of the web application
     
     <meta name="applicationName" content="homepage">

  2. author

     It specifies the name of the author of the web application
     
     <meta name="author" content="John Doe">

  3. generator

     In this tag, we mention the name of the program or software we used to create our website.
     
     <meta name="generator" content="FrontPage 4.0">

  4. keywords

     In this tag, we give a list of keywords that will give more information to the search engines. When a user searches for a keyword, that is present in this tag, then the search engine will show this website as one of the search results.
     
     eg. keywords for a hospital website
     
     <meta name="keywords" content="best cancer hospital in India, hospitals in India, the best neurologist in India, a best orthopedic hospital in India, super specialty hospital near me">

  5. viewport

     It is the area where our webpage will b displayed. In this tag in the content attribute, the values passed are the width="device-width" and the initial scale=1.0.
     Width tells the browser to display the page befitting the device's screen width. The initial scale is the initial zoom when visiting a page.
     
     <meta name="viewport" content="width=device-width, initial-scale=1.0">