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 name="keywords"
content="Meta Tags, Metadata" />
</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 name="keywords"
content="Meta Tags, Metadata" />
<meta name="description"
content="Geeksforgeeks is a computer science portal." />
</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 name="keywords" content="Meta Tags, Metadata" />
<meta name="description" content="Learn about Meta Tags." />
<meta name="revised detail" content="last updated time" />
</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 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" />
</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 name="keywords used "
content="Meta Tags, Metadata" />
<meta name="description about"
content="Meta tags learning." />
<meta name="author"
content="Akash Kumar17" />
</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