Frontend SEO: dasturchi kodga nimalarni kiritishi kerak

Nega frontend qidiruv trafigiga ta’sir qiladi

Toshkentda tez-tez uchraydigan holat: studiya React yoki Vue’da chiroyli sayt yig‘adi, egasi Instagram va Telegram orqali reklama beradi, ammo Google’da sahifalar chiqmaydi. Kontent bor, dizayn yaxshi, lekin robot deyarli bo‘sh HTML oladi va sahifani to‘liq tushunmaydi.

SEO mutaxassis muammoni topadi, ammo uni ko‘pincha dasturchi tuzatadi. Relizdan keyin render usuli, manzillar va shablonlarni o‘zgartirish ancha qimmatga tushadi, shuning uchun talablarni vyorstka boshlanishidan oldin kelishib olgan ma’qul.

Frontend SEO: render usulini to‘g‘ri tanlash

Asosiy savol: kontent dastlabki HTML’da bormi yoki JavaScript bajarilgandan keyin paydo bo‘ladimi. Google skriptlarni bajara oladi, lekin bu kechikish bilan va har doim ham to‘liq emas. Boshqa qidiruv tizimlari, ijtimoiy tarmoq botlari va sun’iy intellekt yordamchilari bunga ko‘pincha qodir emas.

Qidiruvda ko‘rinishi kerak bo‘lgan sahifalar uchun quyidagilardan birini tanlang:

• SSR: sahifa har so‘rovda serverda tayyorlanadi
• SSG: sahifalar build vaqtida oldindan yig‘iladi
• Next.js va Nuxt kabi gibrid rejimlar: har bir sahifa turi uchun o‘z yondashuvi
• Faqat klient tomonida render (CSR) shaxsiy kabinet va admin panel uchun mos, katalog, xizmat va maqolalar uchun esa xavfli

Havolalar, manzillar va javob kodlari

Sahifalar orasidagi o‘tishlar href atributli oddiy havolalar bo‘lishi kerak. Agar menyu div’ga bosish orqali ishlasa, robot bosh sahifadan nariga o‘tmaydi. Sahifalash ham shunday: «Yana yuklash» tugmasi xaridorga qulay, ammo katalogga alohida sahifalarga havolalar ham kerak, aks holda chuqurdagi tovarlar topilmay qoladi.

Manzillar lotin harflarida, tushunarli, ortiqcha parametrlarsiz va oxirida slesh bir xil formatda bo‘lsin. Bitta sahifa — bitta manzil. Mavjud bo‘lmagan sahifa 404 kodini qaytarishi kerak, «topilmadi» matnini 200 kodi bilan ko‘rsatmasligi lozim: bu bir sahifali ilovalarda keng tarqalgan xato. Yo‘naltirishlarni server tomonida sozlang.

Meta teglar va ikki tilli sayt

Har bir sahifaga o‘z title, description va canonical kerak, zarurat bo‘lsa meta robots, shuningdek Open Graph teglari: Telegram’ga havola yuborilganda ko‘rinadigan preview aynan shulardan olinadi. Qiymatlar HTML bilan serverdan kelishi kerak, yuklangandan keyin skript bilan qo‘yilmasligi lozim. Bir sahifali ilovalarda marshrut o‘zgarganda teglar ham yangilanishi kerak, bu tez-tez unutiladi.

Sayt rus va o‘zbek tillarida bo‘lsa, versiyalar alohida manzillarda turishi kerak, masalan /ru/ va /uz/, hreflang teglari va til almashtirgichda oddiy havolalar bilan. Til faqat cookie yoki brauzer sozlamasi bo‘yicha tanlansa, robot ikki versiyaning o‘rniga bittasini ko‘radi.

Rasmlar va mobil tezlik

Ko‘p mijozlar saytga telefondan kiradi, ba’zan beqaror mobil internet bilan, shu sababli tezlik bu yerda rasmiyatchilik emas. Core Web Vitals’ning uch ko‘rsatkichiga frontend katta ta’sir qiladi:

• LCP: birinchi ekrandagi asosiy element, odatda banner, erta yuklansin va lazy-yuklashsiz bo‘lsin
• INP: JavaScript hajmini va uzoq vazifalarni kamaytiring, uchinchi tomon skriptlarini keyinroq ulang
• CLS: rasm, banner va shriftlar uchun width va height orqali joy ajrating
• img’da mazmunli alt, turli ekranlar uchun srcset, zamonaviy format va siqish
• loading="lazy" faqat birinchi ekrandan pastdagi rasmlar uchun
• mayda effektlar uchun og‘ir kutubxonalardan voz keching

Mikrorazmetka va ishga tushirishdan oldingi tekshiruv

JSON-LD’ni shablonlardan serverda chiqaring: bosh sahifada Organization, ichki sahifalarda BreadcrumbList, tovar kartochkasida Product, blogda Article. Ma’lumotlarni ko‘rinadigan kontent bilan bir manbadan oling, aks holda razmetka odam ko‘rayotgan narsadan farq qilib qoladi. Relizdan oldin tekshiring:

• kontent sahifa manba kodida skriptlarsiz ko‘rinadi
• har bir shablonda noyob title, description va H1 bor
• havolalar oddiy, javob kodlari to‘g‘ri, 404 sahifa mavjud
• robots.txt va sitemap.xml avtomatik yaratiladi va saytni yopmaydi
• test versiyadan qolgan noindex yo‘q
• mobil qurilmalarda Core Web Vitals laboratoriya testida yaxshi
• mikrorazmetka validatsiyadan o‘tadi

SEO mutaxassis bilan qanday kelishish kerak

Vyorstka boshlanishidan oldin texnik talablarni so‘rang: shablonlar ro‘yxati, meta teglar maydonlari, manzil formati, razmetka talablari. Ishga tushirishdan oldin test versiyani ko‘rsating, mutaxassis uni kraulerdan o‘tkazsin. Bunday tartib qayta ishlashga ketadigan vaqt va byudjetni tejaydi.

markdev jamoasi O‘zbekistonda sayt uchun SEO optimizatsiya bilan shug‘ullanadi va bunday talablarni tuzishda yoki relizdan oldin build’ni tekshirishda yordam bera oladi. Saytingiz JavaScript freymvorkida yozilgan bo‘lsa va uni qidiruv ko‘rishiga ishonchingiz komil bo‘lmasa, vazifani yozing, birgalikda nimani birinchi o‘zgartirish kerakligini aniqlaymiz.