Lesson 12 of 12

HTML Head, Meta Tags and SEO

Visitors never see the <head> of your page, yet it controls a surprising amount: the text in the browser tab, how the page fits a phone screen, the snippet in search results and the preview card when someone shares your link on WhatsApp. In this final lesson of the HTML track, you will learn what belongs in the HTML head and why. You met the head briefly in HTML Introduction; now it is time to fill it properly.

HTML head essentials for every page

These lines should appear in the head of every page you build, in roughly this order:

TagWhy it matters
<meta charset="utf-8">Declares the character encoding so text in any language displays correctly. Keep it first.
<meta name="viewport" content="width=device-width, initial-scale=1">Tells mobile browsers to use the device width instead of pretending to be a desktop screen. Without it, responsive CSS does not work properly.
<title>The page title in the browser tab, bookmarks and usually the clickable headline in search results. Required.
<meta name="description">A summary that search engines may show under the title.

Also set the language on the <html> element, for example lang="en", or lang="en-IN" for English as written in India. Screen readers use it to choose the right pronunciation.

Writing a good title

The title is the single most important piece of text in the HTML head. Each page needs its own unique, descriptive title. A useful pattern is the page topic first, then the site name, e.g. “Filter Coffee Recipe – Kavya’s Kitchen”.

  • Put the most important words at the start; long titles get cut off in search results, so roughly 50–60 characters is a practical target.
  • Do not repeat the same title on every page or stuff it with keywords.
  • Match the title to the page’s <h1> in meaning, even if the wording differs slightly.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Try changing the title and description, then run again -->
  <title>Filter Coffee Recipe – Kavya's Kitchen</title>
  <meta name="description" content="Make strong, frothy South Indian filter coffee at home with a steel filter, fresh decoction and hot milk. Step-by-step guide with tips.">
  <style>
    body { font-family: sans-serif; }
    .result { max-width: 36rem; border: 1px solid #ddd; padding: 0.75rem; border-radius: 8px; }
    .result-title { color: #1a0dab; font-size: 1.2rem; margin: 0; }
    .result-url { color: #006621; font-size: 0.85rem; margin: 0.2rem 0; }
    .result-desc { color: #444; margin: 0; }
  </style>
</head>
<body>
  <p>A rough idea of how your title and description could appear in search results:</p>
  <div class="result">
    <p class="result-title" id="t"></p>
    <p class="result-url">www.example.com › recipes › filter-coffee</p>
    <p class="result-desc" id="d"></p>
  </div>
  <p id="lengths"></p>


  <script>
    const desc = document.querySelector('meta[name="description"]').content;
    document.getElementById('t').textContent = document.title;
    document.getElementById('d').textContent = desc;
    document.getElementById('lengths').textContent =
      'Title: ' + document.title.length + ' characters. Description: ' + desc.length + ' characters.';
  </script>
</body>
</html>

Tip: The result box is only an approximation drawn with CSS. Real search results vary by device and search engine, and long titles are shortened with an ellipsis.

The meta description

The description does not directly change your ranking, but a clear, accurate summary can persuade people to click. Write it for humans: say what the page offers in one or two sentences, about 150–160 characters. Search engines may still choose a different snippet from your page text if they think it matches the search better.

Watch out: <meta name="keywords"> is ignored by Google and adds nothing. Spend your effort on good titles, descriptions and content instead.

Canonical and robots

The same page can sometimes be reached at several addresses, for example with and without tracking parameters. A canonical link, <link rel="canonical" href="https://www.example.com/trips/mahabalipuram/">, tells search engines which address is the main one.

The robots meta tag controls indexing. <meta name="robots" content="noindex"> asks search engines not to show the page in results – useful for thank-you pages or internal search results. If you leave it out, the default is to index the page and follow its links.

Social sharing with Open Graph

When you share a link on social media or messaging apps, the preview card is built from Open Graph meta tags such as og:title, og:description and og:image. Note that these use a property attribute instead of name. The image should be an absolute URL; 1200 × 630 pixels is a widely used size.

The example below shows a complete HTML head. A small script reads the head and prints what it found, so you can see that this information really is in the page even though it is not displayed.

<!DOCTYPE html>
<html lang="en-IN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mahabalipuram Day Trip from Chennai | Coastal Trails</title>
  <meta name="description" content="Plan a one-day trip from Chennai to Mahabalipuram: Shore Temple, Five Rathas, Arjuna's Penance, travel time and tips.">
  <link rel="canonical" href="https://www.example.com/trips/mahabalipuram/">

  <!-- Social sharing (Open Graph) -->
  <meta property="og:title" content="Mahabalipuram Day Trip from Chennai">
  <meta property="og:description" content="Temples, rock carvings and the sea – all in one day.">
  <meta property="og:image" content="https://www.example.com/images/shore-temple-1200x630.jpg">
  <meta property="og:url" content="https://www.example.com/trips/mahabalipuram/">
  <meta property="og:type" content="article">

  <meta name="theme-color" content="#0b5394">
  <style>
    body { font-family: sans-serif; }
    pre { background: #f4f4f4; padding: 0.5rem; white-space: pre-wrap; }
  </style>
</head>
<body>
  <h1>Mahabalipuram day trip</h1>
  <p>The head is invisible, but this script reads it and lists what it found:</p>
  <pre id="out"></pre>

  <script>
    let report = 'Title: ' + document.title + '\n';
    report += 'Language: ' + document.documentElement.lang + '\n\n';
    document.querySelectorAll('meta[name], meta[property]').forEach(function (meta) {
      const key = meta.getAttribute('name') || meta.getAttribute('property');
      report += key + ' → ' + meta.content + '\n';
    });
    const canonical = document.querySelector('link[rel="canonical"]');
    report += '\ncanonical → ' + canonical.href;
    document.getElementById('out').textContent = report;
  </script>
</body>
</html>

Favicons, CSS and JavaScript

The HTML head also connects your page to other files:

  • <link rel="icon" href="https://mugilan93.com/favicon.svg" type="image/svg+xml"> adds the small icon shown in the browser tab. Many sites also add <link rel="apple-touch-icon" href="https://mugilan93.com/apple-touch-icon.png"> for phone home screens.
  • <link rel="stylesheet" href="css/style.css"> loads an external CSS file. This is the normal way to add styles to a website, as you will see in CSS Introduction.
  • <script src="js/app.js" defer></script> loads JavaScript. The defer attribute downloads the file without blocking the page and runs it after the HTML has been parsed. More on this in JavaScript Introduction.

HTML and SEO beyond the head

Meta tags help, but search engines mostly judge the content itself. Everything you have learned in this track supports good SEO: one clear <h1> and a logical heading outline, descriptive link text, meaningful alt text, semantic regions like <main> and <article>, and fast-loading images with width and height. Read Semantic HTML for SEO for a deeper look, and Core Web Vitals for Designers to learn how speed is measured.

Congratulations – you have completed the HTML track. You can now structure any page with meaningful markup. The natural next step is to make it look good with CSS Introduction.

Further reading

Key takeaways

  • Every page needs <meta charset="utf-8">, the viewport meta tag, a unique <title> and a lang attribute on <html>.
  • Write descriptive titles (topic first, roughly 50–60 characters) and human-friendly meta descriptions.
  • The keywords meta tag is ignored by Google; use canonical links and the robots meta tag where needed.
  • Open Graph tags (og:title, og:description, og:image) control link previews.
  • The head also loads favicons, CSS (<link rel="stylesheet">) and JavaScript (<script defer>).

Quick quiz

Check what you learned – pick an answer.

1. What does the viewport meta tag do?

2. Which tag is ignored by Google?

3. Which attribute do Open Graph meta tags use for their name?

Practice exercise

Write a complete head for a page about "Trekking in Kodaikanal" on a site called "Hill Trails". Include charset, viewport, a good title, a meta description, a canonical link to https://www.example.com/treks/kodaikanal/ and Open Graph title and image tags. Add an h1 in the body.

Show a hint

Remember the title pattern: page topic first, then the site name.

Show the solution
<!DOCTYPE html>
<html lang="en-IN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Trekking in Kodaikanal – Routes and Tips | Hill Trails</title>
  <meta name="description" content="Easy and moderate trekking routes in Kodaikanal, the best months to go, what to pack and safety tips for first-time trekkers.">
  <link rel="canonical" href="https://www.example.com/treks/kodaikanal/">
  <meta property="og:title" content="Trekking in Kodaikanal">
  <meta property="og:image" content="https://www.example.com/images/kodaikanal-trek-1200x630.jpg">
</head>
<body>
  <h1>Trekking in Kodaikanal</h1>
</body>
</html>

Progress is saved in this browser only.