Explain use of Meta tags in HTML ?

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 : 
<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>
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
HTML-Questions
HTML-Tags
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Angular File Upload
Form validation using jQuery
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array