HTML — Lesson 14

HTML Head & Meta Tags

Configuring the head section for SEO, sharing, and performance.

By Majed Qandeel · Jul 26, 2026 · Lesson 14 of 25

HTML Head & Meta Tags

The <head> section contains metadata about the page that is not displayed to users but is crucial for browsers, search engines, and social media.

Essential Head Elements

<head> <meta charset="UTF-8"> <title>Page Title - Site Name</title> <meta name="description" content="A 150-160 character description for search engines."> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="/favicon.ico"> </head>

Viewport Meta Tag

This tag is required for responsive design. Without it, mobile browsers render pages at desktop width.

<!-- Standard responsive viewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0">

Open Graph Tags (Social Sharing)

<meta property="og:title" content="Page Title"> <meta property="og:description" content="Description for social media."> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:url" content="https://example.com/page">

Canonical URL

Prevents duplicate content issues by specifying the preferred version of a page.

<link rel="canonical" href="https://example.com/this-page">

Favicons & Apple Touch Icons

<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">

Complete Head Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Awesome Site</title>
  <meta name="description" content="Learn web development with interactive lessons.">
  <link rel="icon" href="/favicon.ico">
</head>
<body>
  <h1>Check the page source to see the head!</h1>
  <p>Right-click and select "View Page Source".</p>
</body>
</html>
Tip: Keep your title under 60 characters and your meta description under 160 characters. These appear in search engine results and directly affect click-through rates.

Practice what you learned in the Deoit Editor — a free, browser-based code editor.

Open Editor →