Cele mai bune practici SEO pentru site-urile web de comerț electronic React

React a apărut ca unul dintre principalele cadre JavaScript utilizate pe o varietate de site-uri web diferite, în special pe site-urile de comerț electronic.

Datorită modului în care sunt construite, site-urile web React au câteva considerații specifice atunci când vine vorba de optimizarea pentru motoarele de căutare (SEO), cu un set distinct de bune practici SEO pentru aplicațiile React Single Page (SPA).

În acest ghid, vom analiza cum să ne asigurăm că un site de comerț electronic React este configurat corect pentru SEO și câteva dintre avantajele și dezavantajele utilizării React pe un site de comerț electronic optimizat pentru căutare.

Ce este React?

React este o bibliotecă JavaScript care poate fi folosită pentru a construi interfețe cu utilizatorul bazate pe componente comune ale UI. Este întreținut de compania-mamă a Facebook, Meta, împreună cu o comunitate open-source de dezvoltatori, inclusiv companii și persoane fizice.

Deoarece este open-source, React este, de asemenea, gratuit. Poate forma cadrul de bază al unei aplicații cu o singură pagină (SPA-uri menționate mai sus) sau al unei aplicații mobile.

De ce este React bun pentru comerțul electronic?

Concentrarea lui React pe UI înseamnă că este un instrument util pentru a crea site-uri web de comerț electronic fluide, fără întreruperi, care pun experiența utilizatorului (UX) în centrul designului.

Conținutul este difuzat pe partea clientului, iar paginile nu trebuie să se reîmprospăteze, ceea ce face ca clienții să navigheze mai rapid și mai ușor pe un site web, cu mai puține întârzieri ale serverului pentru a afecta viteza de încărcare a paginii.

Versatilitatea lui React înseamnă că poate fi utilizat atât pe site-urile de comerț electronic desktop, cât și pe aplicațiile mobile, ceea ce o face una dintre cele mai simple opțiuni pentru dezvoltatorii care doresc să creeze aplicații web progresive.

Pot motoarele de căutare să acceseze cu crawlere site-urile web React?

Ca și în cazul oricărui site optimizat pentru căutare, este important să înțelegeți cum văd roboții (și în special Googlebot) conținutul de pe un site React.

În general, Google accesează cu crawlere site-ul web în două etape, identificând conținutul pe măsură ce merge.

Accesați cu crawlere codul sursă

În primul rând, Googlebot va accesa cu crawlere site-ul web și va prelua codul sursă, inclusiv HTML, antetele paginii și așa mai departe.

Redați DOM-ul

În al doilea rând, Googlebot redă Modelul obiect al domeniului (DOM), inclusiv orice JavaScript utilizat pe pagină – îl puteți identifica folosind Instrumentele pentru dezvoltatori încorporate în Chrome și funcțiile echivalente din alte browsere.

React este un cadru JavaScript la nivelul clientului, ceea ce înseamnă că Googlebot poate avea dificultăți în identificarea paginilor. Acest lucru se datorează faptului că, spre deosebire de un site web tradițional, React nu trimite solicitări către server atunci când navighează de la o pagină la alta, ceea ce face dificil pentru Google să vadă diferitele pagini.

Puteți configura React să utilizeze redarea pe server, dar Googlebot tot nu va reda fișierele JavaScript și alte resurse bazate pe server atunci când navigați pe site-ul dvs. Din acest motiv, este important să configurați site-ul dvs. de comerț electronic React pentru SEO în conformitate cu cele mai bune practici.

Probleme obișnuite de SEO cu React

Există mai multe probleme comune de SEO cu site-urile web de comerț electronic React:

Conținut nedescoperit / indexat lent

Googlebot alocă un „buget de randare” fiecărui site web pe care îl accesează cu crawlere și, de obicei, va părăsi odată ce bugetul respectiv a fost cheltuit. Acest lucru asigură că site-urile web mai mici primesc partea lor din atenția crawlerului și previne bucle de accesare cu crawlere infinite, de exemplu pe site-urile web care generează adrese URL dinamice în timpul navigării.

Deoarece site-urile web React funcționează ca SPA-uri, întregul site trebuie să fie redat înainte ca întregul său conținut să poată fi accesat cu crawlere. Acest lucru poate întârzia descoperirea conținutului și consumă resurse suplimentare din partea crawlerului, ceea ce poate duce la mai puține pagini accesate cu crawlere și indexate.

Randarea pe partea de server și pre-randarea pot elimina o parte din sarcina de resurse de pe roboți, ajutând la îmbunătățirea vitezei cu care apar pagini noi în index.

Roboții de căutare încetinesc să observe conținut actualizat

Aceasta este o consecință a problemei de mai sus - atunci când schimbați o pagină, poate dura ceva timp până când aceste modificări se filtrează în rezultatele căutării.

Din nou, acest lucru se datorează modului în care sunt redate paginile atunci când utilizați React, ceea ce poate duce la ca paginile actualizate să rămână neobservate mai mult timp de resursele limitate de crawler ale Google.

Paginile „profunde” au acces cu crawlere rar (sau niciodată)

Paginile îngropate adânc în ierarhia site-ului dvs. sunt mai puțin probabil să fie accesate de Googlebot, mai ales dacă acesta a cheltuit deja un buget de randare semnificativ mai sus în ierarhia dvs.

Încă o dată, pre-rendarea poate fi un instrument valoros pentru a ajuta crawlerele de căutare să pătrundă mai adânc în structura de foldere a site-ului dvs., înainte de a epuiza bugetul de crawlere atribuibil.

[Ebook] Crawlability

Asigurați-vă că site-urile dvs. îndeplinesc cerințele motoarelor de căutare pentru accesarea cu crawlere pentru a crește performanța SEO.

Citiți cartea electronică

Cum să optimizați site-urile de comerț electronic React

Cu unele bune practici pentru SEO e-commerce React, puteți oferi site-ului dvs. și paginilor dvs. individuale o perspectivă mai bună de a-l plasa în indexul de căutare.

Adrese URL unice ale paginilor

Cea mai bună practică pentru problema adreselor URL dinamice menționată mai sus este de a oferi fiecărei pagini propria URL unică și statică pe site-ul dvs. Conținutul este apoi asociat cu o singură locație permanentă – o adresă URL canonică pentru pagină – pe care motoarele de căutare o pot accesa cu crawlere, indexa și clasa cu încredere în paginile lor de rezultate.

React Router este modalitatea de a realiza acest lucru pe site-urile web React. React Router poate oferi fiecărei pagini de pe site propriul URL permanent, precum și alinierea interfeței de utilizare cu o anumită adresă URL.

Reacția izomorfă

Isomorphic React este o modalitate de a activa randarea pe server, pentru a reduce presiunea asupra bugetelor de randare ale crawlerelor. Funcționează prin detectarea când JavaScript este dezactivat pe partea clientului și prin crearea unei forme randate pe partea serverului a HTML-ului site-ului web. Dacă este disponibilă redarea pe partea clientului, site-ul web se va încărca ca React SPA în mod obișnuit.

Făcând acest lucru, Isomorphic React depășește problemele de vizibilitate pentru crawlerele de căutare, îmbunătățind posibilitatea de descoperire a paginilor, fără a prejudicia experiența React fluidă și perfectă pentru vizitatorii umani cu JavaScript la nivelul clientului activat.

Pre-Randare

Pre-rendarea este o altă modalitate de a obține un rezultat similar cu Isomorphic React. Funcționează prin generarea unei versiuni în cache a codului HTML redat, pe care crawlerele o pot accesa apoi în loc de codul sursă neredat.

Vizitatorii umani primesc site-ul web React la nivelul clientului, oferindu-le din nou toate beneficiile unui SPA fluid, fulgerător. Există multe servicii de pre-rendare din care să alegeți, inclusiv Google Puppeteer, Prerender.io și SEO4Ajax.

Optimizarea metadatelor

În cele din urmă, asigură-te că conținutul tău are metadate optimizate - încă un element important în SEO pe pagină, chiar și după toți acești ani.

Pe lângă o adresă URL unică, optimizată, fiecare pagină ar trebui să aibă o etichetă de titlu unică și orice alte metaetichete relevante, ajutând paginile să iasă în evidență și semnalând roboții de căutare pentru a asocia pagina cu un anumit subiect sau cuvânt cheie principal.

React Helmet este o modalitate bună de a realiza acest lucru, oferind acces direct la editarea metadatelor SEO pe site-urile web de comerț electronic React. În acest fel, puteți combina cele mai bune practici SEO vechi și cuvintele cheie clasice pentru metadate, cu toate beneficiile unui site web de comerț electronic React modern, prietenos cu dispozitivele mobile.