Chapter 3.5☕ 16 min read

SEO Basics

Rank your page on Google — meta tags, semantic HTML, structured data. SEO means helping search engines understand what your page is about.

01What is SEO?

Search "Hyderabadi biryani near me" on Google — Paradise Biryani appears first. That's not luck — that's SEO. Paradise optimized their website for Google — right keywords, meta tags, fast loading, mobile friendly design.

SEO = Search Engine Optimization. Helping search engines understand your page. Crawlers (bots) read your page, index it, then rank it. Your job: send clear signals — what's on the page (title, headings), what's important (meta description, alt text), who it's for (structured data), and how accessible it is (speed, mobile, semantic HTML).

🔍

Biryani Shop Analogy: SEO is like Paradise's neon board — big "PARADISE BIRYANI" is visible (title), "Since 1953" (meta description). The clearer the signals, the more customers.

02HTML SEO Elements

Key HTML SEO elements:

<title> — Page title. 50-60 chars. Keywords first. <title>Hyderabadi Biryani Recipe | DevInHyderabad</title>. Every page unique.
<meta name="description"> — Page summary. 150-160 chars. Action-oriented. Shows below title in search results.
<meta name="keywords"> — IGNORED by Google since 2009. Skip it — put keywords naturally in content.
<link rel="canonical"> — Fix duplicate content. Tells Google which URL is the original.
<meta name="robots"> — Search engine instructions. noindex, nofollow for admin pages. Default = index + follow.
Open Graph (og:) meta tags — Social sharing preview. WhatsApp, Twitter, FB — og:title, og:description, og:image.
<meta name="viewport"> — Mobile responsiveness. REQUIRED — Google uses mobile-first indexing.
Heading hierarchy — h1 (one per page), h2 sections, h3 subsections. Never skip levels.
Image alt + lazy loading — alt = Google Images ranking. loading="lazy" improves speed (Core Web Vitals).
Schema.org / JSON-LD — Structured data in <script type="application/ld+json">. Rich snippets in search results.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Primary SEO -->
  <title>Hyderabadi Biryani Recipe | DevInHyderabad</title>
  <meta name="description" content="Step-by-step authentic Hyderabadi Biryani recipe. Learn the dum cooking technique with tips, images, and video.">

  <!-- Canonical -->
  <link rel="canonical" href="https://devinhyderabad.com/recipes/biryani">

  <!-- Open Graph -->
  <meta property="og:title" content="Hyderabadi Biryani Recipe">
  <meta property="og:description" content="Step-by-step authentic dum biryani recipe">
  <meta property="og:image" content="https://devinhyderabad.com/images/biryani.jpg">
  <meta property="og:type" content="article">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Hyderabadi Biryani Recipe">

  <!-- Structured Data (JSON-LD) -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Recipe",
    "name": "Hyderabadi Biryani",
    "author": { "@type": "Person", "name": "DevInHyderabad" },
    "description": "Authentic Hyderabadi Dum Biryani recipe",
    "prepTime": "PT30M",
    "cookTime": "PT45M",
    "totalTime": "PT1H15M",
    "recipeYield": "4 servings"
  }
  </script>
</head>

<title>Keywords | Brand</title>Page title — 50-60 chars, keywords first

<meta name="description">Search result summary — 150-160 chars

<link rel="canonical">Fix duplicate URL problems

og:title / og:descriptionSocial sharing preview

og:image (1200x630)Social sharing image — minimum size

type="application/ld+json"Structured data for Schema.org

h1 → h2 → h3Heading hierarchy — never skip

alt="descriptive text"Image alt = Google Images ranking

03Advanced SEO Concepts

Deep-dive into key SEO concepts:

Concept What it does

📱 Open Graph Social share preview — title, description, image Learn → 🔖 Schema.org JSON-LD structured data for rich snippets Learn → ⚡ Core Web Vitals LCP, FID, CLS — Google's speed ranking factors Learn → 🗺️ Sitemap & Robots XML sitemap, robots.txt, meta robots Learn →

04How to Optimize for SEO — Step by Step

Title & Description Set KaroUnique per page. Keywords first. 50-160 chars.

→

Heading Hierarchy Follow Karoh1 → h2 → h3. Keywords naturally in headings.

→

Use Semantic HTMLmain, article, section, nav — free SEO points.

→

Optimize ImagesDescriptive alt, WebP format, width/height, lazy loading.

→

Add Structured DataJSON-LD with schema.org types for rich snippets.

→

Open Graph & Technical SEOog:tags, canonical, robots, HTTPS, sitemap.

SEO is a long-term game. Title+description = basic (5 min). Structured data = good (30 min). Quality content + backlinks + speed = great (months). Google uses 200+ ranking factors.

05Exercise — SEO Audit Page

Build a complete SEO-optimized HTML page — title, meta description, structured data, Open Graph, semantic HTML, canonical.

Open VS Code. Create seo-audit.html.

Use the starter code below and add SEO elements:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Page Title Here</title>
  <!-- TODO: Add SEO elements -->
</head>
<body>
  <!-- TODO: Semantic HTML structure -->
</body>
</html>

💡

Testing tip: Google Search Console → URL Inspection. "Rich Results Test" for structured data. Lighthouse SEO audit — target 90+ score.

Done — Key Points:

✅ <title> = 50-60 chars, unique per page, keywords first
✅ <meta description> = 150-160 chars, action-oriented
✅ keywords meta tag = USELESS — Google ignores it
✅ canonical = fix duplicate content problems
✅ Heading hierarchy = h1 → h2 → h3, never skip
✅ Semantic HTML = free SEO — main, article, section, nav
✅ Image alt = Google Images ranking ticket
✅ JSON-LD structured data = rich snippets in search results
✅ Open Graph tags = social sharing preview
✅ Page speed = Core Web Vitals = direct ranking factor

Previous3.4 — Accessibility 📋 All Chapters Next Chapter4.1 — Restaurant Menu Page →

SEO Basics

Add these SEO elements:

Done — Key Points: