Metadata: Give your webpages the information it needs

Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

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 name or http-equiv attribute 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.