Veb komponentləri və Shadow DOM tərtibatçılara öz üslublarını və məntiqini qoruyub saxlayan modul və inkapsulyasiya edilmiş UI elementləri yaratmağa imkan verir. Bu elementlərin axtarış sistemləri üçün görünən olmasını təmin etmək üçün siz onları Googlebot-a bütünləşdirmə prosesi zamanı daxili məzmuna daxil olmağa imkan verən şəkildə həyata keçirməlisiniz. Açıq kölgə kökündən (shadow root) istifadə etmək və Deklarativ Shadow DOM-u mənimsəmək xüsusi elementlərinizin tam indekslənməsini və axtarış nəticələrində düzgün sıralanmasını təmin etməyin ən təsirli yollarıdır.
Googlebot Shadow DOM içindəki məzmunu necə görür?
Googlebot veb səhifələrini emal etmək üçün Chrome mühərrikinin müasir versiyasından istifadə edir. Bu o deməkdir ki, nəzəri olaraq, o, adi istifadəçinin səyyahda gördüyü hər şeyi görə bilir. Axtarışçısı (crawler) veb komponenti ilə qarşılaşdıqda, kölgə ağacını (shadow tree) qurmaq üçün tələb olunan JavaScript-i icra edir. Lakin bu proses kölgə kökünün əlçatan olmasından asılıdır. Əgər kölgə kökü gizlidirsə və ya işə düşmək üçün mürəkkəb istifadəçi qarşılıqlı əlaqələrini tələb edirsə, axtarışçısı məzmunu tamamilə qaçıra bilər. Məhz buna görə də komponentlərinizin texniki quraşdırılması axtarış görünürlüğünüzdə əsas amildir.
JavaScript-ə çox ağırlıq verən saytlar üçün renderinq prosesi iki dalğada baş verir. Birincisi, axtarışçısı ilkin HTML-ə baxır. Daha sonra resurslar mövcud olduqda səhifənin tam renderinqini həyata keçirir. Veb komponentləri çox vaxt bu ikinci dalğadan asılı olduğundan, skriptin icrasında hər hansı bir gecikmə və ya xəta indeksdə boş yerlərə səbəb ola bilər. Bu boşluqların qarşısını almaq üçün render dövründə məzmunu mümkün qədər tez əlçatan etməyi hədəfləməlisiniz.
Niyə SEO üçün qapalı Shadow Roots-dan qaçınmalısınız?
JavaScript istifadə edərək kölgə kökü yaratdıqda rejimi açıq və ya qapalı olaraq təyin etmək seçiminiz olur. Qapalı kölgə kökü xarici dünyanın, o cümlədən axtarış sistemi skriptlərinin daxili DOM ağacına daxil olmasının qarşısını alır. SEO nöqteyi-nəzərindən bu, əhəmiyyətli bir riskdir. Əgər komponentin içindəki məzmun shadowRoot xassəsi vasitəsilə əlçatmazdırsa, Googlebot həmin komponentdə olan mətni, keçidləri və ya şəkilləri təhlil edə bilməyə bilər.
Əksər tərtibatçılar standart olaraq açıq rejimi seçirlər, ஏki bu, digər skriptlərlə daha asan sazlamağa (debugging) və inteqrasiyaya imkan verir. Axtarış optimallaşdırılması üçün açıq rejim tələbdir. O, render edilmiş məzmunun JavaScript işini bitirdikdən sonra Googlebot-un təhlil etdiyi əlçatan ağacın bir hissəsi olmasını təmin edir. Əgər komponentin içində məhsul təsvirləri və ya naviqasiya keçidləri kimi vacib məzmununuz varsa, kölgə kökünü açıq saxlamaq onun səhifənizin aktuallığına töhfə verməsini təmin etməyin yeganə yoludur.
Dinamik renderinq axtarış sistemlərində JavaScript tərəfindən yaradılan məzmunun problemləri üçün uzunmüddətli həll deyil, sadəcə bir çıxış yolu idi.
Google Search Central
Axtarış görünürlüğü üçün Deklarativ Shadow DOM necə həyata keçirilir?
Deklarativ Shadow DOM (DSD) kölgə ağacını birbaşa HTML mənbə kodunda təyin etməyə imkan verən xüsusiyyətdir. JavaScript faylının yüklənməsini və kölgə kökünü qoşmaq üçün funksiya çağırmasını gözləmək əvəzinə xüsusi atributu olan şablon teqbindən istifadə edirsiniz. Bu, SEO üçün kütləvi bir təkmilləşdirmədir, çünki məzmun axtarışçısına göndərilən HTML-in ilk baytında mövcuddur. O, həmin xüsusi komponent üçün indeksləşdirmənin ikinci dalğasından asılılığı aradan qaldırır.
shadowrootmode atributu açıq olaraq təyin edilmiş şablon teqbindən istifadə etməklə həm brauzer, həm də axtarış sistemi üçün aydın yol xəritəsi təqdim edirsiniz. Bu yanaşma server tərəfli renderinq (SSR) ilə mükəmməl işləyir. Serveriniz bütün kölgə ağacını əvvəlcədən yarada və onu müştəriyə göndərə bilər. Bu, hətta JavaScript yüklənmədikdə və ya bloklandıqda belə məzmunun görünən qalmasını təmin edir. Bu üsul əsas tərtibatı üçün xüsusi elementlərə güvənən saytlar üçün möhkəm təməl təmin edir.
- Bütün kritik UI komponentləri üçün istifadə edin.
- Server tərəfli renderinq mühərrikinin deklarativ kölgə ağaclarının ixracını dəstəklədiyinə əmin olun.
- Googlebot onu nativ olaraq dəstəkləsə də, DSD-ni dəstəkləməyən köhnə brauzerlər üçün polifil daxil edin.
- Əsas naviqasiya keçidlərini yalnız müştəri tərəfində render olan komponentlərin daxilinə yerləşdirməkdən çəkinin.
- Kölgə məzmununun render edilmiş HTML-də görünülüb-görünmədiyini yoxlamaq üçün URL Təftiş alətindən istifadə edərək nəticəni sınayın.
Alien Road Veb Komponentləri və Shadow DOM-u necə tətbiq edir
Alien Road olaraq biz müasir frontend çərçivələrindən istifadə edən müştərilərimizin axtarış reytinqlərini itirməməsini təmin etmək üçün xüsusi proses izləyirik. Biz hər bir xüsusi teqi müəyyən etmək üçün sənəd strukturunu audit etməklə başlayırıq. Məsələn, əgər Shopify mağazası məhsul şəbəkəsi üçün xüsusi komponentdən istifadə edirsə, biz məhsul başlqılarının və qiymətlərinin ilkin HTML axınında görünən olub- olmadığını yoxlayırıq. Komandamız səhifə istifadəçiyə təqdim olunmazdan əvvəl bu komponentləri Deklarativ Shadow DOM-a çevirən server tərəfli renderinq qabıqlarını tətbiq edir.
Tipik bir əməkdaşlıq zamanı biz həmçinin render edilmiş səhifənin axtarışçıya necə göründüyünü izləmək üçün Google Search Console-dan istifadə edirik. Serverdə əvvəlcədən render olunduğunu təmin edə bilməsək, yüksək dəyərli açar sözləri ehtiva edən elementlər üçün kölgə köklərindən istifadə etməkdən çəkinirik. Biz həmçinin əsas məzmunun görünməsini gecikdirmədiyini təmin etmək üçün Ən Böyük Məzmunlu Rəngləmə (LCP) üçün monitorinq qururuq. Bu ətraflı yanaşma ən son veb texnologiyalarından istifadə edərkən güclü axtarış mövcudluğunu qorumağa kömək edir.
Veb Komponentləri Əsas Veb Vitalarına (Core Web Vitals) təsir edə bilrmi?
Veb komponentləri düzgün idarə olunmazsa, performans göstəricilərinə birbaşa təsir edə bilər. Bir çox komponentlərin işə düşməsi üçün JavaScript tələb olunduğundan, səhifə yüklənməyə başladıqdan sonra brauzer onlar üçün yer ayırmalı olarsa, bu, tərtibat dəyişikliklərinə səbəb ola bilər. Bu, Toplanan Tərtibat Dəyişikliyi (CLS) balına təsir edir. Bunun qarşısını almaq üçün skriptlər işə düşməzdən əvvəl CSS-də xüsusi elementlərinizin ölçülərini təyin etməlisiniz. Bu, komponentlər hidratlaşdıqca səhifə tərtibatının sabit qalmasını təmin edir.
Digər amil Ən Böyük Məzmunlu Rəngləməsidir. Əsas qəhrəman şəkliniz və ya başlığınız böyük bir JavaScript paketinin yüklənməsini gözləyən veb komponentin içərisində sarılıbsa, LCP balınız zərər görəcək. Deklarativ Shadow DOM-dan istifadə etməklə siz brauzerə HTML-i təhlil edən kimi komponenti render etməyə başlamağa icra verirsiniz ki, bu da bu performans göstəricilərini əhəmiyyətli dərəcədə yaxşılaşdırır. Daha sürətli yükləmə müddətləri daha yaxşı istifadəçi təcrübəsinə gətirib çıxarır və axtarış reytinqlərinizə müsbət təsir göstərə bilər.
Shadow DOM-da tənbəl yüklənən (lazy-loaded) məzmunun idarə edilməsi
Bir çox tərtibatçılar internet bant genişliyinə qənaət etmək üçün veb komponentləri daxilində tənbəl yükləmədən istifadə edirlər. Bu performans üçün yaxşı təcrübə olsa da, əgər həyata keçirilmə sürüşdürmə kimi istifadəçi hərəkəti tələb edirsə, o, məzmunu Google-dan gizlədə bilər. Googlebot sürüşdürmür. Əgər komponentiniz məlumatlarını yalnız sürüşdürmə hadisəsi vasitəsilə baxış sahəsinə (viewport) daxil olduqda yükləsə, həmin məlumat heç vaxt indekslənməyəcək. Məzmunun heç bir qarşılıqlı əlaqə olmadan axtarışçısı üçün əlçatan olmasını təmin etməlisiniz.
Bunu idarə etməyin ən yaxşı yolu IntersectionObserver API-dən istifadə etməkdir. Bu API elementin baxış sahəsində nə vaxt görünən olduğunu aşkar etməyə və məzmunu müvafiq olaraq yükləməyə imkan verir. Axtarış sistemləri üçün aşkarlama məntiqinin renderinq mərhələsində düzgün işə düşməsini təmin etməlisiniz. Siz həmçinin noscript teqbində ehtiyat məzmun təmin etməli və ya komponentin server tərəfində tam şəkildə əvvəlcədən render edilə biləcəyinə əmin olmalısınız.
- Komponentlərin içindəki bütün şəkillərin düzgün alt mətninə malik olduğundan və aşkar oluna bildiyindən əmin olun.
- Tənbəl yükləmə üçün sürüşdürmə hadisəsi dinləyiciləri əvəzinə IntersectionObserver API-dən istifadə edin.
- Kölgə ağaclarındakı keçidlərin href atributları ilə standart anker teqidlərindən istifadə etdiyinə əmin olun.
- Heç bir kritik məzmunun Googlebot-un yerinə yetirə bilməyəcəyi “genişləndirmək üçün klikləyin” qarşılıqlı əlaqəsinin arxasında gizlədilmədiyini yoxlayın.
- Robots.txt tərəfindən bloklanmadıqlarına əmin olmaq üçün JavaScript fayllarınızın axtarış tezliyini izləyin.
SEO-dostu komponentlər üçün addım-addım yoxlama siyahısı
Veb komponentləri ilə axtarışa uyğun sayt qurmaq müasir inkişaf təcrübələri ilə axtarışçılarının texniki məhdudiyyətləri arasında tarazlıq tələb edir. Hər bir xüsusi elementi onun görünən olduğunu sübut edənə qədər potensial indeksləmə maneəsi kimi qəbul etməlisiniz. Strukturlaşdırılmış yoxlama siyahısına əməl etməklə sayt miqrasiyası və ya əsas dizayn yeniləməsi zamanı üzvi trafiki itirmək riskini minimuma endirə bilərsiniz. Ən yaxşı nəticələr əldə etmək üçün ilkin HTML çatdırılmasına və son render edilmiş vəziyyətə diqqət yetirin.
JavaScript-in söndürüldüyü məhdud mühitdə komponentlərinizi sınamaqla başlayın. Əgər səhifənin əsas mesajı yoxş olarsa, SSR ilə həll edilməli olan probleminiz var. Sonra Googlebot render mühitini simulyasiya edən alətlərdən istifadə edərək daha qabaqcıl sınaqlara keçin. Bu ikili yoxlama həm saytınızın ilkin, həm də render edilmiş versiyalarının axtarış üçün optimallaşdırılmasını təmin edir.
Bu həftə haradan başlamaq lazımdır
İlk tapşırığınız mövcud xüsusi elementlərinizi audit etməkdir. Veb saytınızı açın və DOM-u yoxlamaq üçün brauzerin tərtibatçı alətlərindən istifadə edin. Hər hansı bir shadow-root (closed) işarələrini axtarın. Onları tapsanız, onları dərhal açıq rejimə keçirmək üçün inkişaf komandanızla işləyin. Bu, məzmununuzun nə qədərinin indeksləndiyinə birbaşa təsir edə bilən sürətli düzəlişdir.
Sonrakı mərhələdə server tərəfli renderinq strategiyanızı qiymətləndirin. Lit və ya Stencil kimi çərçivədən istifadə edirsinizsə, Deklarativ Shadow DOM dəstəyi üçün onların sənədlərini yoxlayın. Ən vacib səhifələriniz üçün DSD-nin həyata keçirilməsi həm istifadəçilər, həm də axtarış sistemləri üçün daha etibarlı təcrübə təmin edəcək. Nəhayət, əsas URL-lərinizdə canlı test keçirmək və komponentlərinizdəki bütün mətnin render edilmiş HTML tabında görünən olduğunu yoxlamaq üçün Google Search Console-dan istifadə edin.