CodeBlanks Logo Icon CodeBlanks
Login Register

Meta description

HTML course · Advanced · Lesson 24/56

Learn description, author and robots meta tags.

What is a meta description?

When a search engine lists your page, it shows a short summary next to the <title>. That summary comes from the meta description tag: <meta name="description" content="...">.

The description explains the page in one or two sentences. It appears under the title in search results and shapes whether a visitor clicks. A well-written description raises the click-through rate.

The author and robots tags

<meta name="author"> names the person who wrote the page. <meta name="robots"> tells search engines how to treat the page.

Common robots values: index, follow (add to index, follow links), noindex (do not index) and nofollow (do not follow links). If you write noindex by mistake, the page disappears from search results.

How do you write a good description?

The description should stay under 155 characters; if you write longer, the search engine cuts the end with an ellipsis. Lead with the keyword, then explain the page's value.

Do not repeat the page title. Write a unique description for every page; duplicate descriptions do not help search engines. End with a call to action: "Read", "Explore", "Start".

Exercise Add meta tags for a blog post

Add three meta tags to the head for a blog post: <meta name="description" content="..."> (page summary, at least 10 characters), <meta name="author" content="..."> (author name) and <meta name="robots" content="index, follow">.

Show example solution 
<head>
  <title>Blog Post</title>
  <meta name="description" content="This week we explore modern web design trends in our blog post.">
  <meta name="author" content="Alex Smith">
  <meta name="robots" content="index, follow">
</head>

Test yourself

  1. Which one is the meta description tag?

    <meta name="..." content="...">
    • <meta name="keywords" content="blog, design">
    • <meta name="description" content="Modern web design trends.">
    • <meta charset="utf-8">
    • <title>About</title>
    Show answer

    <meta name="description" content="Modern web design trends."> — Correct. The name="description" attribute carries the page summary.

  2. Complete the meta description tag

    <meta name="description" content="____">
    Show answer 
    <meta name="description" content="This week we talk about modern web design.">

  3. Match the meta tag with its role

    name="description"
    Page summary
    name="author"
    Author name
    name="robots"
    Indexing rule
    charset
    Character encoding

All lessons in Advanced

1 Advanced media

  1. Lazy loading
  2. Decoding async
  3. Srcset and sizes
  4. Width/height and CLS
  5. Preload and prefetch
  6. Summary - Performance gallery

2 Picture and responsive images

  1. Picture and source
  2. Media attribute
  3. Type attribute
  4. Aspect ratio
  5. Background vs img
  6. Summary - Responsive hero

3 Project: Video player

  1. Project: Accessible video player
  2. Video skeleton
  3. Track and captions
  4. Poster and preview
  5. Project final - Video player

4 Complex forms

  1. Form autocomplete
  2. Hidden input
  3. File upload
  4. Range and color
  5. Output and form events
  6. Summary - Settings panel

5 Metadata and SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical and hreflang
  5. Title and slug strategy
  6. Summary - SEO package

6 Project: Schema.org markup

  1. Project: Schema.org markup
  2. Itemtype and itemid
  3. Itemprop
  4. Nested itemtype
  5. Project final - Structured data

7 Web components HTML

  1. Template element
  2. Slot element
  3. Custom element names
  4. Shadow DOM skeleton
  5. Declarative shadow DOM
  6. Summary - Card template

8 Templates and partials

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript and progressive
  6. Summary - Component skeleton

9 Project: Dashboard widget

  1. Project: Dashboard widget
  2. Widget skeleton
  3. Visual data structure
  4. Template and slot
  5. Project final - Widget

10 Advanced final

  1. Challenge - Responsive image
  2. Challenge - Accessible video
  3. Challenge - Complex form
  4. Challenge - SEO and structured data
  5. Challenge - Advanced capstone