Curriculum ▸ HTML Zero → Mastery ▸ Lesson 6: The <head> & Essential Metadata Foundations

Lesson 6 — The <head> & Essential Metadata Metadata & SEO basics

Estimated time: 45–65 minutes · You’ll craft a modern <head> and validate it

Learning Goals

Validate this page

Part 1 — What is the <head>?

The <head> holds metadata about the page: title, character set, viewport, links to styles, icons, and hints for search engines & social networks. It doesn’t render visible content.

Rule of thumb: Content users read goes in <body>. Everything else about the document itself goes in <head>.

Part 2 — Must-Have Tags

Place these near the top of your <head>:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title — Site Name</title>
<meta name="description" content="One-sentence summary that entices a click and matches page content.">

Part 3 — Favicons, App Icons & Theme

<link rel="icon" href="/images/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32.png">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
<meta name="theme-color" content="#121212">
Tip: Keep icons in an images/ folder and ensure paths are correct relative to the page URL.

Part 4 — Social Previews (Open Graph & Twitter)

<meta property="og:title" content="Page Title — Site Name">
<meta property="og:description" content="Compelling summary of the page.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:image" content="https://example.com/images/social-card.jpg">

<meta name="twitter:card" content="summary_large_image">

These control how your page appears when shared to social platforms.

Part 5 — Robots & Canonical

<meta name="robots" content="index,follow"> <!-- default behavior; often omit -->
<link rel="canonical" href="https://example.com/page.html">
Caution: Don’t accidentally ship noindex on real pages.

Part 6 — Light Performance Hints (Optional)

<!-- Preconnect to a font host -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Preload a critical CSS file -->
<link rel="preload" href="/css/above-the-fold.css" as="style">
<link rel="stylesheet" href="/css/above-the-fold.css">

Use sparingly and only when you’re sure the resource is needed on first paint.

Practice Tasks

  1. Create lesson-06/index.html and add a complete <head> with must-haves.
  2. Add icons (use placeholders) and set theme-color.
  3. Fill in Open Graph tags using your local absolute URL (or repo Pages URL).
  4. Run the W3C Validator and fix any issues.

Quick Quiz

  1. Which meta tag enables responsive behavior on mobile?
  2. Where do favicons belong and how are they linked?
  3. What’s the purpose of og:image?
  4. When should you use noindex?
Sample answers
  • <meta name="viewport" content="width=device-width, initial-scale=1">.
  • In your project (e.g., images/) and linked via <link rel="icon" ...> and apple-touch-icon.
  • To define the image used in social link previews.
  • On pages that should not appear in search (e.g., admin, duplicate test pages).

Lesson 6 Dictionary

Terms and elements introduced in this lesson.

apple-touch-icon
Icon for iOS/Android home screen shortcuts.
base (tag)
Sets the base URL for relative links; use carefully to avoid breaking paths.
Canonical (link)
<link rel="canonical"> points to the preferred URL of the page.
charset (meta)
Declares the document’s character encoding (e.g., UTF-8).
description (meta)
Concise summary shown in search snippets.
Favicon (icon)
The small icon shown in tabs and bookmarks, linked via rel="icon".
<head>
Metadata container for title, meta, links, and scripts.
link (element)
References external resources or provides hints (stylesheet, icon, preload, preconnect).
meta (element)
Key–value metadata using name/content or property/content.
Open Graph (OG)
Meta protocol for social previews: og:title, og:description, og:image, og:url.
robots (meta)
Hints for search indexing: index/noindex, follow/nofollow.
theme-color (meta)
Sets the browser/UI theme color on supported devices.
<title>
Page title used by the browser and in search results.
Twitter Card
Meta for Twitter previews, e.g., twitter:card=summary_large_image.
viewport (meta)
Controls the layout viewport on mobile: width=device-width, initial-scale=1.