Semantik HTML va SEO — qanday bog'liq

~15 daq · HTML · Semantik HTML va Meta

Muammodan boshlaylik

Siz ajoyib maqola yozdingiz: "Toshkentda eng yaxshi IT kurslar". Mazmuni zo'r, foydali. Lekin Google da qidirsangiz — 10-sahifada ham yo'q. Raqobatchining saytida mazmuni kambag'alroq maqola esa birinchi o'rinda.

Ko'p sabablardan biri: Google sizning sahifangizni tushunolmayapti. Google ham ekran o'quvchi kabi (9-dars) — u sahifani ko'z bilan emas, HTML tuzilmasi orqali "o'qiydi". Agar hamma narsa div bo'lsa, sarlavha qaysi, asosiy matn qaysi, menyu qaysi — u taxmin qilishga majbur.

SEO (Search Engine Optimization — qidiruv tizimlari uchun optimallashtirish) ning texnik asosi — aynan semantik HTML.

Google sahifani qanday o'qiydi

1. Crawl     — robot (Googlebot) sahifani yuklaydi, havolalar bo'ylab yuradi
2. Render    — JavaScript ni bajaradi (kechikish bilan)
3. Index     — mazmunni tahlil qiladi: nima haqida, qaysi so'zlar muhim
4. Rank      — qidiruv so'roviga qanchalik mos — tartiblaydi

3-qadamda Google HTML teglaridan foydalanadi: <title> va <h1> — mavzu, <h2> — bo'limlar, <main> va <article> — asosiy kontent, <nav> va <footer> — kontent emas, takrorlanuvchi qismlar.

SEO uchun eng muhim teglar

1. title — eng kuchli signal

<title>Toshkentda eng yaxshi IT kurslar — 2026 reytingi | DevDocs</title>

11-darsdan: noyob, 50–60 belgi, kalit so'zlar boshida. Qidiruv natijalaridagi ko'k sarlavha — foydalanuvchi bosish yoki bosmasligini hal qiladigan birinchi narsa.

2. Sarlavhalar — h1 dan h6 gacha

<h1>Toshkentda eng yaxshi IT kurslar</h1>
  <h2>Frontend kurslari</h2>
    <h3>React bo'yicha</h3>
  <h2>Backend kurslari</h2>

• Bitta <h1> — sahifaning asosiy mavzusi, odatda title ga yaqin
• <h2>–<h3> — bo'limlar tuzilmasi; Google ulardan sahifa mazmunini va "featured snippet" larni oladi
• Sarlavhani katta matn uchun ishlatmang — faqat haqiqiy sarlavhalar

<!-- ❌ dizayn uchun h1, sarlavhalar div da -->
<h1 class="slogan">Biz bilan kelajak yorug'!</h1>
<div class="title">Toshkentda IT kurslar</div>

<!-- ✅ -->
<p class="slogan">Biz bilan kelajak yorug'!</p>
<h1>Toshkentda IT kurslar</h1>

3. Havolalar — haqiqiy <a href>

<!-- ❌ Google bu "havola" ni ko'rmaydi va sahifaga o'tmaydi -->
<div onclick="location.href='/kurslar'">Kurslar</div>
<span class="link" data-url="/kurslar">Kurslar</span>

<!-- ✅ -->
<a href="/kurslar">Kurslar</a>

Google yangi sahifalarni havolalar orqali topadi. onclick li div lar uchun sahifalar "ko'rinmas" qoladi. DevDocs saytida ham bu muammo bor edi va kurs kartochkalari haqiqiy <a href> larga aylantirildi.

Havola matni ham muhim:

<!-- ❌ -->
<a href="/css/13-flexbox-nima">Bu yerga bosing</a>

<!-- ✅ -->
<a href="/css/13-flexbox-nima">Flexbox nima — misollar bilan</a>

"Bu yerga bosing", "batafsil" — Google ga (va ekran o'quvchilarga) hech narsa demaydi. Havola matni u olib boradigan sahifani tasvirlasin.

4. Rasmlar — alt

<img src="react-kurs.jpg" alt="React kursi talabalari loyiha ustida ishlamoqda">

Google rasmni "ko'ra olmaydi" — alt dan tushunadi (6-dars). Google Rasmlar qidiruvidan ham trafik keladi.

5. Asosiy kontent — main va article

<main>
  <article>
    <h1>...</h1>
    <!-- asosiy matn -->
  </article>
</main>

Google header, menyu va footer ni har sahifada takrorlanuvchi qism deb biladi va asosiy e'tiborni <main> / <article> ichidagi noyob kontentga qaratadi.

Tuzilgan ma'lumotlar (structured data)

Semantik teglardan ham aniqroq — JSON-LD formatidagi ma'lumot: "bu sahifa — kurs, muallifi — mana bu, narxi — bepul":

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "CSS kursi",
  "description": "Flexbox, Grid, responsive dizayn va animatsiyalar — o'zbek tilida.",
  "inLanguage": "uz",
  "isAccessibleForFree": true,
  "provider": {
    "@type": "Organization",
    "name": "DevDocs",
    "url": "https://devdocs.uz"
  }
}
</script>

Natijada Google qidiruvda boy natijalar (rich results) ko'rsatishi mumkin: reyting yulduzchalari, narx, savol-javoblar, "non bo'lagi" yo'li. Turlari: Article, Course, Product, FAQPage, BreadcrumbList, Recipe va boshqalar — schema.org.

Tekshirish: Google ning Rich Results Test vositasi.

Texnik SEO — boshqa muhim narsalar

DevDocs saytining o'zi ham SEO uchun aynan shunday qayta qurilgan: hash URL lar (#/docs/php/lesson/5) o'rniga haqiqiy manzillar (/php/01-php-nima), har bir dars uchun noyob title, description va JSON-LD, sitemap va robots.txt.

Kontent — baribir eng muhimi

[!INFO] Semantik HTML va texnik SEO — sahifangizni Google to'g'ri tushunishi uchun zarur shart. Lekin reytingni asosan kontent sifati belgilaydi: foydalanuvchining savoliga to'liq, aniq, foydali javob bormi? Mukammal HTML yomon kontentni birinchi o'ringa olib chiqmaydi. Yaxshi kontent esa yomon HTML bilan topilmay qolishi mumkin. Ikkalasi ham kerak.

Nima uchun shunday?

Nima uchun Google hozirgi kunda ham HTML teglariga tayanadi — u sun'iy intellekt bilan sahifani "odam kabi" tushuna olmaydimi?

Qisman tushuna oladi — va yildan yilga yaxshiroq. Lekin milliardlab sahifani har kuni qayta ishlash uchun arzon va aniq signallar zarur, va HTML tuzilmasi aynan shunday: <h1> ni topish uchun murakkab tahlil kerak emas. Bundan tashqari, semantik HTML noaniqlikni yo'qotadi: sahifada ikkita katta matn bo'lsa, qaysi biri sarlavha? Muallif <h1> bilan aniq aytgan bo'lsa — Google taxmin qilmaydi. Taxmin qilish kerak bo'lgan joyda xato ehtimoli bor — va xato natijasi sahifangizning noto'g'ri so'rovlarda ko'rinishi yoki umuman ko'rinmasligi. Aniq HTML — Google ga ham, foydalanuvchiga ham hurmat.

Xulosa

Eslab qoling:

• Google sahifani HTML tuzilmasi orqali o'qiydi: crawl → render → index → rank
• <title> — eng kuchli signal; bitta <h1> — asosiy mavzu; <h2>/<h3> — tuzilma
• Havolalar — haqiqiy <a href>, ma'noli matn bilan ("bu yerga bosing" emas)
• Rasmlar — alt; asosiy kontent — <main>, <article>
• JSON-LD (schema.org) — boy natijalar uchun tuzilgan ma'lumot
• Texnik: lang, haqiqiy URL lar (hash emas), canonical, sitemap, tezlik, mobil
• Semantik HTML — zarur shart; reytingni kontent sifati belgilaydi

Keyingi dars

14-dars: Custom Data Attributes — data- va JavaScript bilan ishlash*