Module 10: Metadata & SEO

📖 What is Metadata?

Metadata is data about data. In HTML, metadata lives in the <head> and describes your page to browsers, search engines, and social media platforms. Users don't see it directly, but it profoundly affects how your page appears and performs.

Why Metadata Matters

Search Engines: Google uses metadata to understand and rank your page
Social Media: Facebook, Twitter, LinkedIn use metadata to create link previews
Browsers: Use metadata for bookmarks, history, and mobile rendering
Accessibility: Screen readers and assistive technologies rely on metadata

🔍 Essential SEO Meta Tags

Title Tag (Most Important!)

The <title> is the single most important on-page SEO element. It appears in:

Browser tabs
Search engine results (as the clickable headline)
Social media link previews
Browser bookmarks

<title>HTML Beginner Course - Learn HTML Free | Ethioweb.net</title>

💡 Title Best Practices: Keep it under 60 characters, put important keywords first, include your brand name at the end, and make every page title unique.

Meta Description

This appears under your title in Google search results. While it doesn't directly affect rankings, it dramatically affects click-through rates.

<meta name="description" 
      content="Master HTML from scratch with Ethioweb.net's free comprehensive course. Build real websites and earn your certificate. Start learning today!">
            

💡 Description Best Practices: 150-160 characters, include a call-to-action ("Learn more", "Start today"), make it compelling and accurate.

Other Important Meta Tags

<!-- Author -->
<meta name="author" content="Ethioweb.net">

<!-- Keywords (less important now, but still used by some search engines) -->
<meta name="keywords" content="HTML, course, beginner, web development, learn HTML">

<!-- Robots (tells search engines what to do) -->
<meta name="robots" content="index, follow">
<!-- index = add to search results, follow = follow links on this page -->

<!-- Canonical URL (prevents duplicate content issues) -->
<link rel="canonical" href="https://ethioweb.net/html-course/">
            

📱 Open Graph Tags (Facebook, LinkedIn, WhatsApp)

Open Graph (OG) tags control how your page appears when shared on social platforms. Without them, platforms guess what to show — often poorly.

<!-- Open Graph Protocol -->
<meta property="og:title" content="HTML Fundamentals Course - Ethioweb.net">
<meta property="og:description" content="Master HTML from scratch. Free course with certificate.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ethioweb.net/html-course/">
<meta property="og:image" content="https://ethioweb.net/images/course-banner.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Ethioweb.net">
<meta property="og:locale" content="en_US">
            

💡 OG Image Size: Use 1200×630 pixels for optimal display on Facebook and LinkedIn. The image should be eye-catching and include minimal text.

🐦 Twitter Cards

Twitter uses its own meta tags for link previews. There are several card types:

summary: Small image + title + description
summary_large_image: Large featured image
app: For mobile app promotion

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ethioweb">
<meta name="twitter:creator" content="@ethioweb">
<meta name="twitter:title" content="HTML Fundamentals Course">
<meta name="twitter:description" content="Learn HTML from scratch with our free course.">
<meta name="twitter:image" content="https://ethioweb.net/images/course-banner.jpg">
            

✏️ Exercise 10.1: Optimize a Page for SEO

Your Task

Create seo-optimized.html for a fictional coffee shop in Addis Ababa:

Write an optimized <title> (under 60 chars, keywords first)
Write a compelling <meta name="description"> (150-160 chars)
Add author, keywords, and robots meta tags
Add complete Open Graph tags (title, description, type, url, image, site_name)
Add Twitter Card tags (card, title, description, image)
Include a canonical link
Write visible content: <h1>, 2 paragraphs, and a contact section

📝 Module 10 Quiz

🎯 Module Summary

✅ Metadata in <head> describes your page to search engines and social platforms
✅ <title> is the most important SEO element (keep under 60 chars)
✅ Meta description affects click-through rates (150-160 chars)
✅ Open Graph tags control Facebook/LinkedIn/WhatsApp previews
✅ Twitter Cards control Twitter link previews
✅ Canonical links prevent duplicate content penalties

← Previous Module Next: Module 11 →