🔴 Advanced · Lesson 34

SEO-Friendly HTML

What On-Page SEO Means

SEO (Search Engine Optimization) = helping Google understand and rank your page. "On-page SEO" is the part done with HTML itself — no ads, no tricks, just clean tags that tell Google what your page is about. Good news: you have already learned every SEO tag in this course (title, meta description, headings, alt, semantic tags). This chapter assembles them into one ranking-focused checklist. Google can't SEE a page like a human; it READS your HTML — so good HTML literally is good SEO.

Title and Meta Description — your search result

<title>HTML Tutorial in Hindi - Learn HTML Free | CodeKaFunda</title>
<meta name="description"
      content="Learn HTML step by step in Hindi and English with examples,
               from basics to HTML5, forms and SEO. 100% free.">

In Google, this becomes your clickable listing: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HTML Tutorial in Hindi - Learn HTML Free | CodeKaFunda Learn HTML step by step in Hindi and English with examples... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Title: the single most important SEO tag. Put the main keyword near the front, keep it ~50-60 characters, make every page's title unique.
Description: ~150-160 characters; it's your advertisement — a compelling one earns more clicks even at the same ranking.

Heading Structure — the outline Google reads

<h1>HTML Tutorial for Beginners</h1>          ← ONE per page, main topic
    <h2>What is HTML?</h2>                     ← major sections
    <h2>HTML Tags and Elements</h2>
        <h3>Empty Elements</h3>                ← subsections, in order
    <h2>HTML Forms</h2>

The rules that matter for ranking: exactly one <h1> carrying your main keyword; use h2/h3 to build a logical outline; never skip levels (h1→h4) and never pick a heading for its size. Google builds a topical map of your page from this hierarchy — a clean outline ranks better than keyword-stuffed chaos.

Alt Text, Semantic Tags, Internal Links

<img src="html-forms.jpg" alt="HTML form example with input fields">

<nav>...</nav>  <main>...</main>  <article>...</article>  <footer>...</footer>

<a href="/tutorial/html/html-forms/">Learn HTML Forms</a>

Alt text: Google can't see images — alt is how it "reads" and ranks them in Google Images (free traffic).
Semantic tags: <nav>, <main>, <article> tell Google which part is real content vs navigation/boilerplate.
Internal links with descriptive text ("Learn HTML Forms", not "click here") spread ranking across your site and help Google discover every page.
Clean URLs: /tutorial/html/html-forms/ beats /page?id=27 — readable URLs with keywords rank and click better.

Structured Data — a taste of schema

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "HTML Tutorial for Beginners",
    "author": { "@type": "Organization", "name": "CodeKaFunda" },
    "inLanguage": "hi"
}
</script>

This JSON block in the <head> describes your page to Google in a machine-readable way — and can earn rich results (star ratings, FAQ dropdowns, article cards) in search. It's optional but powerful. You don't need to master it now; just know that structured data exists and is how those fancy Google result features appear. (This very tutorial's pages include Article schema — Ctrl+U to see.)

The On-Page SEO Checklist

✅ One unique title per page, keyword near the front
✅ A compelling meta description (~155 chars)
✅ Exactly one h1; logical h2/h3 outline, no skipped levels
✅ alt text on every meaningful image
✅ Semantic tags (nav, main, article, footer)
✅ Descriptive internal links + clean, readable URLs
✅ viewport meta tag (mobile-friendly = ranking factor)
✅ Fast load: sized images, lazy loading, minimal bloat
Master these HTML basics and you have done 80% of on-page SEO — no plugins required.

On-Page SEO का मतलब

SEO (Search Engine Optimization) = Google को आपका page समझने और rank करने में मदद करना. "On-page SEO" वह हिस्सा है जो HTML से ही होता है — न ads, न चालाकी, बस साफ tags जो Google को बताएं page किस बारे में है. अच्छी खबर: आप इस course में हर SEO tag पहले ही सीख चुके हैं (title, meta description, headings, alt, semantic tags). यह chapter उन्हें एक ranking-focused checklist में जोड़ता है. Google page को इंसान की तरह DEKH नहीं सकता; वह आपका HTML PADHTA है — इसलिए अच्छा HTML ही अच्छा SEO है.

Title और Meta Description — आपका search result

<title>HTML Tutorial in Hindi - Learn HTML Free | CodeKaFunda</title>
<meta name="description"
      content="Learn HTML step by step in Hindi and English with examples,
               from basics to HTML5, forms and SEO. 100% free.">

Google me yeh aapki clickable listing banta hai: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HTML Tutorial in Hindi - Learn HTML Free | CodeKaFunda Learn HTML step by step in Hindi and English with examples... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Title: सबसे ज़रूरी अकेला SEO tag. मुख्य keyword आगे रखिए, ~50-60 characters, हर page का title unique.
Description: ~150-160 characters; यह आपका विज्ञापन है — दमदार वाला same ranking पर भी ज़्यादा clicks लाता है.

Heading Structure — वह outline जो Google पढ़ता है

<h1>HTML Tutorial for Beginners</h1>          ← page me EK, main topic
    <h2>What is HTML?</h2>                     ← major sections
    <h2>HTML Tags and Elements</h2>
        <h3>Empty Elements</h3>                ← subsections, kram me
    <h2>HTML Forms</h2>

Ranking के लिए मायने रखने वाले rules: ठीक एक <h1> आपके main keyword के साथ; h2/h3 से logical outline; levels कभी skip नहीं (h1→h4) और size देखकर heading कभी नहीं. Google इस hierarchy से आपके page का topical नक्शा बनाता है — साफ outline keyword-भरे chaos से बेहतर rank करता है.

Alt Text, Semantic Tags, Internal Links

<img src="html-forms.jpg" alt="HTML form example with input fields">

<nav>...</nav>  <main>...</main>  <article>...</article>  <footer>...</footer>

<a href="/tutorial/html/html-forms/">Learn HTML Forms</a>

Alt text: Google images नहीं देख सकता — alt से वह उन्हें "पढ़कर" Google Images में rank करता है (free traffic).
Semantic tags: <nav>, <main>, <article> Google को बताते हैं कौन-सा हिस्सा असली content है vs navigation/boilerplate.
Internal links descriptive text के साथ ("Learn HTML Forms", "click here" नहीं) ranking को site भर में बांटते हैं और Google को हर page ढूंढने में मदद करते हैं.
Clean URLs: /tutorial/html/html-forms/ /page?id=27 से बेहतर — keywords वाले पढ़ने योग्य URLs अच्छा rank और click होते हैं.

Structured Data — schema की झलक

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "HTML Tutorial for Beginners",
    "author": { "@type": "Organization", "name": "CodeKaFunda" },
    "inLanguage": "hi"
}
</script>

<head> में यह JSON block आपके page को Google को machine-readable तरीके से बताता है — और search में rich results (star ratings, FAQ dropdowns, article cards) दिला सकता है. Optional पर powerful. अभी master करने की ज़रूरत नहीं; बस जानिए structured data है और वे fancy Google features ऐसे ही आते हैं. (इसी tutorial के pages में Article schema है — Ctrl+U से देखिए.)

On-Page SEO Checklist

✅ हर page का एक unique title, keyword आगे
✅ दमदार meta description (~155 chars)
✅ ठीक एक h1; logical h2/h3 outline, कोई skipped level नहीं
✅ हर meaningful image पर alt text
✅ Semantic tags (nav, main, article, footer)
✅ Descriptive internal links + साफ, पढ़ने योग्य URLs
✅ viewport meta tag (mobile-friendly = ranking factor)
✅ तेज़ load: sized images, lazy loading, कम bloat
इन HTML basics में महारत = on-page SEO का 80% हो गया — कोई plugin नहीं चाहिए.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.