JavaScript Vasitəsilə Strukturlaşdırılmış Məlumatın Tətbiqi: Ən Yaxşı Təcrübələr

Strukturlaşdırılmış məlumatın JavaScript ilə daxil edilməsi müştəri tərəfli çərçivələr və ya teq idarəetmə konteynerləri vasitəsilə dinamik şəkildə render edilən səhifələrə sxem işarələməsi əlavə etmək üçün dəstəklənən üsuldur. Səhifə brauzerdə icra olunduqda, xüsusi skriptlər JSON-LD skript bloku yaradır və onu sənəd obyekt modelinə (DOM) əlavə edir. Google Axtarış bu işarələməni render mərhələsində emal edir və zəngin nəticə obyektlərini tıpkı statik HTML sxemində olduğu kimi çıxarır.

Google JavaScript ilə daxil edilmiş strukturlaşdırılmış məlumatı necə emal edir?

Google iki mərhələli indeksləmə boru kəmərindən istifadə edir. Birinci mərhələdə Googlebot veb serverinizin qaytardığı xam HTML-i skan edir, dərhal gələn teqleri təhlil edir və müştəri tərəfli resursları daha sonra icra olunmaq üçün planlaşdırır. Əgər strukturlaşdırılmış məlumat yalnız müştəri tərəfli kodun içində yerləşirsə, Googlebot ilkin skan zamanı onu oxuya bilməz.

JavaScript Vasitəsilə Strukturlaşdırılmış Məlumatın Tətbiqi: Ən Yaxşı Təcrübələr

İkinci mərhələdə Veb Renderinq Xidməti səhifəni başsız brauzer mühitində yükləyir, JavaScript-i icra edir və render edilmiş DOM-u yaradır. Bundan sonra Google sxem işarələməsi, o cümlədən müştəri tərəfli skriptlər tərəfindən əlavə edilmiş istənilən JSON-LD qovşaqları üçün bu render edilmiş DOM-u yoxlayır.

Google Axtarış bu məzmunu veb-saytın HTML-indəki məzmunla birlikdə görür.

Google Search Central

Google render edilmiş sxemi uğurla təhlil etməsinə baxmayaraq, emal dərhal baş vermir. Render növbəyə dayanması kəşf və çıxarılma arasında gecikmələrə səbəb ola bilər, xüsusən də böyük skan büdcəsi olan və ya ağır hesablama yükü olan saytlarda. Əgər renderiniz uğursuz olarsa və ya vaxt aşımına uğrasa, Google xam HTML-ə qayıdır və strukturlaşdırılmış məlumatı indekslənməmiş şəkildə qoyur.

JavaScript Vasitəsilə Strukturlaşdırılmış Məlumatın Tətbiqi: Ən Yaxşı Təcrübələr — 2

Hansı texniki üsullar strukturlaşdırılmış məlumatın daxil edilməsi üçün ən yaxşı işləyir?

Tərtibatçıların skript icrasından istifadə edərək sxem əlavə etmək üçün üç əsas yolu var. Hər bir texnika başsız e-ticarət quruluşlarından tutmuş teq sistemləri vasitəsilə idarə olunan köhnə marketinq platformalarına qədər müxtəlif memarlıq modellərinə uyğundur.

  • Çərçivə həyat dövrü qarmaqları: React, Next.js və ya Vue kimi çərçivələrdə tərtibatçılar komponent vəziyyəti daxilində JSON-LD obyektləri yaradır və onları son quraşdırmadan əvvəl birbaşa sənəd başlığına daxil edirlər.
  • Adi (Vanilla) JavaScript DOM daxiletməsi: Səhifə yüklənərkən xüsusi skript işləyir, pəncərə dəyişənlərindən və ya API yüklərindən dinamik atributları toplayır, application/ld+json tipli skript elementi yaradır və onu document.head-ə əlavə edir.
  • Google Tag Manager Xüsusi HTML teqləri: Marketoloqlar DOM Ready və ya Container Loaded hadisəsi baş verdikdə GTM dataLayer dəyişənləri ilə doldurulmuş JSON-LD ehtiva edən skript teqini işə salırlar.

Birbaşa çərçivə daxiletməsi ən təmiz yanaşma olaraq qalır, çünki o, strukturlaşdırılmış məlumatı tətbiq quraşdırma boru kəmərinə bağlayır. Teq meneceri daxiletməsi birbaşa kod yerləşdirmələri olmayan marketinq komandaları üçün çeviklik təmin edir, lakin o, skript icra asılılıqlarının əlavə təbəqəsini yaradır.

Niyə dinamik renderinq artıq tövsiyə olunmur?

Müştəri tərəfli veb inkişafının əvvəlki illərində mühəndislik komandaları ağır JavaScript tətbiqləri ilə axtarış skanerləri arasındakı boşluğu aradan qaldırmaq üçün dinamik renderinqə müraciət edirdilər. Proksi server axtarış sisteminin istifadəçi agentlərindən gələn sorğuları tutaraq insan ziyarətçilərə standart JavaScript paketləri təqdim edərkən əvvəlcədən render edilmiş HTML snapperi xidmət edirdi.

Dinamik renderinq axtarış sistemlərində JavaScript tərəfindən yaradılmış məzmuna dair problemlər üçün uzunmüddətli həll deyil, sadəcə bir iş üsulu (workaround) idi.

Google Search Central

Google indi mühəndislik komandalarına dinamik renderinq quraşdırmalarından uzaqlaşmağı tövsiyə edir. İki ayrı renderinq boru kəmərinin saxlanılması texniki xidmət yükü, istifadəçilərin və skanerlərin nə qəbul etdiyi arasında uyğunsuzluqlar və axtarış yoxlamasını pozan yönləndirmə xətaları yaradır.

Proksi renderləri işlətmək əvəzinə, müasir istehsal sistemləri server tərəfli renderinq, statik sayt generasiyası və ya tədrici hidrasiyanı qəbul etməlidirlər. Bu memarlıqlar JSON-LD strukturlaşdırılmış məlumatının birbaşa server cavabında mövcud olmasını təmin edir, render gecikməsini aradan qaldırır və JavaScript-i emal etməyən mühərriklər də daxil olmaqla bütün veb skanerləri üzrə görünürlüğe zəmanət verir.

Hansı səhvlər JavaScript əsaslı sxem tətbiqlərini pozur?

Sxemi skriptlər vasitəsilə daxil etmək sadə HTML teqlərində mövcud olmayan əməliyyat riskləri yaradır. Tək bir tutulmamış istisna və ya şəbəkə vaxt aşımı strukturlaşdırılmış məlumat skriptinin DOM-a əlavə olunmasının qarşısını ala bilər.

  • İcra prosesini istifadəçi qarşılıqlı əlaqəsinə bağlamaq: Sürüşdürmə, klikləmə və ya üzərinə gəlmə hadisəsindən sonra sxem daxil etmək üçün konfiqurasiya edilmiş skriptlər uğursuz olacaq, çünki Googlebot səhifə idarəediciləri ilə qarşılıqlı əlaqədə olmur.
  • JSON yüklərində qaçış simvolları (escape) olunmamış sətirlər: İkitərəfli dırnaq işarələrini qaçış simvolları ilə tənzimləmədən müştəri API-ləri vasitəsilə məhsul təsvirlərini və ya rəy mətnini əldə etmək JSON təhlilini pozur və sxemi oxunmaz hala gətirir.
  • Vaxt uyğunsuzluqları: Google-un render vaxt aşımından sonra bitən asinxron API cavablarından sonra sxemin daxil edilməsi strukturlaşdırılmış məlumatın render edilmiş DOM snapshot-undan kənarda qalmasına səbəb olacaq.
  • Təkrar sxem bəyannamələri: Teq meneceri daxiletməsini köhnə şablon kodlaşdırması ilə birləşdirmək axtarış təhlilçilərini çaşdıran ziddiyyətli obyekt qovşaqları yaradır.

Qeyd olunan üsullar məzmunu yükləmək üçün səhifəni sürüşdürmək və ya klikləmək kimi istifadəçi hərəkətlərinə güvənmir ki, bu da vacibdir, çünki Google Axtarış səhifənizlə qarşılıqlı əlaqədə olmur.

Google Search Central

Daxil edilmiş sxemin yoxlanılması xam səhifə mənbəyinə baxmaq əvəzinə render edilmiş DOM çıxışının sınaqdan keçirilməsini tələb edir. Brauzerdə səhifə mənbəyinə baxmaq yalnız kabel üzərindən gələnləri göstərir və JavaScript rutinləriniz tərəfindən edilən hər bir dəyişikliyi gizlədir.

Alien Road bunu müştəri layihələrində necə tətbiq edir

Alien Road-da texniki marketinq və inkişaf komandalarımız məhsul kataloqlarının saatlıq dəyişdiyi mürəkkəb e-ticarət platformaları və tək səhifəli tətbiqlərlə işləyir. Biz JavaScript tərəfindən idarə olunan strukturlaşdırılmış məlumatı audit etmək, yerləşdirmək və yoxlamaq üçün strukturlaşdırılmış, dörd mərhələli prosesdən istifadə edirik.

1. Kəşfiyyat və memarlıq nəzərdən keçirilməsi

Biz müştəri platformasının renderinq stekini qiymətləndirməklə başlayırıq. Əgər mağaza başsız Shopify, xüsusi React vitrini və ya Angular idarəetmə panelində işləyirsə, biz strukturlaşdırılmış məlumat dəyişənlərinin haradan yarandığını müəyyənləşdiririk. Biz kataloq xüsusiyyətlərini (qiymət, inventar statusu, SKU və reytinqlər) standart schema.org növlərinə uyğunlaşdırırıq.

2. Server-birinci daxiletmənin tətbiqi

Mümkün olduqda, biz strukturlaşdırılmış məlumat generasiyasını birbaşa server tərəfindən render edilmiş şablonlara və ya server tərəfli hidrasiya boru kəmərlərinə quraşdırırıq. Müştərilər müştəri tərəfli vəziyyətə güvəndikdə, biz ilkin rəsmdən əvvəl sinxron şəkildə JSON-LD obyektlərini yığan xüsusi köməkçi funksiyalar qururuq və ikincil asinxron gətirmə dövrlərindən qaçırıq.

3. Render edilmiş çıxışın sınaqdan keçirilməsi

Biz statik kod yoxlamalarını yan keçərək son render edilmiş DOM-u yoxlayırıq. Komandamız Google-un Zəngin Nəticələr Testi aləti və Axtarış Konsolu URL İnspeksiyası xüsusiyyəti vasitəsilə testlər həyata keçirir. Bu, Googlebot-un daxiletmə skriptini düzgün icra etməsini və heç bir sintaksis xəbərdarlığı olmadan hər bir xüsusiyyəti aşkar etməsini təsdiqləyir.

4. Davamlı monitorinq və hesabat

Müştəri yerləşdirmələri skript məntiqini asanlıqla poza və ya dəyişən adlarını dəyişə bilər. Biz etibarlı Məhsul, FAQ və ya Məqalə elementlərində gözlənilməz enişləri aşkar etmək üçün Axtarış Konsolunda axtarış təkmilləşdirmə hesabatlarını həftəlik izləyirik. Səhvlər yarandıqda, mühəndislərimiz istehsal reytinqlərinə təsir etmədən əvvəl səhnələşdirmədə dəqiq skript xətasını müəyyənləşdirirlər.

Daxil edilmiş sxemin işlədiyini necə yoka bilərsiniz?

Dinamik olaraq əlavə edilmiş sxemin yoxlanılması ixtisaslaşdırılmış tərtibatçı alətləri tələb edir, ஏünki əsas brauzer baxış üsulları dinamik skript icralarını əks etdirmir. Quraşdırmanızı təsdiqləmək üçün bu diaqnostika addımlarını izləyin:

  • Chrome DevTools-u açın: Xam mənbəyə baxmaq əvəzinə Elements tabına keçin. Skript teqinin canlı DOM ağacında mövcud olduğunu təsdiqləmək üçün application/ld+json axtarın.
  • Konsol xətalarını yoxlayın: Sxem daxiletmə funksiyasından əvvəl heç bir JavaScript xətasının skript icrasını pozmadığından əmin olun.
  • Zəngin Nəticələr Testindən istifadə edin: Canlı səhifə URL-ini Google-un sınaq alətinə təqdim edin. Google-un səhifəni render etdiyini və dinamik obyekti tanıdığını təsdiqləmək üçün aşkar edilmiş elementlər tabını nəzərdən keçirin.
  • Axtarış Konsolu vasitəsilə yoxlayın: Dərc edilmiş URL-lərdə URL İnspeksiya alətindən istifadə edin və ‘Sınaqdan keçirilmiş səhifəyə bax’ düyməsini basın. Daxil edilmiş skript blokunuzun render edilmiş snapşotda mövcud olduğunu təsdiqləmək üçün HTML sekmesini yoxlayın.

Bu həftə haradan başlamaq lazımdır

Ən yüksək dəyərli beş açılış səhifənizi və ya məhsul siyahılarınızı audit edin. Google-un Zəngin Nəticələr Testi alətini açın və strukturlaşdırılmış məlumatınızın render zamanı düzgün şəkildə aşkarlanıb-aşkarlanmadığını yoxlamaq üçün hər bir URL-də canlı test keçirin.

Əgər sxeminiz Google Tag Manager-ə və ya müştəri tərəfli skriptlərə əsaslanırsa, həmin teqlərin ilkin səhifə yüklənməsi başa çatmamışdan əvvəl işə düşüb-düşmədiyini yoxlayın. Render gecikməsini minimuma endirmək və Google-un zəngin işarələməyinizi etibarlı şəkildə indeksləşdirməsini təmin etmək üçün hər hansı asinxron məlumat asılılıqlarını server tərəfindən render edilmiş işarələməyə və ya tərtibat vaxtı məlumat obyektlərinə köçürün.

Paylaş