Meta Tags & SEO

📚 Lesson 15 of 25 • ⏱ 12 min read • Intermediate

What are Meta Tags?

Meta tags live inside <head> and give browsers and search engines information about your page. They are not visible on the page itself.

Essential Meta Tags

HTML

<head>
  <!-- CHARACTER SET: Always first -->
  <meta charset="UTF-8">

  <!-- VIEWPORT: Makes page mobile-friendly -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- TITLE: Shown in browser tab and Google results (~60 chars) -->
  <title>HTML Tutorial for Beginners | AnnaUniversityPlus</title>

  <!-- DESCRIPTION: Shown under title in Google (~160 chars) -->
  <meta name="description"
        content="Free HTML tutorial for beginners. Learn HTML from scratch with clear examples.">

  <!-- CANONICAL: Tells Google the preferred URL -->
  <link rel="canonical" href="https://annauniversityplus.com/courses/html/">

  <!-- ROBOTS: Control what Google can index -->
  <meta name="robots" content="index, follow">
</head>

Open Graph — For Social Sharing

When someone shares your page on WhatsApp, Facebook, or Twitter, Open Graph tags control the preview card:

HTML

<!-- Open Graph -->
<meta property="og:title"       content="HTML Tutorial — AnnaUniversityPlus">
<meta property="og:description" content="Free HTML course for beginners.">
<meta property="og:image"       content="https://annauniversityplus.com/images/og.png">
<meta property="og:url"         content="https://annauniversityplus.com/courses/html/">
<meta property="og:type"        content="website">

<!-- Twitter/X Card -->
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:title"       content="HTML Tutorial — AnnaUniversityPlus">
<meta name="twitter:image"       content="https://annauniversityplus.com/images/og.png">

Schema.org — Structured Data

Structured data helps Google show rich results (stars, prices, FAQs) in search. Add it as a <script type="application/ld+json">:

HTML

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "HTML Tutorial for Beginners",
  "description": "Free complete HTML course",
  "provider": {
    "@type": "Organization",
    "name": "AnnaUniversityPlus",
    "sameAs": "https://annauniversityplus.com"
  }
}
</script>

SEO Checklist for Every Page

Unique <title> tag with keyword (under 60 chars)
Unique meta description (under 160 chars)
One <h1> with main keyword
Canonical URL set
Images have descriptive alt text
Internal links to related pages
Page loads fast (compressed images, minimal CSS/JS)

← Audio & Video Next: Project — Portfolio Page →