#html #tutorial #intermediate

Day 8: Metadata & SEO

Day 8: The Invisible Engine

What happens in the <head> stays in the <head>… mostly. This is where we talk to machines (browsers, search engines, social media bots).

The Essentials

<head>
    <!-- Character Set (Crucial for emojis & symbols) -->
    <meta charset="UTF-8">

    <!-- Mobile Responsiveness (Crucial for phones) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Page Title (Shows in Tab & Google Search Result) -->
    <title>My Awesome Page - Best Recipes</title>
</head>

Description & Keywords

<!-- The gray text under the link in Google -->
<meta name="description" content="Discover the best family recipes for pizza, pasta, and cake. Fast and easy cooking.">

<!-- (Less important nowadays, but still exists) -->
<meta name="keywords" content="cooking, recipes, food, dinner">

Social Media (Open Graph)

Ever shared a link on Twitter/Facebook/Discord and a nice card popped up? That’s Open Graph (OG).

<!-- Facebook / Discord / LinkedIn -->
<meta property="og:title" content="My Tasty Pizza Recipe">
<meta property="og:description" content="The secret to the perfect crust.">
<meta property="og:image" content="https://mysite.com/pizza.jpg">
<meta property="og:url" content="https://mysite.com/pizza">

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">

Favicons

The little icon in the browser tab.

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Homework for Day 8:

  1. Create a detailed <head> for your homepage.
  2. Write a catchy <meta name="description">.
  3. Add Open Graph tags assuming you have a cool cover image.
  4. Bonus: Find a favicon generator online, create one, and link it.

Day 9: Native Superpowers. Things you didn’t know HTML could do!

← Previous
Day 7: Semantic HTML
Next →
Day 9: Native HTML5 Features