Open In App

HTML <meta> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML <meta> tag provides metadata or information about the HTML document. It includes information like character set, description, keywords, and other important details. <meta> tags always go inside the <head> element

It helps in defining the page’s title, encoding, author, and viewport settings, etc. These tags are not visible on the web page but play a vital role in structuring and categorizing content for browsers and search engines.

Note: The meta tag also accepts Global Attributes in HTML.

Syntax:

<meta attribute-name="value">

Attributes:

Attribute Values

Description

name

This attribute is used to define the name of the property.

http-equiv

This attribute is used to get the HTTP response message header.

content

This attribute is used to specify properties value.

charset

This attribute is used to specify a character encoding for an HTML file.

scheme

Determines a scheme to be utilized to decipher the value of the substance attribute. 

Example: Implementation of meta tag in the head tag

HTML




<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,
                   initial-scale=1,
                   maximum-scale=1">
  <meta name="description"
        content=
        "A Computer Science portal for geeks.
         It contains well written, well thought
         and well explained computer science and
         programming articles, quizzes and practice/competitive
         programming/company interview Questions.">
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
</head>
 
<body>
   
  <h2>GeeksforGeeks</h2>
  <p>
    This is an example of meta tag
  </p>
 
</body>
 
</html>


Output:

HTML tag

There are various other ways to implement the <meta> tag that can use the following attribute values:

Highlighting 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: The Implementation of <meta> tag with the name & content attributes & their value is set as the keywords & some content.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <!-- meta tag starts -->
  <meta name="keywords"
        content="Meta Tags, Metadata" />
  <!-- meta tag ends -->
</head>
 
<body>
  <p>
    Hello GeeksforGeeks!
  </p>
</body>
 
</html>


Output:

Hello GeeksforGeeks!

Providing a Description of the web page:

A brief/short description of the web page can be included in the Meta tag, which will help the web page rank on the internet.

Example: The Implementation of the <meta> tag to provide the website’s description. 

HTML




<!DOCTYPE html>
<html>
 
<head>
  <!-- meta tag starts -->
  <meta name="keywords"
        content="Meta Tags, Metadata" />
  <meta name="description"
        content="Geeksforgeeks is a computer science portal." />
  <!-- meta tag ends -->
</head>
 
<body>
  <p>
    GeeksforGeeks!
  </p>
</body>
 
</html>


Output:

GeeksforGeeks

Document Revision Date:

The meta tag is used to give the information about the last updated document. This information is used by various web browsers when refreshing the web page.

Example: The Implementation of the <meta> tag to provide the last updated document information.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- meta tag starts -->
    <meta name="keywords" content="Meta Tags, Metadata" />
    <meta name="description" content="Learn about Meta Tags." />
    <meta name="revised detail" content="last updated time" />
    <!-- meta tag ends -->
</head>
 
<body>
     
 
<p>GeeksforGeeks!</p>
 
 
</body>
 
</html>


Output:

GeeksforGeeks!

Automatic Refresh:

A specified time will be mentioned in the meta tag after which the webpage will be automatically refreshed ie., this meta tag is used to specify a duration after which the web page will keep refreshing automatically after the given duration.

Example: The below code will refresh the web page after 8 sec.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- meta tag starts -->
    <meta name="keywords about"
          content="Meta Tags, Metadata" />
    <meta name="description"
          content="Learning about Meta Tags." />
    <meta name="revised about"
          content="GeeksforGeeks" />
    <meta http-equiv="refresh"
          content="8" />
    <!-- meta tag ends -->
</head>
 
<body>
     
 
<p>GeeksforGeeks!</p>
 
 
</body>
 
</html>


Output:

Setting the tag attribute value to auto-refresh the webpage for the specified duration

Specifying Author of the Webpage:

MetaTag allows us to mention the name of the author of the webpage as follows.

Example: The Implementation of of the <meta> tag to provide the author’s details.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- meta tag starts -->
    <meta name="keywords used " content="Meta Tags, Metadata" />
    <meta name="description about" content="Meta tags learning." />
    <meta name="author" content="Akash Kumar17" />
    <!-- meta tag ends -->
</head>
 
<body>
    <p>GeeksforGeeks!</p>
</body>
 
</html>


Output:

GeeksforGeeks!

Browser Supports:

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Opera 12.1
  • Safari 1


Last Updated : 11 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads