HTML · Module 02 · Lesson 7 of 54

Page Title & SEO Meta Description

What is the Title & SEO Meta?

Think of search engine results like a card index at a library. When search engines like Google list your website, they show a title card and a short snippet explaining what the site is about.

In HTML, you control this search listing using:

<title>: The text that appears on the browser tab and as the blue clickable header in search results.

<meta name="description" content="...">: A short paragraph (under 160 characters) summarizing the page, which appears as the snippet text below the title in search results.

Why does it matter?

A descriptive title and a good description are crucial for SEO (Search Engine Optimization). If your page title is just "Page 1" and has no description, search engines might rank you lower, and users won't know what your site is about.

How to write it

Both of these tags must be placed inside the <head> section of your HTML:

<head>
  <title>Home | LearnHTML</title>
  <meta name="description" content="Learn HTML and CSS online with our interactive playground.">
</head>

Page Title | LearnHTML

https://lhtml.com/lessons

SEO Meta descriptions appear here as search snippets.

Common Mistakes

Using multiple title tags: A page should only have exactly one <title> element inside the <head>.

Making description meta content too long: Keep description text concise (150-160 characters). Google will truncate anything longer than that with an ellipsis (...).

Quick Reference

<title> — Sets the page title in browser tabs and search results.

<meta name="description" content="..."> — Provides a short summary of the page for search engine results.

Your Task

In the `<head>`, create: 1. A `<title>` containing 'Home'. 2. A `<meta>` tag with `name="description"` and `content="Tutorial web page"`.

index.html

Type code above to start the lesson.

Live Preview