Exercise - Additional Metadata

Create an HTML page that includes the additional metadata elements such as:

The page description.
The name of the author.
The icon for a page – the favicon.
And the canonical tag.

Solution

The index.html source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>

    <!-- Additional metadata: -->
    <meta name="description" content="A short description about the content on this web page.">
    <meta name="author" content="Sample Name">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="canonical" href="https://www.example.com/">
</head>
<body>
    
</body>
</html>

Notes about the icon path

If the icon was placed in some images/ folder, we would write:

<link rel="icon" href="images/favicon.ico" type="image/x-icon">

Or, on a live server, with the root folder path / included, it would be:

<link rel="icon" href="/images/favicon.ico" type="image/x-icon">

Explanation

This HTML page expands on our previous exercise and introduces additional metadata elements:

The meta description element.
The author's name.
The favicon for the page.
And the canonical address - the preferred URL for this page.

<!-- Additional metadata: -->
<meta name="description" content="A short description about the content on this web page.">
<meta name="author" content="Sample Name">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="canonical" href="https://www.example.com/">

The above index.html source code represents a more complete HTML page, with additional metadata elements that should be included in all our HTML pages.