SEO React: randare, metadate și linkuri pentru o aplicație React care se clasează

Test rapid

Ți se potrivește SEO și cum ar trebui să începi?

Întrebarea 1 din 425%

Oamenii caută pe Google ce vinzi?

Da, cred că daNu, este nou sau foarte de nișăNu știu

SEO React înseamnă munca de a face o aplicație React parcurgibilă, indexabilă și înțeleasă de motoarele de căutare și de asistenții AI. React în sine este neutru: problemele vin din faptul că totul se randează în browser. Google confirmă în elementele de bază ale SEO pentru JavaScript că procesează aplicațiile JavaScript în trei faze (parcurgere, randare, indexare) și că „randarea pe server sau pre-randarea rămâne o idee foarte bună, pentru că face site-ul mai rapid pentru utilizatori și crawlere, iar nu toți boții pot rula JavaScript.”

De ce este React dificil pentru SEO?

O aplicație React creată ca aplicație cu o singură pagină livrează un fișier HTML care conține puțin mai mult decât un div rădăcină gol și o etichetă script. Browserul descarcă JavaScript-ul, îl rulează și construiește pagina. Un crawler care citește doar HTML-ul nu vede nimic de indexat: niciun titlu, niciun text, niciun link.

Googlebot rulează JavaScript, dar într-un pas separat: pagina este parcursă, pusă la coadă pentru randare, randată într-un Chromium fără interfață și abia apoi sunt folosite linkurile și conținutul randat. Fiecare pas în plus este o șansă de eșec (o eroare de script, un API blocat, un timeout) și adaugă întârziere până când paginile noi apar în căutare. Ghidul nostru despre SEO pentru JavaScript detaliază acest proces, iar articolul nostru despre indexarea în Google arată cum obții indexarea mai repede.

Alți boți sunt mai puțin răbdători. Analiza Vercel din decembrie 2024, Ascensiunea crawlerului AI, a constatat că „niciunul dintre principalii crawleri AI nu randează în prezent JavaScript”, numind GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot și PerplexityBot. O pagină React randată pe client este invizibilă pentru ChatGPT, Claude și Perplexity, chiar dacă Google o indexează.

Ce abordare de randare ar trebui să folosească un site React?

Echipa React recomandă acum să începi aplicațiile noi cu un framework. Când a scos din uz Create React App pe 14 februarie 2025, a scris în anunțul său că „randarea pe server poate îmbunătăți SEO-ul” și că aceasta îmbunătățește și performanța, reducând JavaScript-ul pe care utilizatorii trebuie să îl descarce înainte să vadă conținutul. Opțiunile, de la cea mai slabă la cea mai bună pentru căutare:

La randarea dinamică, documentația Google este explicită: a fost „o soluție provizorie și nu o soluție pe termen lung”, iar Google recomandă în schimb randarea pe server, randarea statică sau hidratarea. Dacă alegi un framework, ghidul nostru SEO pentru Next.js acoperă în detaliu modurile de randare, Metadata API și sitemap-urile.

Dacă migrarea nu este posibilă, o aplicație cu o singură pagină poate fi indexată de Google și cu grijă. Ghidul nostru despre SEO pentru aplicațiile cu o singură pagină enumeră condițiile; restul articolului se aplică în ambele cazuri.

Cum setezi titlurile și meta tag-urile în React?

Din React 19 (stabil din 5 decembrie 2024), componentele pot randa direct etichete title, meta și link, iar React le mută în head-ul documentului. Notele de lansare React 19 precizează că acest suport nativ funcționează „cu aplicații doar pe client, cu SSR în streaming și cu Server Components”. Înainte de React 19, biblioteci precum react-helmet sau react-helmet-async făceau aceeași treabă, iar ele rămân utile pentru a înlocui valorile implicite pe fiecare rută.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

Trei reguli se aplică indiferent de metodă:

• Un singur titlu pe pagină, unic și descriptiv. Documentația React avertizează că, dacă mai multe componente randează un titlu în același timp, „comportamentul browserelor și al motoarelor de căutare este nedefinit”. Dă-i un singur șir (un template literal), nu text amestecat cu variabile.
• O descriere și o etichetă canonical pentru fiecare adresă, generate din datele paginii. Un generator de meta tag-uri ajută la redactarea lor, iar un verificator de canonical confirmă ce este live.
• Etichete Open Graph în HTML-ul inițial pentru paginile pe care oamenii le distribuie, pentru că boții de previzualizare a linkurilor citesc, în general, HTML-ul brut.

Ce greșeli de rutare și de linkuri blochează indexarea?

Google spune că poate descoperi linkurile tale „doar dacă sunt elemente HTML a cu atributul href” și recomandă să nu folosești fragmente de URL pentru a încărca un conținut diferit. Majoritatea eșecurilor SEO React vin din detalii de rutare:

Ca să vezi ce randează Google, folosește instrumentul Inspecția URL din Search Console și uită-te la HTML-ul paginii testate, sau rulează un verificator de indexabilitate pe șabloanele-cheie.

Cum gestionezi sitemap-urile și datele structurate în React?

React nu are o hartă a site-ului integrată. Generează sitemap.xml la build din rutele și datele tale (sau din funcția de sitemap a framework-ului), listează doar adresele canonical care returnează 200 și menționează-l în robots.txt. Un generator de hartă XML a site-ului funcționează pentru site-urile statice mici.

Datele structurate urmează aceeași regulă ca metadatele: randează scriptul JSON-LD împreună cu pagina, din aceleași date, de preferință pe server. Google poate citi JSON-LD injectat de JavaScript după randare, dar un marcaj care lipsește din HTML-ul inițial lipsește pentru crawlerele care nu randează. Folosește Article pentru articole, Product pentru comerț electronic, Organization pe tot site-ul și BreadcrumbList pentru paginile adânci.

Cum influențează performanța SEO-ul React?

Pachetele mari de JavaScript afectează Core Web Vitals: browserul trebuie să descarce, să analizeze și să hidrateze codul înainte ca pagina să devină receptivă, ceea ce apasă pe Largest Contentful Paint și pe Interaction to Next Paint, mai ales pe mobil. Anunțul echipei React despre Create React App notează că randarea pe server trimite mai puțin JavaScript și un document HTML complet, ceea ce produce un First Contentful Paint mai rapid și poate scădea INP. Pârghii practice: împarte codul pe rute cu React.lazy, livrează imagini cu dimensiuni explicite, încarcă leneș componentele de sub zona vizibilă și auditează scripturile terțe.

Ce ar trebui să includă o listă de verificare SEO React?

1. Fiecare adresă indexabilă returnează HTML complet (randare pe server sau pre-randare), verificat cu curl.
2. Un titlu, o descriere și o etichetă canonical unice, care indică spre ea însăși, pentru fiecare adresă.
3. Rute bazate pe history, fără adrese cu fragment, iar fiecare link intern randat ca un a cu href.
4. Coduri de stare reale: 404 pentru paginile inexistente, 301 sau 308 pentru paginile mutate.
5. Un sitemap.xml generat din aceleași date ca rutele, listat în robots.txt.
6. JSON-LD randat împreună cu pagina, validat cu Rich Results Test.
7. Scripturile, stilurile și API-urile necesare randării permise în robots.txt.
8. Cod împărțit pe rute și Core Web Vitals monitorizate pe utilizatori reali.

Cum faci un site React vizibil în răspunsurile AI?

GEO (optimizarea pentru motoarele generative) începe cu accesul. Pentru că crawlerele AI preiau HTML-ul brut, o pagină React trebuie să livreze textul, titlurile și JSON-LD fără JavaScript, ca să fie citită, rezumată și citată. Un audit AI de parcurgibilitate a site-ului arată ce primesc acești boți de pe paginile tale. A doua condiție este conținutul care merită citat: pagini care răspund la o întrebare pe secțiune, cu surse, cifre și definiții clare.

Latura de conținut este cea pe care o automatizează Sorank, produsul nostru. Sorank este un software SEO și GEO în regim autopilot: generatorul de articole pentru blog scrie și publică 20, 60 sau 120 de articole pe lună, cu surse, linkuri interne și imagini, și se conectează la stack-uri personalizate, cum ar fi un site React sau Next.js, prin webhook. Chatul SEO răspunde, într-o conversație, la întrebări despre performanța site-ului tău în căutare.

Pe scurt: livrează HTML de pe server, dă fiecărei adrese propriul titlu, propria descriere și propria etichetă canonical și folosește linkuri reale. Atunci React se clasează ca orice alt site, iar asistenții AI îl pot citi. Ca să alimentezi cu articole, scrise pentru Google și pentru AI, un site ca acesta, vezi planurile Sorank, de la 49 de dolari pe lună, cu o perioadă de probă gratuită de 3 zile.