Chapter 10 — SEO va Meta Teglar

Yaxshi HTML strukturasi — qidiruv tizimlari va ijtimoiy tarmoqlarda sahifaning to'g'ri ko'rinishi uchun asosdir.

---

10.1 Asosiy SEO Meta Teglar

Example

index.html
HTMLNusxalash
01<title>Mahsulot nomi — Do'kon nomi</title>
02<meta name="description" content="Mahsulot haqida 150-160 belgidan iborat qisqa, jozibali tavsif.">
03<link rel="canonical" href="https://example.com/product/123">

10.2 Open Graph va Social Sharing

Example

index.html
HTMLNusxalash
01<meta property="og:title" content="Ajoyib maqola sarlavhasi">
02<meta property="og:description" content="Maqola haqida qisqacha.">
03<meta property="og:image" content="https://example.com/preview.jpg">
04<meta property="og:url" content="https://example.com/article">

10.3 Semantic HTML va SEO Bog'liqligi

Simple Explanation

Bitta <h1>, to'g'ri sarlavha ierarxiyasi, semantik teglar (article, nav) va mazmunli alt matnlari — barchasi qidiruv tizimlariga sahifa strukturasi va mazmunini yaxshiroq "tushunish"ga yordam beradi.

⚠️ Common Mistake
Sahifada bir nechta <h1> ishlatish yoki sarlavha darajalarini tasodifiy tanlash (masalan <h1>dan keyin to'g'ridan-to'g'ri <h4>) — bu strukturani chalkashtiradi.

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: Mahsulot sahifasi uchun to'liq SEO meta teglar to'plamini (title, description, canonical, og:*) yozing.

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<title></title>
02<h1>Sarlavha</h1>
03<h1>Ikkinchi sarlavha</h1>
04<h4>Kichik bo'lim</h4>

Your Task: Bu sahifada nechta SEO/struktura muammosi bor?

<details> <summary>Solution</summary> Muammolar: (1) `<title>` bo'sh — qidiruv natijalarida sarlavha ko'rinmaydi; (2) Ikkita `<h1>` — struktura chalkash; (3) `<h1>`dan keyin to'g'ridan-to'g'ri `<h4>` — ierarxiya "sakrab o'tgan" (h2, h3 yo'q). To'g'ri versiya sarlavhalarni mantiqiy ketma-ketlikda va bitta `<h1>` bilan tashkil qiladi. </details>

📌 Chapter Summary

<title>, meta description, canonical — asosiy SEO teglar. Open Graph teglar — ijtimoiy tarmoqlarda chiroyli preview beradi. Semantik HTML struktura — SEO'ga bevosita ta'sir qiladi.

🎯 Key Takeaways

• Har bir sahifa noyob, tavsiflovchi <title> va descriptionga ega bo'lishi kerak
• canonical — duplicate content muammosini yechadi
• Open Graph — ijtimoiy tarmoqlarda ulashish sifatini oshiradi
• To'g'ri sarlavha ierarxiyasi — SEO va accessibility uchun muhim

⚡ Quick Cheat Sheet

index.html
HTMLNusxalash
01<title>Sahifa nomi</title>
02<meta name="description" content="...">
03<link rel="canonical" href="...">
04<meta property="og:title" content="...">
05<meta property="og:image" content="...">

---