Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Explain use of Meta tags in HTML ?

  • Last Updated : 24 Aug, 2021

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 : 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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

Attributes:

  • name: This attribute is used for indicating the character encoding for the HTML Document.
  • http-equiv: This attribute is used to get the HTTP response message header.
  • content: This attribute is used to specify properties value.
  • charset: This is used for indicating the character encoding for the HTML Document.

Example:



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:

HTML




<!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:

HTML




<!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.

HTML




<!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.

HTML




<!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




My Personal Notes arrow_drop_up
Recommended Articles
Page :