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