HTML Meta data

HTML allows meta tags, that carry additional important information about an HTML document.

HTML documents can have one or more meta tags.

A meta tag is an empty element, that doesn’t need a closing tag, but carries information using attributes.

Meta tags do not impact the visual content of a web page, so it doesn’t matter whether you include them or not when it comes to appearance.

Metadata is used by search engines for indexing a web page, so including appropriate data always helps.

Meta tags can be added within the head element (<head></head>) of a HTML document.

A meta tag can have the below attributes

  • name - for the property name, which can be anything like the author, keywords, description, include, revised, generator, etc.,
  • content - for property value
  • schema - specifies schema to interpret property’s value
  • http-equiv -  used to set values for headers, content-type, expires, refresh, and cookies.

Examples

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Arun Kumar">
<meta name="description" content="Random codez application description">
<meta name="keywords" content="Random Codez, HTML, tutorial, meta data">
<meta name="revised" content="Random Codez, 11/10/2021">
<meta http-equiv="refresh" content="3">
<meta http-equiv="refresh" content="3; url=https://randomcodez.com">
<meta http-equiv="Content-Type" content="text/html;  charset=UTF-8">

Sample HTML document with metadata

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page Title</title>
    <base href="/">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="author" content="Arun Kumar">
    <meta name="description" content="Random codez application description">
    <meta name="keywords" content="Random Codez, HTML, tutorial, meta data">
    <meta name="revised" content="Random Codez, 11/10/2021">
    <meta http-equiv="refresh" content="3">
    <!-- <meta http-equiv="refresh" content="3; url=https://randomcodez.com"> -->
    <meta http-equiv="Content-Type" content="text/html;  charset=UTF-8">

    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello World!!</h1>
    <p>Some important tags In this example, let's look at some important tags that we use within head element.</p>
    <ul>
        <li>title</li>
        <li>base</li>
        <li>charset</li>
        <li>viewpoint</li>
        
        <li>icon</li>
        <li>styles</li>

    </ul>
</body>
</html>

Overall

The meta tags carry some of the important details of an HTML document required for SEO optimization.