Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

Part 3.5HTML metadata

Part 3.5HTML metadata

Metadata

Metadata is information that is designed to describe another piece of data. In HTML, metadata would describe the page.

The purpose of metadata is to make it easier for tools like search engines to crawl a website and obtain the information they need. Metadata specifies the title and so on, allowing the search crawler to ensure it has come to the correct page.

Metadata in HTML

In HTML metadata describes the document. This metadata comes in the form of <meta> tags. These are self-closing tags that store information about the page.

Metadata is put inside the <head> of the document:

HTML
<html>
	<head>
		<title>Sample page</title>
<meta name="keywords" content="test, page, on, html" />
</head> <body> My first text </body> </html>

The previous sample shows the keywords metadata added to the page. This list of keywords is sometimes crawled by search engines to attempt to find out what a document is about.

All metadata tags follow the same structure. For instance, for a description tag:

HTML
<html>
	<head>
		<title>Sample page</title>
<meta name="description" content="This page talks about how to create HTML." />
</head> <body> My first text </body> </html>

Finally, the viewport meta tag is used to set the maximum and minimum zoom factor of a website on smartphones. Although this is more related to CSS and web design than it is to HTML, it is a meta tag that is often used in HTML:

HTML
<html>
	<head>
		<title>Sample page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head> <body> My first text </body> </html>

What this tag is doing is limiting the user and preventing them from zooming in or out on a smartphone. The devices that pick up on this meta tag are ones such as tablets and smartphones.

Feedback 👍
Comments are sent via email to me.