Metadata - Data about data
➔ Metadata is information about the underlying data that is important to know.
➔ <meta> tag is usually used to specify character set, keywords, author of the document, page descriptions, and viewport settings.
➔ <meta> tag can be used multiple times, and must be inside <head> tag.
➔ The information in <meta> tag are used by browsers, search engine, or other web services.
➔ Metadata is not displayed on the page.
➔ The meta tag is a self-closing tag so it doesn't need to be explicitly closed but the xhtml syntax requires closing. Other self closing tags are img, br, hr, input, and link.
Meta - description
➔ A good meta description should be between 120 and 160
➔ The description may optionally include the brand name.
➔ Since SEO has a significant impact on the use of descriptions, attention should be paid to providing accurate descriptions in the meta tag.
syntax
<meta name="description" content="A good meta description should be between 120 and 160 characters long to describe the content of the page, the description can optionally include the brand name.">
Common uses of the meta tag.
➔ Character Encoding: This specifies the character set used to display content on the page. A character set includes all the letters, text signs, symbols, emojis for all languages around the glove. UTF-8 is the recommended standard for the web.
syntax
<meta charset="UTF-8">
➔ Description: It is a short, relevant, and concise summary of a page's content that search engines often use as a snippet in search results.
syntax
<meta name="description" content="Online free tutorials">
➔ Viewport: The viewport attribute of the meta tag is essential to making a web page responsive or mobile friendly. It tells browsers how to control the dimensions and scaling of a page on different device screen sizes, especially on mobile devices.
syntax
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Important considerations
➔ Meta tags cannot be used anywhere other than within the head tag of an HTML document.
➔ Meta tags are self-closing tags so explicitly closing them is optional and not required.
➔ The keyword attribute in the meta tag is not used for SEO ranking, while other attributes like description, viewport, etc. can contribute to improving SEO.
Element Attributes
| Attribute | Value | Description |
|---|---|---|
charset |
character_set | This specifies character encoding in which the document is encoded. |
content |
text | This attribute contains the value of the http-equiv or name attribute, depending on which one is used. |
http-equiv |
content-security-policy&tab; content-type default-style refresh |
Provides an HTTP header for the data / value of the content attribute. |
name |
application-name author description generator keywords viewport |
This attribute specifies the metadata name. |
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<!-- Example: Meta Tag -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="w3context Team">
<meta name="description" content="Online tutorials">
</head>
<body>
<h1>Example meta tag.</h1>
<h2>The meta information are used by browsers, search engine, or other web services.</h2>
<p>Metadata is not displayed on the page.</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.