HTML Head & Meta Tags

The invisible tags that control SEO, social sharing and loading.

Lesson 36 of 44Intermediate12 min read

The <head> never appears on the page itself, but it controls a lot. It decides how your page appears in search results, what the preview card looks like when someone shares a link in a chat, whether the layout works on phones, and which CSS and JavaScript files load.

Most of these tags take a minute to write, and getting them right has a direct effect on how many people find and click on your page. Getting them wrong can mean a page that looks tiny on mobile or shows the same title as every other page on your site.

The essential head tags

HTML
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banana Bread Recipe (Easy, 1 Bowl) | Sprout Kitchen</title>
<meta name="description" content="A moist banana bread made in one bowl in 10 minutes. Uses 3 ripe bananas and no mixer.">
  • title: aim for 50 to 60 characters and put the most important words first. It appears in the browser tab and as the clickable headline in search results.
  • description: about 150 to 160 characters. It doesn't directly affect rankings, but search engines often show it under the headline, so it decides whether people click.

Write both for people first. A title that clearly says what the page offers usually performs better than one packed with keywords.

Linking CSS, JavaScript and icons

HTML
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<script src="app.js" defer></script>
  • <link rel="stylesheet"> loads a CSS file.
  • <link rel="icon"> sets the small icon in the browser tab, called a favicon.
  • <script defer> downloads JavaScript without blocking the page, and runs it after the HTML has been read.

Tags that help search engines

  • <link rel="canonical" href="https://www.site.com/page"> says "this is the official address of this page". It stops duplicate versions, such as with and without www or with tracking parameters, from competing with each other.
  • <meta name="robots" content="noindex"> asks search engines not to list a page, which is useful for thank-you pages and internal search results.
  • <html lang="en"> declares the language of the page.

Social sharing with Open Graph tags

When someone pastes your link into a chat app or social network, these tags build the preview card:

HTML
<meta property="og:title" content="Easy Banana Bread">
<meta property="og:description" content="One bowl, 10 minutes of work.">
<meta property="og:image" content="https://www.site.com/img/banana-bread.jpg">
<meta property="og:url" content="https://www.site.com/banana-bread">
<meta name="twitter:card" content="summary_large_image">

Without them, the app guesses, and often picks the wrong image or no image at all. A clear picture and title make people far more likely to tap the link.

HTML Head and Meta Tags Syntax

An SEO-ready head

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Topic: Benefit | Brand</title>
  <meta name="description" content="What the page offers, in one or two sentences.">
  <link rel="canonical" href="https://www.example.com/page">
  <link rel="icon" href="/favicon.svg">
  <link rel="stylesheet" href="/styles.css">
  <script src="/app.js" defer></script>
</head>

HTML Head and Meta Tags Summary

  • The <head> holds information about the page that isn't displayed.
  • Every page needs charset, viewport, a unique <title> and a meta description.
  • Use <link> for CSS and favicons, and <script defer> for JavaScript.
  • A canonical link tells search engines which URL is the official one.
  • Open Graph tags control how your page looks when shared.

HTML Head and Meta Tags Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Title and description in action

Run it: the title doesn't appear in the result (it belongs in the tab), but JavaScript can read it. Change the title and run again.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sourdough for Beginners | Sprout Kitchen</title>
  <meta name="description" content="Bake your first sourdough loaf this weekend with a simple 5-step method.">
</head>
<body>
  <h1>Sourdough for Beginners</h1>
  <p>Tab title: <strong id="t"></strong></p>
  <script>
    document.getElementById("t").textContent = document.title;
  </script>
</body>
</html>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 6The title: topic first, brand last.
  2. Line 7The description, written for people. It's your advert in search results.
  3. Lines 13 to 15A tiny script copies the title onto the page so you can see it.
Example 2

A full head for a real page

This is a typical professional head. Nothing is visible except the body text; the value is all behind the scenes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Handmade Ceramic Mugs | Clay & Co</title>
  <meta name="description" content="Wheel-thrown mugs made in Cornwall. Free UK delivery over £40.">
  <link rel="canonical" href="https://www.clayandco.example/mugs">
  <meta property="og:title" content="Handmade Ceramic Mugs">
  <meta property="og:image" content="https://www.clayandco.example/img/mugs.jpg">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>
<body>
  <h1>Handmade Ceramic Mugs</h1>
</body>
</html>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 8Canonical: the one true URL for this page.
  2. Lines 9 to 11Open Graph and Twitter tags for link previews.
  3. Line 12The favicon in the browser tab.

Common HTML Head and Meta Tags Mistakes

Same title on every page

Don't
<title>Home</title>   <!-- on every page -->
Do
<title>Contact Us: Opening Hours & Map | Clay & Co</title>

Unique, descriptive titles help both search engines and people with many tabs open.

Script in the head without defer

Don't
<head>
  <script src="app.js"></script>
</head>
Do
<head>
  <script src="app.js" defer></script>
</head>

A plain script in the head blocks the page from showing until it downloads and runs, and it can't find elements that don't exist yet. defer fixes both.

HTML Head and Meta Tags in Real Projects

What Google shows

Search for anything and look at a result: the blue headline is usually the <title>, the green/grey URL is the canonical address, and the snippet is often the meta description. Sharing that link in Slack or iMessage shows the og:image, og:title and og:description. All from the head.

HTML Head and Meta Tags Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the two most important SEO tags.

<>Learn Guitar Chords | StrumSchool</title>
<meta name="" content="Learn the 10 chords that unlock 1000 songs.">
Multiple choiceeasy

Which tag makes a page display properly on phones?

Multiple choicemedium

What does rel="canonical" tell search engines?

Fix the bugmedium

This head is missing a viewport tag, the script blocks loading, and the title is just "Page". Fix all three (choose any descriptive title).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page</title>
  <script src="data:text/javascript,"></script>
</head>
<body><h1>Moon Phases Explained</h1></body>
</html>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • A viewport meta tag exists
  • The title is more descriptive than "Page"
  • The script uses defer

HTML Head and Meta Tags Quiz

4 questions to check what you learned.

  1. Is the <head> content visible on the page?

    • Yes
    • Only the meta tags
    • No
    • Only on mobile

  2. Roughly how long should a meta description be?

    • 10 characters
    • About 150 to 160 characters
    • 50 characters
    • 1000 characters

  3. What is og:image used for?

    • The favicon
    • The background image
    • The picture shown when the link is shared on social media
    • Image SEO alt text

  4. What does defer do on a script tag?

    • Delays the script by 5 seconds
    • Prevents the script from running
    • Runs it before the page loads
    • Downloads it in parallel and runs it after the HTML is parsed

HTML Head and Meta Tags Challenge

Write an SEO head

Write a full page for a dog-walking business with:

  1. charset and viewport meta tags
  2. A <title> of 20 to 65 characters
  3. A meta description of 70 to 170 characters
  4. A canonical link to https://www.happypaws.example/
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
  <h1>Happy Paws Dog Walking</h1>
</body>
</html>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • charset meta
  • viewport meta
  • Title is 20 to 65 characters
  • Description is 70 to 170 characters
  • Canonical points to the home page

Related HTML topics

03Page StructureThe DOCTYPE, html, head and body elements that every web page is built on.26Semantic ElementsStructure pages with elements that describe what each part is.38AccessibilityBuild pages everyone can use, including screen-reader and keyboard users.
Esc
↑↓ to navigateEnter to open