HTML Meta Tag

The HTML <meta> tag is used to provide meta data about a given HTML document. Metadata is “data about data” and is information used by the browser to properly render an HTML page such as;

  • Author information
  • Character set
  • Page title, description
  • Keywords
  • Expiry date
  • Viewport settings

Information in meta tags is important for Search Engine Optimization because search engines like Google use this metadata to understand what the webpage is all about.

A <meta> tag is an empty element but carries information within its attributes. Meta tags are always placed inside the <head> section and a web page can have multiple meta tags.

The content of meta tags is not visible to the user of a webpage but can be parsed by a machine for browsers, screen-readers, and search engines to better interpret the page.

Syntax of a meta tag

<meta attribute-name="value" content="some text">

The attributes for a meta tag are;

  • name: This attribute is used to define the name of the property and can take on value of application-name, author, description, generator, keywords, viewport
  • http-equiv: This attribute is used to get the HTTP response message header. and can take on values of content-security-policy, content-type, default-style, refresh
  • 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. 

The example below shows how metadata can be added to a webpage using HTML <meta> tags.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="John Doe">
  <meta name="title" content="Learn Web Development">
  <meta name="description" content="HTML, CSS, JavaScript Tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript, React, PHP">
  <meta http-equiv="refresh" content="45">
</head>

The name attribute can take on various values depending on what you want to present your page to search engines for example;

  • keywords: for stating the important keywords that are present on the web page 
  • description: gives a brief/short description of what the web page is all about
  • author: for mentioning the name of the author of the webpage 
  • viewport: sets the user’s visible area of the page according to the device size. This is very important for making the webpage responsive
  • title: specifies the title of the page.

HTML <meta> http-equiv Attribute

The http-equiv attribute provides an HTTP header for the information/value of the content attribute. This attribute takes on values of;

  • content-security-policy – Specifies a content policy for the document for example;
    <meta http-equiv=”content-security-policy” content=”default-src ‘self'”>
  • content-type – Specifies the character encoding for the document for example;
    <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
  • default-style – Specified the preferred style sheet to use for example;
    <meta http-equiv=”default-style” content=”the document’s preferred stylesheet“>
  • refresh – defines a time interval for the document to refresh automatically for example;
    <meta http-equiv=”refresh” content=”45″> will refresh the page every after 45 seconds