Semantik HTML nima va u nega kerak
Onlayn do‘konning ikki sahifasi brauzerda bir xil ko‘rinishi mumkin. Birida hamma narsa bir xil div bloklaridan yig‘ilgan, ikkinchisida har bir qism o‘z vazifasiga mos teg bilan belgilangan: sarlavha, ro‘yxat, menyu, tugma. Xaridor farqni sezmaydi, robot esa sezadi: u asosiy matn qayerda, menyu qayerda, takrorlanuvchi futer qayerda ekanini kod orqali aniqlaydi.
Xuddi shu kodni ko‘zi ojiz foydalanuvchilar ishlatadigan ekran o‘quvchi dasturlar ham o‘qiydi. Shuning uchun qulaylik va texnik SEO ko‘p jihatdan bir xil tuzatishlar bilan hal bo‘ladi. Mo‘jiza kutmaslik kerak: teglarning o‘zi o‘rinni ko‘tarmaydi, lekin sahifani to‘g‘ri talqin qilishga yordam beradi.
Sarlavhalar ierarxiyasi
H1 sahifaning asosiy mavzusini bildiradi, H2 asosiy bo‘limlarni, H3 esa bo‘limlar ichidagi kichik qismlarni. Masalan, «Toshkent bo‘ylab gul yetkazib berish» sahifasida H1 xizmat nomi, H2 esa «Yetkazib berish shartlari», «Click va Payme orqali to‘lov», «Ko‘p beriladigan savollar» bo‘ladi.
Kichik biznes saytlarida ko‘p uchraydigan xatolar:
- sarlavha o‘rniga qalin shriftli oddiy abzats ishlatilgan
- katta shrift uchun H2 yoki H3 qo‘yilgan, masalan futer va yon panelda
- darajalar sakrab ketgan: H1 dan keyin darrov H4
- H1 umuman yo‘q yoki ularning bir nechtasi turli ma’noda
Sahifa qismlari uchun teglar
HTML5 sahifaning yirik qismlarini belgilash uchun maxsus teglar beradi. Ular reytingni bevosita oshirmaydi, lekin asosiy kontentni har sahifada takrorlanadigan elementlardan ajratishga yordam beradi.
- header — sayt yoki bo‘lim boshi, logotip va menyu
- nav — asosiy navigatsiya va xlebnye kroshki
- main — sahifaning asosiy kontenti, faqat bitta
- article — mustaqil material: maqola, tovar kartochkasi
- section — mavzu bo‘yicha qism, odatda o‘z sarlavhasi bilan
- aside — yon panel, bog‘liq materiallar
- footer — kontaktlar va huquqiy ma’lumotlar
Havola va tugma: aralashtirmang
Havola boshqa manzilga olib boradi va u uchun href atributli a tegi kerak. Tugma esa sahifadagi harakat uchun: so‘rov yuborish, oynani ochish. Agar bo‘limlar orasidagi o‘tish href’siz, faqat JavaScript orqali bosiladigan div yoki span bilan qilingan bo‘lsa, robot ularni havola deb hisoblamaydi va ortidagi sahifalarni, masalan katalog kategoriyalarini, topa olmasligi mumkin.
Biznes uchun bu bevosita yo‘qotish: qidiruv topmagan sahifa Google’dan mijoz keltirmaydi.
Ro‘yxat, jadval, rasm va formalar
Sanashlar uchun ul va ol, taqqoslash ma’lumotlari uchun sarlavha kataklari bor haqiqiy table ishlating. Qidiruv tizimlari ulardan qisqa javoblar olishi mumkin: ish bosqichlari, xizmat paketlari tarkibi, xususiyatlar. Div va chegaralardan «chizilgan» jadval bunday imkon bermaydi.
Mazmunli rasmlarni tushunarli alt bilan img tegi orqali joylang, izoh uchun figure va figcaption qo‘llang. Tovar suratini faqat CSS fon sifatida berib qo‘ysangiz, rasm bo‘yicha qidiruv uni ko‘rmaydi. Bezak elementlarini esa CSS’ga o‘tkazgan ma’qul.
Forma maydonlariga label orqali sarlavha bering, yozganda yo‘qoladigan kulrang maslahat yetarli emas. Bunday forma telefonda qulayroq, ekran o‘quvchi uni to‘g‘ri o‘qiydi, analitika esa foydalanuvchi harakatlarini aniqroq qayd etadi. Shuningdek, html tegidagi lang atributi sahifa tilini ko‘rsatadi: o‘zbekcha sahifa uchun uz, ruscha uchun ru.
Qanday tekshirish mumkin
Buning uchun dasturchi bo‘lish shart emas:
- sahifani CSS’siz ko‘ring yoki «o‘qish rejimi»ni yoqing: u mantiqiy hujjatdek o‘qilishi kerak
- H1–H6 tuzilmasini ko‘rsatuvchi brauzer kengaytmasini o‘rnating
- Lighthouse’ning qulaylik bo‘limini ishga tushiring
- krauler yordamida barcha sahifalar sarlavhalarini chiqarib, takror va bo‘shliqlarni toping
Tayyor saytda qayerdan boshlash
Butun vyorstkani qayta yozish shart emas. Trafik keladigan shablonlardan boshlang: xizmat sahifalari, kategoriyalar, tovar kartochkalari, maqolalar. Sarlavhalar ierarxiyasini to‘g‘rilang, soxta havolalarni haqiqiysiga almashtiring, asosiy rasmlarning alt matnini tekshiring. Shablon bir marta tuzatiladi, natija esa butun saytga tarqaladi.
Saytingiz qidiruvda nima sababdan yaxshi ko‘rinmayotganini bilmoqchi bo‘lsangiz, markdev jamoasi texnik tahlil o‘tkazib, qaysi tuzatishlar tezroq natija berishini aytib beradi. Vazifangizni Telegram orqali yoki saytdagi forma bilan muhokama qilishingiz mumkin.
Ko‘p beriladigan savollar
Semantik teglar o‘z-o‘zidan saytni yuqoriga chiqaradimi?
Bevosita yo‘q. Qidiruv tizimlari teg uchun alohida ball bermaydi. Lekin aniq tuzilma robotga sahifani tushunishga va qisqa javob uchun parcha tanlashga yordam beradi, shuning uchun bilvosita ta’siri bor.
Sahifada nechta H1 bo‘lishi kerak?
Odatda bitta, u sahifaning asosiy mavzusini ifodalaydi. Qolgan bo‘limlar mazmuniga qarab H2 va H3 bilan belgilanadi, shrift o‘lchami uchun emas.
Butun saytni qayta vyorstka qilish kerakmi?
Yo‘q. Xizmat sahifalari, kategoriyalar, kartochkalar va maqolalar shablonlaridan boshlang. Shablondagi tuzatish barcha sahifalarga birdan ta’sir qiladi.
Dasturchisiz semantikani qanday tekshirsa bo‘ladi?
Brauzerda CSS’ni o‘chiring yoki o‘qish rejimini yoqing, so‘ng kengaytma bilan sarlavhalar tuzilmasini ko‘ring va Lighthouse auditini ishga tushiring.
Vazifangizni bepul tahlil qilamiz
Kontaktingizni qoldiring — 15 daqiqalik qo‘ng‘iroqda arizalar qayerda yo‘qolayotganini va birinchi navbatda nima qilish kerakligini ko‘rsatamiz.