JavaScript SEO ən yaxşı təcrübələri axtarış motoru botlarının kodla zəngin veb tətbiqləri ilə necə qarşılaşdığını, onları necə icra etdiyini və başa düşdüyünü optimallaşdırmağı əhatə edir. React və ya Angular kimi müasir çərçivələr brauzerə çox vaxt boş bir HTML qabığı təqdim etdiyi üçün, indeksləmə baş verməzdən əvvəl son məzmunun tam render olunduğundan əmin olmaq üçün strategiyalar tətbiq etməlisiniz. Googlebot JavaScript-i üç mərhələdə emal edir: krollama, render etmə və indeksləmə. Bu mərhələləri uğurla idarə etmək saytınızın ilkin skript teqləri əvəzinə istifadəçilərin gördüyü faktiki mətn və şəkillər üçün sıralanmasına imkan verir. Məzmununuz render edilmiş HTML-də görünmürsə, axtarış motorları səhifələrinizi müvafiq axtarış sorğuları ilə əlaqələndirməkdə çətinlik çəkəcək.
Googlebot JavaScript renderini necə idarə edir?
Render mərhələsi JavaScript SEO problemlərinin çoxunun baş verdiyi yerdir. Googlebot bir URL aşkar etdikdə, onu krollama növbəsinə əlavə edir. Lakin standart HTML səhifələrindən fərqli olaraq, JavaScript ilə zəngin səhifələr ikinci dərəcəli render növbəsinə göndərilir, çünki skript fayllarının icrası əhəmiyyətli dərəcədə daha çox CPU gücü və vaxt tələb edir. Bu iki dalğalı indeksləmə prosesi ilkin krollama ilə Google-un məzmununuzu nəhayət gördüyü an arasında gecikmə ola biləcəyi deməkdir. Server cavab vaxtlarınız yavaşdırsa və ya skript fayllarınız çox böyükdürsə, Googlebot vaxt aşımına uğraya və ya renderi təxirə sala bilər, bu da qismən indekslənmiş səhifələrə və ya çatışmayan məzmuna gətirib çıxarır. Tərtibatçılar bu riskləri minimuma endirmək üçün səhifənin sabitləşməsi üçün lazım olan vaxtı izləməlidirlər.
İlkin HTML ilə render edilmiş DOM arasındakı fərq hər hansı texniki audit üçün kritik bir göstəricidir. SaaS platforması üçün tipik bir hesabda, biz tez-tez görürük ki, ilkin mənbə kodu yalnız bir neçə sətir skript istinadını ehtiva edir. JavaScript işə düşməzsə və ya bot vaxt aşımına uğrayarsa, səhifə boş görünür. Googlebot müasir ECMAScript versiyalarını icra etməkdə daha səmərəli olub, lakin hələ də render büdcəsi daxilində fəaliyyət göstərir. Bu o deməkdir ki, o, skriptlərinizin xarici API-dən məlumat gətirməsini qeyri-müəyyən müddətə gözləməyəcək. Əsas məzmununuzun icranın ilk saniyələrində əlçatan olmasını təmin etmək ardıcıl indeksləmə üçün tələbdir.
Render edilmiş HTML-də məzmunun görünməsini təmin etmək
Məzmununuzun görünən olduğundan əmin olmaq üçün skriptlər işlədikdən sonra botun əslində nə gördüyünü yoxlamalısınız. Ümumi bir nümunə, render edilmiş görüntünü görmək üçün Google Search Console-da URL yoxlama alətindən istifadə etməkdir. Bu alət render mərhələsindən sonra yaradılan HTML-ə aydın baxış təqdim edir. Əgər əsas başlıqlarınızın və ya məhsul təsvirlərinizin bu görüntüdə olmadığını görsəniz, bu, JavaScript-inizin bot üçün düzgün işləmədiyini göstərir. Bu, çox vaxt skript xətaları, robots.txt faylınızda bloklanmış resurslar və ya düyməni klikləmək və ya səhifəni aşağı sürüşdürmək kimi istifadəçi qarşılıqlı əlaqələrindən asılılıq səbəbindən baş verir.
Metadata və kanonik teqlər də render edilmiş HTML-də olmalıdır. Tətbiqiniz səhifə başlığını və ya meta təsvirini yeniləmək üçün müştəri tərəfli marşrutlaşdırıcıdan (router) istifadə edirsə, bu dəyişikliklərin səhifə tamamlanmış hesab edilməzdən əvvəl baş verdiyinə əmin olun. Məsələn, React Helmet kimi kitabxanadan istifadə edən React tətbiqi, baş teqlərinin DOM-da həqiqətən yeniləndiyini təsdiqləmək üçün yoxlanılmalıdır. Bot yalnız standart şablon metadata görürsə, axtarış nəticələrində klik nisbətləriniz zərər görəcək. Bundan əlavə, JavaScript tətbiqiniz eyni görünüş üçün çoxsaylı URL nümunələri yaratdıqda dublikat məzmun problemlərinin qarşısını almaq üçün ardıcıl kanonik teqlər lazımdır.
JS saytları üçün ən çox yayılmış texniki maneələr hansılardır?
- Googlebot-un səhifəni düzgün render etməsinə mane olan, robots.txt faylında vacib .js fayllarının bloklanması.
- URL-lərdə History API (pushState) əvəzinə heş fraqmentlərindən (#) istifadə etmək, bu da URL-ləri əksər botlar üçün krollanmaz edir.
- Standart ‘a href’ keçidləri əvəzinə daxili naviqasiya üçün ‘onclick’ kimi istifadəçi hadisələrinin tələb olunması.
- Məzmun DOM-a yüklənməzdən əvvəl render mühərrikinin vaxtının bitməsinə səbəb olan yavaş API cavabları.
- JavaScript tətbiqi həmişə 200 OK statusu qaytardığı üçün 404 kimi server tərəfli xəta kodlarının təmin edilməməsi.
- Krollerlərin izləməsi üçün səhifələnmiş ehtiyat keçidləri olmayan sonsuz sürüşdürmə tətbiqləri.
Tipik bir ssenaridə, xüsusi JavaScript əsaslı məhsul filtrindən istifadə edən bir Shopify mağazası təsadüfən minlərlə məhsul səhifəsini axtarış motorlarından gizlədə bilər. Filtr standart lövbər (anchor) teqləri vasitəsilə əlaqələndirilməyən sorğu parametrlərindən istifadə edirsə, Googlebot kataloqun daha dərin səhifələrini heç vaxt tapmayacaq. Bu, təmiz, krollana bilən keçid strukturlarından istifadənin vacibliyini vurğulayır. Saytınızdakı hər bir vacib səhifəyə sadə bir keçid vasitəsilə çatmaq mümkün olduğunu yoxlamalısınız. Əgər bot növbəti səhifəyə keçidi tapmaq üçün mürəkkəb bir skript icra etməlidirsə, çox güman ki, daxili keçid kapitalınız sayt boyu effektiv şəkildə paylanmır.
SSR, CSR və Statik Generasiya arasında seçim
Server-Side Rendering (SSR) bu indeksləmə gecikmələrinin çoxu üçün əsas həll yolu kimi xidmət edir. Hər sorğu üçün serverdə tam HTML yaratmaqla, ən sadə krollerin belə müştəri tərəfli kodun bir sətirini belə icra etməyə ehtiyac duymadan məzmununuzu dərhal görə biləcəyinə əmin olursunuz. Bu, xüsusilə məhsul təsvirlərinin və qiymət məlumatlarının dəqiq və sürətli indekslənməli olduğu e-ticarət platformaları üçün faydalıdır. SSR serverinizdəki yükü artıra bilsə də, krollamanın ilk mərhələsində tam doldurulmuş HTML sənədinə sahib olmağın faydası çox vaxt infrastruktur xərclərindən üstün olur. Bir çox komanda performansı tarazlaşdırmaq üçün Artımlı Statik Regenerasiya (Incremental Static Regeneration) kimi hibrid yanaşmaları seçir.
Client-Side Rendering (CSR) çox vaxt Create React App kimi alətlər üçün standartdır, lakin SEO üçün ən risklisidir. CSR mühitində brauzer və ya bot demək olar ki, boş bir HTML faylı və bir JavaScript paketi alır. Bot daha sonra səhifəni qurmaq üçün skripti icra etməlidir. Saytınızda yüksək həcmdə səhifələr varsa, render büdcəsi Googlebot-un bir gündə bu səhifələrdən neçəsini emal edə biləcəyini məhdudlaşdıra bilər. Daha kiçik saytlar üçün bu dərhal problem olmaya bilər, lakin minlərlə URL-ə çatdıqda, yeni məzmunun indekslənməsindəki gecikmə böyümə üçün darboğaza çevrilə bilər. Next.js və ya Nuxt.js kimi çərçivəyə keçmək təmiz CSR-dən daha bot dostu üsullara keçməyə kömək edə bilər.
JavaScript SEO performansınızı necə test edə bilərsiniz?
Test Google Search Console ilə başlayır. Googlebot-un yükləyə bilmədiyi hər hansı resursun olub-olmadığını görmək üçün URL yoxlama alətindəki Canlı Test funksiyasından istifadə edin. Bəzən üçüncü tərəf skripti və ya xüsusi CSS faylı bloklana bilər ki, bu da render mərhələsində tərtibatı poza bilər. Ekran görüntüsü qırıq və ya boş görünürsə, konsol log xətalarını görmək üçün ‘Daha çox məlumat’ sekmesini araşdırmalısınız. Bu loglar çox vaxt adi istifadəçilər üçün görünməz, lakin SEO üçün ölümcül olan skript uğursuzluqlarını və ya API vaxt aşmalarını aşkar edir. ‘Səhifə İndeksləmə’ hesabatının müntəzəm monitorinqi də Google-un render problemləri səbəbindən səhifələri indeksləyə bilmədiyini göstərəcək.
Digər effektiv üsul, JavaScript renderi aktivləşdirilmiş Screaming Frog kimi ixtisaslaşmış krollerdən istifadə etməkdir. Render mühərrikini Chrome-a təyin edə və ‘Orijinal HTML’ ilə ‘Render edilmiş HTML’-i müqayisə edə bilərsiniz. Bu müqayisə skriptləriniz tərəfindən hansı məzmunun əlavə edildiyini dəqiq görməyə imkan verir. Söz sayında və ya keçidlərin sayında əhəmiyyətli fərqlər tapsanız, bu, JavaScript-inizin botların qaçıra biləcəyi çoxlu ağır iş gördüyünün əlamətidir. H1 teqi və əsas naviqasiya kimi ən vacib SEO elementlərinin mümkün olduqda kodun həm orijinal, həm də render edilmiş versiyalarında olmasını hədəfləməlisiniz.
Tək səhifəli tətbiqdə daxili keçidlərin optimallaşdırılması
Daxili keçid krollanmanın onurğa sütunudur. Bir çox tək səhifəli tətbiqlərdə (SPA) tərtibatçılar istifadəçiləri səhifələr arasında hərəkət etdirmək üçün hadisə dinləyiciləri olan düymələrdən istifadə edirlər. Bu, insanlar üçün sürətli bir təcrübə yaratsa da, botlar düymələri klikləmir. Düzgün ‘href’ atributu olan standart lövbər teqlərindən istifadə etməlisiniz. Çərçivəniz keçidi səhifəni yeniləmədən idarə etsə belə, əsas HTML kroller üçün aydın bir yol təmin etməlidir. Məsələn, Vue.js tətbiqində standart ‘a’ teqi kimi render olunan ‘router-link’ komponentindən istifadə etməlisiniz. Bu, keçid kapitalının saytınızdan axmasını və yeni səhifələrin krollama zamanı təbii şəkildə aşkar edilməsini təmin edir.
Bundan əlavə, keçid kimi ‘div’ və ya ‘span’ elementlərindən istifadə etməkdən çəkinməlisiniz. Ümumi bir səhv, ‘span’-ı keçid kimi görünməsi üçün üslublandırmaq və ona JavaScript klik işləyicisi əlavə etməkdir. Axtarış motorları bunları naviqasiya elementləri kimi tanımır. Sayt arxitekturanız bu qeyri-standart keçidlərdən asılıdırsa, çox güman ki, Search Console-da çox sayda ‘Aşkar edilib – hazırda indekslənməyib’ səhifələri görəcəksiniz. Bu, botun sayt xəritənizdən səhifələrin mövcud olduğunu bilməsi, lakin krollama zamanı onlara heç bir daxili keçid tapa bilməməsi səbəbindən baş verir, bu da Google-un həmin səhifələri aşağı prioritetli və ya sahibsiz məzmun kimi qəbul etməsinə gətirib çıxarır.
Skriptlə zəngin səhifələr üçün krollama büdcəsinin idarə edilməsi
Krollama büdcəsi Googlebot-un müəyyən bir vaxt çərçivəsində saytınızda krolladığı səhifələrin sayıdır. JavaScript renderi bu büdcənin sadə HTML təhlilindən daha çoxunu istehlak edir. Bunu optimallaşdırmaq üçün JavaScript paketlərinizin ölçüsünü minimuma endirməlisiniz. Böyük faylların yüklənməsi və icrası daha çox vaxt aparır, bu da botun sizinkini bitirmədən başqa bir sayta keçməsinə səbəb ola bilər. Kodun bölünməsi (code splitting) kimi texnikalardan istifadə etmək, yalnız cari səhifə üçün lazım olan kodu təqdim etməyə imkan verir və icra müddətini azaldır. Tam SSR çərçivəsinə keçə bilmirsinizsə, Prerender.io kimi xidmətdən də istifadə edə bilərsiniz, çünki o, səhifənizin keşlənmiş statik versiyasını xüsusilə axtarış botlarına təqdim edir.
- Googlebot-un xüsusi komponentləri necə render etdiyini görmək üçün ‘Rich Results Test’ istifadə edərək saytınızı audit edin.
- Daha yaxşı indeksləmə üçün bütün şəkillərin fon şəkli üslubları əvəzinə ‘img src’ istifadə etdiyini yoxlayın.
- Tənbəl yüklənən (lazy-loaded) məzmunun müasir krollerlər tərəfindən dəstəklənən ‘IntersectionObserver’ API tərəfindən işə salındığından əmin olun.
- Səhifələnmənizin eyni URL-də sadəcə JS vasitəsilə məzmunu yeniləmək əvəzinə hər səhifə üçün unikal URL-lərdən istifadə etdiyini yoxlayın.
- Mobil və masaüstü renderi müqayisə etmək üçün müxtəlif SEO alətlərində ‘Fetch as Google’ ekvivalentlərindən istifadə edin.
- Googlebot-un böyük skript fayllarına həddindən artıq vaxt sərf edib-etmədiyini görmək üçün server loglarınızı izləyin.
Bu həftə JavaScript SEO-nuzu yaxşılaşdırmaq üçün dərhal atılacaq addımlar
Ən vacib 10 səhifənizi müəyyən etməklə başlayın və onları Google Search Console URL yoxlama aləti vasitəsilə işlədin. Xüsusilə render edilmiş HTML görüntüsündə çatışmayan mətni axtarın və hər hansı uğursuz resurs üçün konsol xəta loglarını yoxlayın. Kritik məzmunun çatışmadığını görsəniz, inkişaf komandanızla həmin xüsusi elementlər üçün hidratasiya və ya server tərəfli renderin tətbiqi haqqında danışın. Çox vaxt, interaktiv komponentləri müştəri tərəfində saxlayarkən yalnız əsas məzmunu server tərəfinə keçirmək ən yaxşı tarazlığı təmin edir. Bu, tətbiqinizin müasir hissini qurban vermədən ən dəyərli aktivlərinizin indeksləmə mərhələsinə hazır olmasını təmin edir.
Sonra, hər bir səhifənin standart lövbər teqi vasitəsilə əlçatan olduğundan əmin olmaq üçün daxili keçid strukturunuzu nəzərdən keçirin. Botların məzmununuzu daha səmərəli aşkar etməsinə kömək etmək üçün düymə əsaslı naviqasiyanı düzgün keçidlərlə əvəz edin. Nəhayət, Googlebot-un /static/js/ və ya /dist/ kimi JavaScript qovluqlarınıza daxil olmasını bloklamadığınızdan əmin olmaq üçün robots.txt faylınızı yoxlayın. Bot skriptləri yükləyə bilmirsə, səhifəni render edə bilməz, bu da saytınızı axtarış nəticələrindən effektiv şəkildə gizlədir. Bu texniki təməllərin müntəzəm auditi JavaScript ilə zəngin saytınızı görünən və rəqabətədavamlı saxlayacaq.
Oxumağa davam edin: SEO (Axtarış Motorunun Optimallaşdırılması) · SEO