Aproape toate site-urile web moderne sunt dezvoltate având în vedere utilizatorii și capacitățile de randare ale browserului. Browserele, în general, gestionează chiar și sarcini complexe fără probleme.
Însă, când vine vorba de căutarea organică, toate motoarele de căutare clasifică paginile web ca documente HTML. Iar roboții de căutare, spre deosebire de browserele moderne, au capacități limitate. Dacă nu acordați atenție modului în care roboții de căutare vă vizualizează paginile, ați putea pierde cursa pentru clasamentele de top în căutările organice.
Vom explica mai detaliat cum să verificați randarea site-ului dvs. web și să remediați orice erori care împiedică clasarea.
Ce este randarea paginilor în SEO?
Randarea este un termen folosit în dezvoltarea web . Se referă la procesul de conversie a codului unui document web în pagina web interactivă pe care o vedeți în cele din urmă în browser. Randarea este, în esență, procesul de executare a tuturor regulilor definite în codul HTML, JavaScript și stilurile CSS.
Ce se întâmplă în browser când se afișează un document:
- Browserul primește resurse de la server (cod HTML, CSS, JS, imagini).
Pe baza codului HTML primit, a aplicării regulilor CSS și a execuției JS, se formează DOM-ul (Document Object Model). - Stilurile sunt încărcate și recunoscute, iar CSSOM (CSS Object Model) este format.
- Un arbore de randare — un set de obiecte de randare — este format pe baza DOM și CSSOM. Arborele de randare reproduce structura DOM, dar exclude elementele invizibile (de exemplu, elementele cu stilul display:none;). Fiecare linie de text este reprezentată în arborele de randare ca un renderer separat. Fiecare obiect de randare conține un obiect DOM corespunzător (sau un bloc de text) și stilul calculat pentru obiectul respectiv. Simplu spus, arborele de randare descrie reprezentarea vizuală a DOM.
- Pentru fiecare element al arborelui de randare, se calculează poziția sa pe pagină – are loc aspectul. Browserele utilizează metoda fluxului, care în majoritatea cazurilor necesită o singură trecere pentru a poziționa toate elementele (pentru tabele, sunt necesare mai multe treceri).
- În cele din urmă, toate cele de mai sus sunt desenate în browser – pictură.
Mecanică
Redarea, sau procesul de afișare a unei pagini în Google, începe după crawling, dar înainte de indexare. Mecanica este destul de simplă: crawlerul solicită pagina și toate resursele necesare pentru a o reda.
Datele sunt apoi transmise către Rendertron, o soluție de randare a paginilor Chrome fără ecran, construită cu Puppeteer. Acolo, toate datele sunt procesate.
Există doi factori importanți care afectează randarea:
1. Google încearcă să stocheze în cache toate resursele și ignoră regulile de cache HTTP. Acest lucru se datorează faptului că majoritatea webmasterilor le creează fără să se gândească, forțând utilizatorii să descarce în mod repetat același fișier, chiar dacă acesta nu s-a modificat.
2. Este posibil ca Google să nu primească toate resursele suplimentare, așa că merită să reduceți numărul de solicitări necesare pentru a reda pagina corect.
Când vine vorba de procesarea JavaScript, Google afirmă clar că performanța este importantă pentru ei, așadar:
- limitarea consumului de resurse ale procesorului;
- poate întrerupe execuția scriptului;
- și spun că un consum excesiv de CPU are un impact negativ asupra indexării.
Cum să verifici cum afișează roboții motoarelor de căutare paginile tale
Prima metodă este Google Search Console
Acest instrument îi ajută pe webmasteri să obțină mai mult trafic organic și oferă informații despre modul în care motoarele de căutare percep conținutul paginii.
Puteți vizualiza pagina accesată cu crawlere pentru orice adresă de site web care se află în indexul Google:
După ce se dă clic, se deschide o fereastră în partea dreaptă a ecranului care afișează codul HTML randat de bot pentru pagină. Acesta este modul în care robotul de căutare a procesat documentul.
Aici puteți copia codul HTML al paginii randate și îl puteți lipi în orice editor de cod. Apoi puteți revizui codul pentru corectitudine, verificând prezența tuturor elementelor semantice importante, poziția sa în arborele DOM, microdatele, linkurile interne și multe altele.
Puteți salva documentul ca HTML și îl puteți vizualiza în orice browser. Dar este mai sigur să citiți și să verificați codul, deoarece browserele moderne sunt foarte inteligente și pot adesea corecta automat erorile grave de aspect și pot închide etichetele.
A doua metodă este dacă site-ul nu este al dumneavoastră și nu există acces la GSC.
Această metodă este necesară dacă vrem să comparăm randarea paginilor noastre cu cele ale concurenților noștri, pentru a verifica dacă aceștia returnează pagini îmbunătățite cu conținut text botului și versiuni mai funcționale utilizatorului.
Instrument de testare a fragmentelor îmbogățite
Instrumentul trimite solicitări către server la fel ca Googlebots nativi. Răspunsul pe care îl primiți va fi același cu răspunsul pe care îl primește crawlerul de căutare.
Un avantaj major al acestui instrument este capacitatea de a selecta tipul de bot de căutare între desktop și mobil. Acest lucru este util atunci când site-urile web utilizează metoda de optimizare mobilă Dynamic Serving. Aceasta înseamnă că serverul returnează cod HTML diferit în funcție de dispozitivul care face solicitarea. Compararea codului unei singure pagini pe diferiți agenți poate dezvălui, de exemplu, că un server desktop primește pagini cu text, în timp ce un server mobil primește pagini fără. De asemenea, am întâlnit cazuri în care microdatele returnate de boți au fost diferite.
După finalizarea testului, faceți clic pe Vizualizare pagină testată. Aceasta va afișa o fereastră cu codul HTML randat al paginii, familiar din interfața Google Search Console.
Test de optimizare pentru dispozitive mobile
Acesta este numele unui instrument pentru testarea responsivității paginilor. Spre deosebire de instrumentul anterior, acesta nu vă permite să selectați botul care va face cererile la server.
Faceți clic din nou pe Vizualizare pagină testată și veți fi direcționat către aceeași fereastră ca în instrumentul anterior.
La ce ar trebui să fii atent când verifici codul?
Zone importante din punct de vedere semantic în conținut:
- titlul paginii în eticheta titlului;
- descrieri ale paginilor în metaetichete;
- corectitudinea linkurilor din etichetele de link;
- elemente de micro-marcare schema.org.
Elemente de aspect invizibile vizual, dar importante:
- titlurile documentelor în etichetele h;
- descrieri textuale;
- numărul de elemente prezentate pe pagină (de exemplu, fișe de produs în listări);
- adresele de imagine în atributele src ale etichetei img;
- Corectitudinea ancorelor și adreselor din linkuri.
Elemente semantice ale layout-ului:
- etichetele articolului, secțiunii, navigării, tabelului și conținutul acestora sunt prezente;
- Aceste etichete sunt plasate corect în versiunea HTML a documentului indexat de bot.
Compararea codului randat din diferite instrumente
Putem fi siguri că pagina este redată de botul de căutare exact așa cum apare în instrumente? Dacă vorbim despre Google Search Console, este mai probabil să fie așa. Cu toate acestea, dacă vorbim despre alte instrumente, inclusiv Rich Snippets Testing Tools și Mobile-Friendly Test, este posibil ca acestea să nu ofere întotdeauna informații corecte.
Ideea este că randarea este un proces dinamic. Rezultatul pe care îl obținem este rezultatul unui răspuns specific la o solicitare specifică la un moment dat. Se va potrivi cu ceea ce ar obține un robot de căutare atunci când ar solicita aceeași resursă la un moment diferit? Posibil, dar nu garantat.
De exemplu, am comparat codul stocat în Google Search Console cu codul randat al aceleiași pagini de pe:
- Test live GSC;
- Instrument de testare a fragmentelor îmbogățite;
- Test de compatibilitate cu dispozitivele mobile;
- Pagină randată cu broască țipătoare.
Test live GSC vs. GSC
Codul recuperat din GSC Live Test are o diferență, cum ar fi adăugarea unei bare oblice la sfârșitul etichetelor de închidere. Cu toate acestea, codul HTML stocat în consolă nu conține astfel de bare oblice. Livetest nu a detectat nici scriptul GoogleAds, care este prezent în versiunea GSC a paginii indexate. Ghilimelele sunt, de asemenea, diferite. În versiunea indexată, acestea arată astfel: ‘, în timp ce în versiunea LiveTest, acestea arată astfel: \”.
Instrument de testare GSC vs. Rich Snippets
Există câteva diferențe minore în codul GSC. De exemplu, prezența scriptului googleads, care lipsește atât din codul Rich Snippets, cât și din codul Livetest. Cu toate acestea, nu au fost găsite diferențe mai semnificative.
Testul GSC vs. optimizare pentru dispozitive mobile
Testul de compatibilitate cu dispozitivele mobile rezumă toate diferențele dintre cele două teste anterioare. Nu include un script, iar barele oblice sunt adăugate înainte de etichetele de închidere, iar ghilimelele sunt înlocuite.
Pagină randată GSC vs Screaming Frog
Capacitățile de randare a paginilor ale Screaming Frog sunt superioare celor ale Google – diferențele sunt vizibile în blocuri întregi. De exemplu, pentru Googlebot, acest bloc era display:none și gol, în timp ce în versiunea randată a Screaming Frog, era display:block cu blocuri interne care conțineau conținut.
Ce e de făcut dacă nu toate instrumentele funcționează?
În realitate, acest lucru este puțin probabil. Dar dacă apare o astfel de urgență, avem întotdeauna la dispoziție principalul nostru instrument de lucru: browserul web. Pentru a verifica ce document HTML a primit browserul, selectați fișierul de pagină din fila rețea a panoului de dezvoltare. Apoi, în fila Previzualizare, veți vedea diferențe vizuale între pagina primită și pagina după ce toate scripturile suplimentare au fost executate.
Însă fila Răspuns este mai interesantă și de o importanță primordială pentru noi. Aici puteți vedea și analiza documentul HTML primit de browser.
Săgeata din captura de ecran indică butonul Beautifier, care va face codul mai ușor de citit. Dacă site-ul nu are un motor separat de randare pe server pentru bot, este important să vă asigurați că toate blocurile de conținut și elementele semantice sunt vizibile în acest document. Apoi, indiferent de resursele de randare ale roboților motorului de căutare, putem fi siguri că botul a primit tot ce ne trebuia.
Ca urmare
În practică, întâlnim adesea situații în care specialiștii interni nu pot înțelege de ce un site web nu crește. Problema este că motoarele de căutare pur și simplu nu văd majoritatea conținutului de pe aceste resurse, ceea ce duce la pierderi semnificative în cursa pentru primele rezultate ale căutării. Din acest motiv, vă recomandăm să utilizați GSC pentru a verifica randarea paginilor site-ului dvs. web și Rich Snippets Testing Tools pentru a verifica paginile concurenților dvs.
Pentru clienții noștri, pur și simplu nu tolerăm redarea necorespunzătoare pe site-ul lor web. De exemplu, când am început să lucrăm cu FlyArystan, site-ul lor web conținea toate versiunile lingvistice pe o singură adresă URL și nu le redau separat. Am remediat această problemă înainte de lansarea site-ului web. De asemenea, recomandăm tuturor să verifice acest lucru la începutul procesului de lansare.
Sursă: Promodo.ua
