Open In App

Explain use of Meta tags in HTML

Meta Tag(<meta>) is a HTML component that gives the metadata about a HTML document. MetaData can be characterized as data that gives the data of different information or basic information about information. It is an empty tag, for example, it just has an initial tag and no end tag. They are always present inside the <Head> tag and are utilized to portray Page portrayals, Certain Keywords, Author of the Document, viewport settings, determining character sets, and so on.
They are used by Web Browsers, Search Engines, and other Web Services to rank the web pages accordingly.

Syntax : 

<head>
   <meta attribute-name = "value"/>
</head>

Attributes: The following attributes with their values are described below:

Example 1: This example illustrate the use of the Meta tag in HTML.




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8" />
    <meta name="description" content=
        "Free Computer Science Content" />
    <meta name="keywords" content="HTML" />
    <meta name="author" content="GFG" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
    <p>Meta Tags are used in this HTML Web page</p>
</body>
  
</html>

Output:

Meta Tags are used

 

Uses of Meta Tags in HTML:

1. Specifying Important Keywords: The meta tag contains important keywords that are present on the web page and is utilized by the web browser to rank the page according to searches. Search Engine Optimization is another term for this optimizing the SEO rank of the content.

Example 2:The following example specifies use of the Keywords in the meta tag.




<!DOCTYPE html>
<html>
  
<head>
    <!-- meta tag starts -->
    <meta name="keywords" content=
        "Meta Tags HTML GFG Meta Data " />
    <!-- meta tag ends -->
  
</head>
  
<body>
    <p>This is a MetaTags Web page</p>
</body>
  
</html>

Output:

Specifying Keywords in the metatag

We can see that a few keywords have been provided in the example above, which will aid the web browser in ranking the web page.

2. Automatic Refresh: A specified time will be mentioned in the meta tag after which the webpage will be automatically refreshed.

Example 3: This example describes the use of the refresh attribute value with the meta tag.




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- meta tag starts -->
    <meta name="revised about" 
        content="GeeksforGeeks" />
    <meta http-equiv="refresh" content="8" />
    <!-- meta tag ends -->
</head>
  
<body>
    <p>We are using refresh meta tag</p>
</body>
  
</html>

Output: As you can observe in the above example the web page will be reloaded after 8 seconds as mentioned in the <meta> tag.
 

The time after which the webpage has to be reloaded is mentioned in the metatag 

3. Specifying Author of the Webpage: MetaTag allows us to mention the name of the author of the webpage as follows.

Example 4: This example specifies the author of the website.




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- meta tag starts -->
    <meta name="author" content="U Phani Teja" />
    <!-- meta tag ends -->
      
</head>
  
<body>
    <p>
        We are specifying name of 
        the Author in the Meta Tag
    </p>
</body>
  
</html>

Output: In this example, the name of the author is specified in the <meta> tag

Providing the Author’s name in the meta tag 

4. Providing a Description of the web page: A brief description of the web page can be included in the Meta tag, which will help the web page rank on the internet.

Example 5: This example specifies the Description of the web page.




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- meta tag starts -->
    <meta name="description" 
        content="All About Meta tags" />
    <!-- meta tag ends -->
  
</head>
  
<body>
    <p>
        A brief Description of the WebPage 
        is present in the webapage
    </p>
</body>
  
</html>

Output: In the this example, a small description of the web page is given in the <meta> tag.

Providing a brief description in the metatag


Article Tags :