🔍 Module 12 · SEO🟡 IntermediateLESSON 41

SEO Meta Tags

⏱️ 15 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress22%

🎯 What you'll learn: The <title> tag, meta description, canonical, robots, and how Open Graph + Twitter Cards control social share previews.

Section 1

title & meta description

The <title> tag is the single most important on-page SEO element — it becomes the clickable blue link in search results. The meta description doesn't directly affect rankings but strongly influences click-through rate as the snippet text underneath.

title-description.html

HTML

<title>Advanced HTML Course — Semantic, SEO, APIs | BitWithBite</title>
<meta name="description" content="27 free advanced HTML lessons covering semantic markup, accessibility, SEO and more.">

💡

Keep both within display limits

Google typically truncates titles around 60 characters and descriptions around 155-160 — write for humans first, but stay aware of the cutoff.

Section 2

canonical & robots

A canonical link tells search engines which URL is the "real" one when the same content is reachable at multiple addresses (with/without trailing slash, tracking params, etc.) — preventing duplicate-content dilution. robots controls crawling and indexing behavior.

canonical-robots.html

HTML

<link rel="canonical" href="https://bitwithbite.com/courses/course-html-advanced.html">
<meta name="robots" content="index, follow">

robots value	Effect
index, follow	Normal — index this page, follow its links (the default)
noindex, follow	Don't show in search results, but still follow links
noindex, nofollow	Fully exclude — don't index, don't follow links

Section 3

Open Graph & Twitter Cards

Open Graph (og:*) tags control how a link appears when shared on Facebook, LinkedIn, Slack, and most other platforms. Twitter Cards (twitter:*) do the same specifically for X/Twitter, which doesn't always read Open Graph tags the same way.

og-twitter.html

HTML

<meta property="og:title" content="Advanced HTML Course">
<meta property="og:description" content="27 free advanced HTML lessons.">
<meta property="og:image" content="https://bitwithbite.com/og.png">

<meta name="twitter:card" content="summary_large_image">

🧩 Knowledge Check — Lesson 41

5 questions to test your understanding.

1. What is arguably the single most important on-page SEO tag?

2. Does meta description directly boost rankings?

3. What does rel="canonical" prevent?

4. What does content="noindex, nofollow" tell search engines?

5. What do Open Graph tags primarily control?

💪

Coding Challenge — Lesson 41

Apply what you learned · Intermediate Level

Challenge: Write a Complete Meta Block

Write the full head meta block for a blog post: title, meta description, canonical link, meta robots="index, follow", og:title, og:description, og:image, and twitter:card="summary_large_image".

💡 Show hints if you're stuck

Keep title under ~60 characters and description under ~160.

Finished this lesson?

Mark it complete to track your progress.

Lesson 41 of 62Module 12 — SEO

SEO Meta Tags

title & meta description

canonical & robots

Open Graph & Twitter Cards

Lesson 41 Complete!