Metadata and SEO

What you'll learn

What goes in the <head>, how it controls the browser tab, search results and link previews, and the basics of search engine optimisation.

Why it matters

Before anyone reads your page, they see its title and description in search results or in a chat preview. Good metadata gets clicks and helps search engines understand the page.

Explanation

The <head> holds metadata: information about the page, not shown on the page itself.

• <meta charset="utf-8">: the character set, so accents and emoji display correctly. Put it first.
• <meta name="viewport" content="width=device-width, initial-scale=1">: makes the page scale properly on phones.
• <title>: shown in the browser tab and as the headline in search results. Keep it under about 60 characters and make each page's title unique.
• <meta name="description" content="...">: the summary often shown under the title in search results. About 150 characters.
• <link rel="icon" href="...">: the small tab icon.
• Open Graph tags such as og:title, og:description and og:image control the preview card when the link is shared in chat or social media.
• <html lang="en">: the page language, used by screen readers and translators.

SEO (search engine optimisation) is helping search engines find and understand your page. Besides metadata: use one clear h1, descriptive headings and link text, alt text on images, and fast pages that work on mobile.

Example

Step-by-step walkthrough

1. lang="en" on <html> declares the language.
2. charset and viewport come first, so the browser reads and scales the page correctly.
3. <title> appears on the tab. Press Run: the preview prints its own title under the heading, read from document.title.
4. The description meta is the snippet search engines may show.
5. The three Open Graph tags decide how a shared link looks in a chat app.
6. Only <body> content is visible on the page.

Try it yourself

Change the <title>, then press Run to see the new value printed.

Read the page titleHTML / CSS

Editable code<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Learn HTML in a Weekend | LearnStack</title> <meta name="description" content="Short lessons that teach HTML from scratch."> </head> <body> <h1>Metadata demo</h1> <p id="out"></p> <script> document.getElementById("out").textContent = "Title: " + document.title + " | Language: " + document.documentElement.lang; </script> </body> </html>

Run ResetCopyCtrl+Enter to run

Common mistakes

• The same title on every page.
• A missing viewport tag, which makes mobile pages tiny.
• Keyword stuffing. Write for people; search engines notice spam.
• Forgetting lang. Screen readers may pronounce text wrongly.

Quick quiz

Summary

• The <head> holds metadata: charset, viewport, title, description, icon, Open Graph.
• A unique title and clear description help SEO and click-through.
• Set lang on <html>.

You finished the HTML track. Try the practice exercises to lock it in.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Learn HTML in a Weekend | LearnStack</title>
  <meta name="description" content="Short lessons that teach HTML from scratch, with examples you can run.">
  <meta property="og:title" content="Learn HTML in a Weekend">
  <meta property="og:description" content="Short, friendly HTML lessons.">
  <meta property="og:image" content="https://example.com/preview.png">
</head>
<body>
  <h1>Learn HTML in a Weekend</h1>
  <p>The tab title comes from the title tag in the head.</p>
</body>
</html>