De ce randarea dinamică nu este o soluție pe termen lung

În cazul în care ați ratat-o, Google a precizat recent că:

• Redarea dinamică este o soluție și nu o soluție pe termen lung pentru problemele JavaScript și
• Google recomandă utilizarea redării pe server, redării statice sau hidratării.

Deși documentația oficială Google pune în lumină modul în care ar trebui să tratăm acum randarea dinamică, întrebarea care îi deranjează pe mulți rămâne: de ce anume ar trebui să considerăm redarea dinamică o soluție temporară?

Dacă această întrebare te determină să cauți răspunsul ca mine, haideți să cercetăm!

De ce este importantă această actualizare?

Pentru a înțelege de ce considerăm această actualizare vitală, să ne întoarcem pentru a vedea cum a tratat Google anterior redarea (dinamică).

Cronologia poveștii de redare dinamică

Totul a început în 2009, când Google și-a dat seama că aproape 70% din toate site-urile web despre care știa Google foloseau deja JavaScript. Dar problema a fost că, în acel moment, nu erau capabili să redea JavaScript deloc.

Pentru a asigura accesarea cu crawlere și indexarea JavaScript, Google a sugerat difuzarea unei versiuni HTML statice a unui site web către roboți atunci când difuzează utilizatorilor un site web complet bazat pe JavaScript. A fost chiar începutul redării dinamice de astăzi ca o soluție de soluționare în cazurile în care Google nu a putut face față unui site web randat pe partea clientului.

În 2014, Google a recunoscut oficial că a început să redeze site-uri web bazate pe JavaScript , pentru a actualiza în 2015 că în general sunt capabili să redea JavaScript . Cu toate acestea, multe site-uri web încă s-au luptat cu redarea și indexarea corectă a conținutului lor JavaScript.

De aceea, Bartosz Goralewicz, CEO al Onely, a început să cerceteze subiectul și să experimenteze pentru a afla dacă Google poate accesa cu crawlere și indexa în mod corespunzător cadrele JavaScript .

În timp ce, din partea Google, informații mai precise despre randarea dinamică au apărut în 2018. În timpul conferinței Google I/O , angajații Google au recunoscut că folosesc două valuri de indexare. Acesta a subliniat că, în general, redarea site-urilor web bazate pe JavaScript este amânată atâta timp cât Google nu are resursele pentru a procesa acel conținut. De asemenea, la scurt timp după conferință, Google și-a publicat documentația oficială (actualizată acum), recomandând randarea dinamică pentru a obține conținutul JavaScipt indexat mai rapid.

Apoi, în 2019, Bartosz Goralewicz a elaborat randarea dinamică în timpul prezentării sale la SMX WEST . El și-a propus să explice de ce această soluție nu este un glonț de argint pentru toate problemele de randare.

Și, deși noi, la Onely, știam deja până atunci că randarea dinamică nu este cea mai bună soluție, Google a recomandat-o totuși ca o soluție pentru procesarea JavaScript de către crawler-uri, astfel încât webmasterii să-l folosească în continuare. Dar, din păcate, adesea nu și-au dat seama cât de scump este să găzduiești.

Ce este randarea dinamică?

Redarea dinamică (cunoscută și sub denumirea de prerendare) constă în a oferi utilizatorilor o versiune JavaScript completă a site-ului dvs. și o versiune HTML statică crawlerelor pentru a vă prezenta conținutul JavaScript. Funcționează prin detectarea și distingerea diferiților agenți de utilizator și prin furnizarea de versiuni de site web adecvate utilizatorilor și boților.

Cu toate acestea, nu înseamnă neapărat că utilizatorii trebuie să primească în întregime conținut redat de partea clientului; pur și simplu nu primesc aceleași fișiere statice ca și roboții. În termeni generali, întreaga experiență JavaScript este oferită utilizatorilor, iar fișierele HTML – roboților.

Google completează această definiție specificând:

Îl numim dinamic deoarece site-ul dvs. detectează în mod dinamic dacă cererea există sau nu un crawler al motorului de căutare, cum ar fi Googlebot, și abia apoi trimite conținutul redat de partea serverului direct către client. Puteți include și alte servicii web aici, de asemenea, care nu se pot ocupa de randare. De exemplu, poate servicii de social media, servicii de chat, orice încearcă să extragă informații structurate din paginile tale. Și pentru toți ceilalți solicitanți, deci utilizatorii tăi obișnuiți, ai servi codul tău hibrid normal sau randat pe partea clientului.

sursa: John Muller

Deoarece etapa de randare, în general, este costisitoare pentru a fi procesată de crawler-uri, randarea dinamică oferă Googlebot o versiune HTML ușor de înțeles, ușoară și statică, pentru a vă pregăti conținutul pentru o posibilă indexare mai rapidă.

De aceea, Google sugerează că randarea dinamică poate fi un compromis în principal pentru site-uri web:

• schimbându-și frecvent conținutul, cum ar fi site-urile web de publicare de știri – trebuie să-și indexeze conținutul proaspăt cât mai curând posibil, astfel încât să nu poată amâna execuția redării JavaScript,
• folosind funcții JavaScript moderne care nu sunt acceptate de crawler -uri și
• bazându-se pe partajarea conținutului lor prin intermediul rețelelor sociale sau al aplicațiilor de chat.

Prin ce diferă redarea dinamică de alte moduri populare de a servi JavaScript?

Redarea este un pas crucial al conductei de indexare – modul în care este redat site-ul dvs. afectează modul în care motoarele de căutare văd conținutul. Și pentru a răspunde atât nevoilor roboților, cât și ale utilizatorilor, trebuie să învățați despre două abordări diferite: randarea pe partea serverului și pe partea clientului.  

Înțelegerea lor este crucială, deoarece aceste concepte apar și în diferite moduri de a servi JavaScript pe care le puteți alege, cum ar fi randarea dinamică.

Redare pe partea clientului

Redarea la nivelul clientului se bazează pe procesarea conținutului direct în browser folosind JavaScript. La început, browserele și crawlerele primesc HTML inițial (care reprezintă de obicei pagini goale cu conținut redus sau deloc). Apoi, JavaScript este descărcat și rulat asincron de pe server, afișând conținutul dvs. dinamic pentru utilizatori.

Cu toate acestea, luând această abordare, riscați ca conținutul dvs. să nu fie redat de Google, deoarece poate avea dificultăți să proceseze versiunea bazată pe JavaScript a unui site web în mod independent, din cauza resurselor sale limitate. Rețineți că randarea pe partea clientului în sine nu este o problemă și Google se poate ocupa de ea, dar dacă nu este bine optimizată, este foarte costisitor pentru Google să acceseze cu crawlere, să randeze și să indexeze.

Redare pe partea serverului

Cu randarea pe partea de server, roboții și utilizatorii primesc versiunea HTML a site-ului dvs. web redată complet pe server imediat, la momentul solicitării. Faptul că redarea HTML este gestionată pe server face ca întregul proces să fie mai rapid pentru browsere și, în general, mai ușor pentru motoarele de căutare să preia conținutul.

De asemenea, deși randarea pe server este o soluție recomandată, Google subliniază că alegerea acesteia nu influențează clasamentul dvs. - diferă doar de randarea dinamică în ceea ce privește configurarea și întreținerea:

Nu există bonusuri de clasare SEO pentru implementarea acestuia într-un fel sau altul – sunt doar moduri diferite de a face conținutul indexabil (cum este redarea pe partea clientului). Diferențele dintre randarea dinamică și redarea pe server din POV-ul meu sunt mai mult în ceea ce privește configurarea și întreținerea infrastructurii practice (de asemenea, poate afecta viteza, în funcție de modul în care ai configurat lucrurile).

sursa: John Muller

Cum funcționează randarea dinamică?

Redarea dinamică poate utiliza un dispozitiv de redare extern pentru a facilita schimbarea HTML inițial și JavaScript în HTML static pe care crawlerele îl pot procesa.

Google recomandă utilizarea următoarelor instrumente de redare dinamice:

• Prerender.io (software terță parte),
• Puppeteer (software open-source) sau
• Rendertron (software open-source).

După ce ați configurat oricare dintre soluțiile recomandate, nu uitați să:

1. Alegeți agenții utilizator pe care doriți să le difuzeze în versiunea HTML statică a site-ului dvs. web, de exemplu, „googlebot” sau „twitterbot”.
2. Configurați un cache pentru a permite site-ului dvs. web să fie difuzat cât mai repede posibil și pentru a evita expirarea timpului.
3. Asigurați-vă că versiunea preredată a site-ului dvs. web servește versiunea orientată pe dispozitiv. Cu alte cuvinte, crawlerele motoarelor de căutare mobile ar trebui să vadă versiunea mobilă a site-ului dvs. atunci când alți crawler-uri - cea desktop.
4. Asigurați-vă că serverul dvs. poate furniza codul HTML static agenților utilizator aleși.

În ceea ce privește implementarea redării dinamice, Google oferă documentația sa oficială privind implementarea și verificarea configurației randării dinamice.

De ce și cum să începeți să navigați în problemele de randare dinamică?

Google nu poate indexa complet un site web bazat pe JavaScript până când nu este redat complet. Deci, dacă randarea dinamică eșuează, conținutul dvs. nu va fi inclus în SERP-uri.

Și luați ca exemplu site-urile web de comerț electronic populare din SUA: 80% folosesc JavaScript pentru a genera conținut principal și link-uri către produse similare . Reprezintă o amenințare gravă pentru indexabilitatea părților critice ale acelor domenii. Acum, gândiți-vă cum se traduce în scăderea veniturilor lor.

De aceea, pasul crucial al implementării randării dinamice este navigarea și verificarea potențialelor probleme.  

Utilizați testul de compatibilitate cu dispozitivele mobile

Instrumentul vă permite să asigurați compatibilitatea site-ului dvs. cu dispozitivele mobile și să vedeți codul sursă redat al site-ului web testat, împreună cu o captură de ecran a modului în care Googlebot redă pagina dvs. pe dispozitivele mobile.

Este posibil să observați că unele părți din conținutul dvs. lipsesc din codul sursă – acesta este un semnal pentru dvs. că Googlebot nu a reușit să redeze acele resurse și poate fi rezultatul redării dinamice implementate incorect.

În cadrul instrumentului, puteți accesa secțiunea Detalii pentru a afla când și cu ce crawler pagina a fost accesată cu crawlere sau chiar să verificați răspunsul HTTP. Dacă vă verificați domeniul, testul de compatibilitate cu dispozitivele mobile vă poate transfera în analize ulterioare în Google Search Console.

Dacă se întâmplă să întâmpinați probleme folosind Testul de compatibilitate cu dispozitivele mobile, citiți articolul de pe blogul nostru pentru a afla cum să vă optimizați site-ul web pentru dispozitive mobile.

Utilizați Google Search Console

Unul dintre rapoartele pe care trebuie să le verificați pentru a vă asigura că ați implementat corect randarea dinamică este raportul Acoperirea indexului (indexarea paginilor). Vă ajută să navigați în problemele de indexare și vă informează despre care dintre paginile dvs. nu sunt indexate și de ce.

Un exemplu de stare care poate sugera probleme de redare pe site-ul dvs. este Pagina indexată fără starea conținutului ‒ Googlebot nu a putut vedea conținutul deoarece nu a putut reda pagina.

O altă funcție utilă din Google Search Console este instrumentul de inspecție URL . Similar testului de compatibilitate cu dispozitivele mobile, instrumentul de inspecție URL vă permite să verificați starea unei pagini testate și să vedeți versiunea redată a acesteia.

Utilizați ZipTie.dev

Deoarece problemele de indexare pot apărea din probleme de randare, merită să analizați modul în care este indexat site-ul dvs. Ar trebui să vă uitați atât la numărul de pagini indexate, cât și la dacă anumite secțiuni ale acestor pagini sunt indexate.

Pentru a verifica dacă un anumit fragment al paginii dvs. este indexat, puteți utiliza comanda site: împreună cu un fragment de text între ghilimele. Dar atunci când aveți un site mare cu milioane de adrese URL de analizat, nu le veți putea verifica pe toate manual.

ZipTie.dev analizează indexarea împreună cu alte puncte de date, cum ar fi numărul de cuvinte, titluri, anteturi, meta descrieri și multe altele. Acest lucru vă va ajuta să identificați cauzele potențiale ale problemelor dvs. de indexare (și astfel de randare).

Utilizați testul Rezultate îmbogățite

Dacă utilizați date structurate pe site-ul dvs. web și vă pasă de rezultatele bogate, utilizați testul Rezultate îmbogățite pentru a verifica dacă marcajul este implementat corect.

Testul vă arată, de asemenea, versiunea redată a site-ului dvs. web și prezintă modul în care Googlebot înțelege marcajul dvs., specificând orice erori, tipurile acestora și unde apar acestea în cod.

Cu toate acestea, doar bifarea casetelor din lista „Cum să depanați problemele de randare dinamică” poate să nu fie suficientă. Cu cât site-ul web este mai mare și mai complex, cu atât poate fi mai dificil să specificați ce anume a mers prost la prima vedere.

De exemplu, rezultatele erorii de la Testul de compatibilitate cu dispozitivele mobile pot sugera că aveți unele probleme de randare. Dar, în același timp, este posibil ca serverul să fi experimentat o defecțiune temporară și să nu fi răspuns eficient cu alte resurse, cum ar fi fișierele CSS. Drept urmare, influențează modul în care este afișat site-ul web, dar poate fi o situație o singură dată.

Depanarea randării (dinamice) va necesita întotdeauna cunoștințe tehnice generale SEO și o analiză amănunțită.

De ce randarea dinamică nu este o soluție pe termen lung?

Redarea dinamică utilizează cantități semnificative de resurse server

Redarea dinamică poate încetini semnificativ serverul. Un număr mare de solicitări de pre-radare pot face ca redarea să eșueze, așa că, în consecință, Googlebot va:

• Primiți o pagină goală ‒ Googlebot vede doar HTML inițial, dar deoarece nu există nicio referință JavaScript în cod, restul unui site web este invizibil pentru acesta. Site-ul web nu poate fi indexat deoarece Googlebot nu vede conținutul.
• Primiți o versiune redată la nivelul clientului a unui site web ‒ Google se poate ocupa din punct de vedere tehnic de JavaScript în multe cazuri, dar scopul realizării redării dinamice a fost să îi ofere conținut static. În unele cazuri, costul descărcării conținutului JavaScript și al actualizării versiunii inițiale HTML a unui site web cu acesta poate fi prea mare pentru Googlebot.

Prin urmare, înainte de a vă decide asupra randării dinamice, este esențial să luați o decizie deliberată dacă site-ul dvs. are nevoie de aceasta.

Implementarea și întreținerea randării dinamice pot utiliza o cantitate semnificativă de resurse server. Și dacă observați că Googlebot este capabil să indexeze paginile dvs. în mod corespunzător, atunci dacă nu faceți modificări critice, de înaltă frecvență site-ului dvs., poate că nu trebuie să implementați ceva special. […]

sursa: John Muller

Redarea dinamică creează două structuri separate de site în loc de una

Folosind randarea dinamică, mențineți două versiuni ale site-ului dvs. web. Înseamnă că trebuie să verificați separat dacă site-ul dvs. este bine optimizat pentru utilizatori și pentru roboți.

Un site web redat dinamic necesită echipe excelente de SEO și dezvoltare. Și chiar dacă aveți astfel de echipe la dispoziție ca proprietar de site, gândiți-vă cât de bine și-ar putea petrece timpul când nu se concentrează pe verificarea randării dinamice.

Redarea dinamică înrăutățește experiența utilizatorului

Redarea dinamică implică că utilizatorii dvs. primesc o versiune randată pe partea clientului, iar acest lucru poate afecta slab performanța paginii pentru utilizatori, deoarece necesită ca browserele lor să gestioneze procesul de randare de partea lor. Și asta poate fi o adevărată luptă, în special pentru utilizatorii cu telefoane mai vechi, care vor avea dificultăți în procesarea unor cantități mari de JavaScript. Deși redarea pe partea clientului nu este deloc rea, vă recomandăm să mergeți pe ruta pe partea serverului ori de câte ori este posibil.

Redarea dinamică adaugă un strat suplimentar de complexitate atunci când optimizați un site web

Cu randarea dinamică, este mai dificil să reperezi și să recunoști problemele generate de aceasta.

Din cauza problemelor de pe server sau a componentelor lipsă, redarea dinamică eșuează adesea. Drept urmare, Googlebot primește o pagină goală. Din păcate, nu aveți nicio idee despre asta atunci când vă uitați la site ca utilizator (cu JavaScript complet), nu ca un bot. Pentru a remedia problema, comutați agentul utilizator la Googlebot în browser .

Diagnosticarea unor astfel de probleme și descoperirea agentului utilizator care generează o anumită problemă necesită o expertiză SEO semnificativă. Și trebuie să știți că niciun răspuns la problemele dvs. de randare nu se poate reflecta asupra indexării site-ului dvs. web.

Care sunt alternativele mai bune la randarea dinamică?

Când sunt bine implementate, toate soluțiile menționate mai jos pot fi la fel de benefice pentru site-ul dvs. din perspectiva SEO.

Cu toate acestea, efectul implementării se bazează în principal pe tehnologia pe care o utilizați și pe echipa dumneavoastră de dezvoltare. În ceea ce privește resursele de dezvoltare, costul de implementare al fiecărei soluții poate diferi, dar trebuie evaluat individual în funcție de situație.

Redare pe partea serverului

Este una dintre cele mai populare soluții pe care le puteți utiliza în locul redării dinamice.

Din perspectiva SEO, cel mai semnificativ avantaj al utilizării redării pe server se bazează pe menținerea unei singure versiuni a site-ului dvs. Spre deosebire de redarea dinamică, nu trebuie să verificați dacă versiunile pentru utilizatori și Googlebot sunt identice – toți agenții utilizatori primesc același conținut.

Mai mult decât atât, spre deosebire de randarea dinamică, redarea pe server nu îi face pe utilizatori să proceseze fișiere JavaScript din partea lor pentru a genera elemente cheie ale paginii. Face o pagină să se încarce mai rapid; unele valori de performanță web vă afectează clasamentul și experiența utilizatorului.

Dar atenție: cu randarea pe partea de server, utilizatorii pot experimenta valorile Time to First Byte ceva mai proaste dacă serverul trebuie să genereze HTML static ad-hoc sau serverul care memorează în cache răspunsurile nu este suficient de eficient.

Și doar pentru a clarifica: chiar dacă redarea pe server este implementată corect, SEO-ul trebuie să verifice toate elementele site-ului. Dar, per total, este mai ușor de întreținut cu o singură versiune a unui site web.

Redare statică

Redarea statică (cunoscută și sub denumirea de generare statică) se bazează pe furnizarea roboților și utilizatorilor a versiunii HTML statice generată în momentul construirii . Înseamnă că codul site-ului dvs. este gata pentru a fi procesat de către crawler-uri și utilizatorii care așteaptă să fie descărcat pe server.

În mod similar cu redarea pe partea serverului, trebuie să verificați o singură versiune a site-ului dvs. web pentru toți agenții utilizatori în timp ce utilizați această soluție.

De asemenea, spre deosebire de redarea dinamică, redarea statică îmbunătățește performanța paginii , deoarece servește mai rapid versiunea preredată a site-ului dvs. - fișierele statice pot fi stocate în cache pe dispozitivele utilizatorilor și utilizate din nou.

Rehidratare

Rehidratarea oferă, de asemenea, o singură versiune a unui site web pentru roboți și utilizatori, precum cele două soluții anterioare. Cu toate acestea, funcționează în două etape.

În prima etapă, crawlerele și utilizatorii primesc o pagină redată pe partea de server care conține elemente critice. De exemplu, în cazul unui site de comerț electronic, acestea pot fi numele produsului, descrierea sau evaluările produsului. În a doua etapă, JavaScript descarcă toate resursele necritice care sunt esențiale din punct de vedere SEO, dar utilizatorii le pot primi cu întârziere. Acestea sunt, de exemplu, widget-uri de chat sau secțiuni de comentarii.

Când auditați un site web folosind rehidratare, trebuie să verificați dacă toate elementele adăugate de JavaScript sunt cele necritice.

Redarea dinamică poate funcționa vreodată pe termen lung?

Se poate, dar rareori. Mai ales dacă aveți un site web mare și nu sunteți cunoscător în domeniul SEO, nu utilizați singur această abordare.

Și amintiți-vă că , chiar dacă nu sunteți îngrijorat de SEO tehnic, randarea dinamică va fi totuși costisitoare de întreținut.

Iată două exemple de când clienții noștri au folosit randarea dinamică pentru:

Servirea de link-uri randate pe partea clientului pentru utilizatori în subsol

În acest caz, datorită redării dinamice, Googlebot a putut găsi linkurile în codul sursă, dar, în același timp, linkurile de subsol au fost generate pentru utilizatori și adăugate la DOM (care reprezintă starea paginii dvs. după randare) odată ce acestea a început să deruleze pagina. Clientul a decis să implementeze randarea dinamică pentru a-și optimiza performanța – nu toate elementele trebuie să fie stocate imediat în DOM dacă utilizatorii nu derulează până la sfârșitul paginii.

Difuzarea listei randate la nivelul clientului a rezultatelor căutării interne pentru utilizatori

Clientul a decis să ofere versiunea randată pe partea de server către roboți (o versiune mai ușoară a listelor) și versiuni randate pe partea client utilizatorilor (când lista de produse este generată ad-hoc și poate fi personalizată).

Încheierea

În timp ce randarea dinamică ar trebui considerată doar ca o soluție temporară, în unele cazuri, o veți considera o centură de salvare pentru site-ul dvs.

Dacă trebuie să implementați randarea dinamică, nu uitați să urmați acești patru pași:

1. Planifică-ți actualizările și implementările. Asigurați-vă că echipele dvs. de dezvoltare și SEO au suficiente resurse pentru a se ocupa de implementarea și întreținerea unui site web prestat în prealabil.
2. Asigurați-vă că configurarea este eficientă și fără erori. Dezvoltați o modalitate de a verifica dacă configurarea funcționează corect și că nu lipsesc elemente cheie ale paginii din versiunea oferită roboților.
3. Rețineți că trebuie să puteți compara versiunile HTML și JavaScript ale site-ului dvs. web și să detectați discrepanțe.
4. Rețineți că, în majoritatea cazurilor, randarea dinamică ar trebui să fie doar o soluție. Căutați oportunități de a trece la alte soluții recomandate, ținând cont de resursele dvs. de dezvoltare și de capabilitățile tehnologice.