SEO10 min25 XP

Meta Tags & SEO

Learn Meta Tags & SEO with live examples, interactive editor, and Shiv AI code review.

Meta Tags and SEO

Meta tags live inside <head> and give instructions to browsers, search engines, and social media platforms. They are invisible to users but critical for how your page appears in Google search results, on Twitter cards, and in WhatsApp link previews.

Essential Meta Tags

Example 1 — Complete SEO Head Section

<head>
  <!-- Technical: always first -->
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <!-- Page identity -->
  <title>Learn HTML Free | 22 Lessons | CIWeb</title>
  <meta name="description"
        content="Learn HTML from scratch with 22 free interactive lessons at CIWeb. Live code editor, AI tutor, and downloadable certificate."/>
  <meta name="keywords"
        content="learn HTML, HTML course, free HTML, CIWeb, web development"/>

  <!-- Open Graph: for Facebook, WhatsApp, LinkedIn -->
  <meta property="og:title" content="Learn HTML Free — CIWeb"/>
  <meta property="og:description" content="22 free HTML lessons with live editor and AI tutor"/>
  <meta property="og:image" content="https://ciweb.in/og-image.png"/>
  <meta property="og:url" content="https://ciweb.in"/>
  <meta property="og:type" content="website"/>

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" content="Learn HTML Free — CIWeb"/>
</head>

ciweb.in • Google Preview

Learn HTML Free | 22 Lessons | CIWeb

Learn HTML from scratch with 22 free interactive lessons at CIWeb. Live code editor, AI tutor, and downloadable certificate.

The description shows in Google search results. Keep it 150-160 characters. It directly affects click-through rate from search results.

robots and canonical

Example 2 — Advanced Meta Tags

<!-- Tell Google not to index this page -->
<meta name="robots" content="noindex, nofollow"/>

<!-- Canonical: avoid duplicate content issues -->
<link rel="canonical"
      href="https://ciweb.in/courses/html"/>

<!-- Author and language -->
<meta name="author" content="Shiva Saini"/>
<meta http-equiv="Content-Language" content="en-IN"/>

<!-- Theme color for mobile browser -->
<meta name="theme-color" content="#e8401c"/>

noindex prevents Google from showing the page in results. canonical tells Google which URL is the "original" to avoid penalizing duplicate content.

Meta Tag Reference

title50-60 chars. Most important SEO tag. Shows in Google results and browser tabs.

description150-160 chars. Shows in Google results. Affects click-through rate, not ranking directly.

og:image1200x630px image. Shows when page is shared on WhatsApp, Facebook, LinkedIn.

twitter:cardsummary_large_image shows a big image on Twitter/X. summary shows small thumbnail.

robotsControl Google crawling. noindex = don't show in search. nofollow = don't follow links.

Title Tag is #1 SEO Factor

The title tag is the single most powerful on-page SEO element. Put your main keyword near the beginning. "Learn HTML Free | CIWeb" will rank better for "learn HTML" than "CIWeb | Free HTML Learning". Google uses the title to decide what search queries to show your page for.

Why og: stands for Open Graph

Open Graph was created by Facebook in 2010 to control how pages appear when shared on social media. It was named after the "social graph" — the network of connections between people. Today all major platforms (WhatsApp, LinkedIn, Twitter, Slack) read Open Graph tags to generate link previews.

Prev Next Lesson

Coding Infinite Report Bug Certificate

CIWeb HTML Course • 22 Lessons • Free

Explain with Analogies

Shiv AI explains this lesson using real-life analogies — no code, just clear examples.

Click the Explain tab to generate analogies.

index.html

Live Preview

Write code then click Deep Analyze

What is the purpose of the og:image meta tag?

Explanationog:image (Open Graph image) controls what image appears when your page is shared on WhatsApp, Facebook, LinkedIn, or Slack. Use a 1200x630 pixel image for the best results across all platforms.

Build Challenge

SEO-Optimized Page

Build a complete head section with charset, viewport, title (50-60 chars), description, og:title, og:description, og:image, and twitter:card.

Requirements (6 to pass)

title

description

og:title

og:image

twitter:card

canonical

solution.html

Preview

Community Wall

Lesson 13

0/500

0/20 lines