Open-Source Internship opportunity by OpenGenus for programmers. Apply now.
Reading time: 20 minutes | Coding time: 10 minutes
In simple words, metadata is the data (information) about data. In webpages, metadata comprises of key words and phrases that describe the content of the webpage. Other metadata may be the author of the document, last modified, page description, etc.
The <meta> tag provides information about a webpage. This metadata is not displayed on the webpage but is machine parsible.
This metadata is usually used by browsers (how to display or reload pages), or by search engines (keywords). HTML5 introduced a method to modify the viewport (visible area of the webpage to the user) through the <meta> tag.
Attributes
- Attribute: charset
Value: character set like ASCII or UTF-8 or UTF-16
Description: Specifies the character encoding for the webpage
Example:
<meta charset="UTF-8">
- Attribute: content
Value: text
Description: Gives the value associated with the http-equiv or name attribute
- Attribute: http-equiv
Values: content-type, default-style, refresh
Description: Provides an HTTP header for the information/value of the content attribute
Example:
<meta http-equiv="Content-Type" content="text/html">
<meta http-equiv="refresh" content="15">
- Specifying the character encoding for the document:
<meta http-equiv="content-type" content="text/html">
- Specifying the preferred stylesheet to be used
<meta http-equiv="default-style" content="*preffered stylesheet*">
- Refreshing the document every 15 seconds:
<meta http-equiv="refresh" content="15">
- Attribute: name
Values: application-name, author, description, keywords, viewport, generator
Description: Specifies a name for the metadata
Examples:
- Defining the name of the web application the page represents
<meta name="application-name" content="OpenGenus">
- Defining the author:
<meta name="author" content="XYZ">
- Defining a description:
<meta name="description" content="Tutorial on how to use meta tag in webpages">
- Defining keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
- Setting the viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Specifying the software package used to generate the page:
<meta name="generator" content="FrontPage 4.0">
- Attribute: scheme
Value: format/URI
Description: Not supported in HTML5. Specifies a scheme to interpret the value of the content attribute
Usage Rules
- The
<meta>tag will always be defined in the<head>element. - Metadata is always given name-value pairs.
- The content attribute must be defined if
nameorhttp-equivattribute is defined.
Example document:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Tutorial about meta data in web pages.">
<meta name="application-name" content="OpenGenus">
<meta name="author" content="Isha Gautam">
<meta http-equiv="Content-Type" content="text/html">
<meta http-equiv="refresh" content="15">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Hello
</p>
</body>
</html>
Why we need metadata in web pages?
Adding metadata in web pages is suggested as:
-
It enables search engines such as Google and DuckDuckGo to index the webpage easily. Note that pages without metadata may be indexed as well if the search engine scrapes the webpage content which almost all search engines do.
-
The result of your webpage is presentable as a result on a search engine. In this case, metadata is used and if it is not present, it will remain empty.
-
Apart from search engines, metadata gives software an idea regarding the page content without fetching the page content and hence, makes it program friendly
As you know know how to add metadata to your webpage. Go and ensure all pages have the information they need.
