Seriya: HTML Basics Dars 10

HTML & SEO (Framework'dan mustaqil)

SEO muammolarining 70% JavaScript framework'lar emas, noto'g'ri HTML sababli kelib chiqishini o'rganing. Meta strategiya, OpenGraph, canonical URL'lar, semantic HTML struktura va Google sahifalarni qanday o'qishini tushunish.

10-dars

HTML & SEO (Framework'dan mustaqil)

SEO muammolarining katta qismi JS, React, Next, Astro sababli emas — noto'g'ri HTML sababli kelib chiqadi.

1️⃣ Meta strategiya (SEO yuragi)

❌ Xato:

<title>Home</title>
<meta name="description" content="Welcome">

✅ Yaxshi yondashuv:

Meta — bu CTR + relevancy + intent kombinatsiyasi.

<title>HTML Forms Best Practices — Accessibility & UX</title>
<meta
  name="description"
  content="Learn how to build production-ready HTML forms with accessibility, validation, and UX best practices."
/>

Qoidalar:

  • Har sahifa — bitta intent
  • title:
    • 50–60 belgi
    • asosiy keyword boshida
  • description:
    • Ranking bermaydi
    • CTR oshiradi
    • Duplicate meta = ranking drop

👉 Meta — bu Google uchun emas, odam uchun yoziladi.

2️⃣ OpenGraph (SEO emas, lekin traffic)

OpenGraph — bu preview UX.

<meta property="og:title" content="HTML Forms: Senior Guide" />
<meta property="og:description" content="Accessibility, UX, and backend-ready forms explained." />
<meta property="og:image" content="/og/forms.png" />
<meta property="og:type" content="article" />

Muhim nuqtalar:

  • OG yo'q → CTR yo'q
  • Preview yomon → share kam
  • og:image:
    • 1200×630
    • text markazda, kesilmaydigan

👉 OG = Social SEO

3️⃣ Canonical (duplicate killer)

Muammo:

/post
/post/
/post?ref=telegram

Google bularni alohida sahifa deb ko'rishi mumkin.

Hal:

<link rel="canonical" href="https://example.com/post" />

Qoidalar:

  • Har indexable sahifada canonical bo'lsin
  • Pagination / filter / UTM → canonical shart
  • Canonical noto'g'ri bo'lsa → ranking boshqa sahifaga ketadi

👉 Canonical = SEO sug'urtasi

4️⃣ HTML structure SEO'ga qanday ta'sir qiladi?

❌ Oddiy HTML:

<div class="title">Blog</div>
<div class="section">Post</div>

✅ Semantic HTML:

<header>
  <h1>HTML Forms Best Practices</h1>
</header>

<main>
  <article>
    <h2>Why labels matter</h2>
    <p>...</p>
  </article>
</main>

Nima uchun bu muhim?

  • Google DOM daraxtini o'qiydi
  • h1 → sahifa nima haqida
  • article → content unit
  • nav → navigatsiya
  • footer → yordamchi ma'lumot

👉 HTML — bu document, layout emas.

5️⃣ CSR vs SSR HTML — SEO nuqtai nazaridan

CSR (Client Side Rendering)

<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
  • HTML bo'sh
  • Content JS bilan keladi
  • Google kechikib render qiladi
  • Risk: indexlanmaslik

SSR (Server Side Rendering)

<body>
  <h1>HTML Forms Guide</h1>
  <p>Production-level explanation...</p>
</body>
  • Content darhol mavjud
  • Fast index
  • Predictable SEO

Xulosa:

  • SEO muhim sahifa → SSR yoki SSG
  • CSR → dashboard, auth, internal pages

👉 Google JS'ni render qiladi, lekin HTML'ni yaxshi ko'radi.

6️⃣ "Google HTML'ni qanday ko'radi?"

Google sahifani 3 bosqichda ko'radi:

  1. HTML parsing

    • title
    • meta
    • headings
    • links

  2. Rendering (JS bo'lsa)

    • CSR bo'lsa → kechikadi
    • Error bo'lsa → content yo'q

  3. Index & Rank

    • Content sifati
    • Structure
    • Internal linking

👉 Agar 1-bosqichda hamma narsa tushunarli bo'lsa — SEO yutadi.

7️⃣ "SEO muammolarining 70% HTML" — nega?

Real production xatolar:

  • ❌ h1 yo'q
  • ❌ 5 ta h1
  • ❌ button o'rniga div
  • ❌ link o'rniga onclick
  • ❌ empty HTML + CSR
  • ❌ canonical yo'q
  • ❌ duplicate title

👉 Bularni framework hal qilmaydi.

Umumiy xulosa

SEO muvaffaqiyati to'g'ri HTML bilan boshlanadi. Meta teglar CTR'ni oshiradi, OpenGraph ijtimoiy trafikni keltiradi, canonical URL'lar duplicate content muammolarini oldini oladi, semantic HTML esa Google'ga sahifa strukturasini tushunishga yordam beradi. SEO muammolarining ko'pchiligi JavaScript framework'lar emas, HTML asoslarini e'tiborsiz qoldirishdan kelib chiqadi. Avval odamlar uchun HTML yozing, Google esa kuzatib boradi.