HTML <meta> Tag

06 Jun, 2022
The metadata means information about data. The <meta> tag regularly used to give watchwords, portrayals, author data, and other metadata that might be utilized by the program to deliver the document accurately or in simple words, it provides important information about a document. Adding the meta tag while making the webpage or website, is a good practice because search engines like Google search for this meta tag in order to understand the information provided by the website. It is also helpful if the user search for a specific website then the search engine result page will display snippets in search results that will provide information related to that website. These tags are basically used to add name/value pairs to describe properties of HTML documents, such as expiry date, author name, list of keywords, document author, etc ie., it is used to specify a character set, page description, keywords, author of the document, and viewport settings. This tag is an empty element because it only has an opening tag and no closing tag, but it carries information within its attributes. A web document can include one or more meta tags depending on information, but in general, it doesn’t affect the physical appearance of the document.
Syntax:
<meta attribute-name="value">
Attributes: This tag accepts four attributes which are mentioned and described below.
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. 
Note: The meta tag also accepts Global Attributes in HTML
Key Points:
The <meta> tag contents are not visible on your browser, but they can be parsed by the machine.
They are just used to give additional information about the HTML document.
The <meta> tags are added to our HTML document for the purpose of Search Engine Optimisation.
They are added inside the <head> tag & are used by browsers, search engines & other web services.
Through <meta> tag, designer can control the viewport.
Example: This simple example illustrates the use of the meta tag in the head tag that provides information.
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 <meta> 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: This example describes the <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: This example describes the use 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: This example describes the use 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 <meta> 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: This example describes the use 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 
Internet Explorer 
Microsoft Edge 12 and above
Mozilla Firefox 1 and above
Opera 
Safari
ghoshsuman0129
bhaskargeeksforgeeks
jochenhansoul
mahathi560
kumargaurav97520
HTML-Tags
HTML
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS