JavaScript SEO: kako Google vidi React i SPA sajtove
Sajtovi napravljeni u React-u i sličnim radnim okvirima mogu biti odlični za korisnike, ali ako se sadržaj pojavljuje tek posle izvršavanja JavaScript-a, pretraživač ga može videti kasnije ili nepotpuno. Objašnjavamo načine renderovanja, šta Google vidi i kako da izbegnete najčešće probleme.
Sadržaj članka
Moderni sajtovi se sve češće prave u radnim okvirima kao što su React, Vue ili Angular. Oni omogućavaju brze prelaze između stranica i bogate interakcije, ali donose jedno važno pitanje: da li pretraživač vidi isti sadržaj kao posetilac? JavaScript SEO je deo tehničkog SEO-a koji se bavi upravo time, kako da sajt zasnovan na JavaScript-u bude ispravno pronađen, renderovan i indeksiran. U ovom tekstu objašnjavamo načine renderovanja, kako Google obrađuje takve stranice i koje greške viđamo najčešće.
Kako Google obrađuje JavaScript
Google stranice obrađuje u tri koraka: obilazak (crawling), renderovanje i indeksiranje. Prvo preuzme HTML koji server vrati. Ako stranica zavisi od JavaScript-a, ubacuje je u red za renderovanje, gde je otvara ažurna verzija Chromium-a, izvršava skripte i tek tada vidi konačan sadržaj i linkove.
Google danas uglavnom dobro renderuje JavaScript, pa stara tvrdnja da „Google ne vidi React“ nije tačna. Ipak, renderovanje zahteva dodatne resurse i može da uvede kašnjenje, a svaka greška u skripti ili blokiran resurs znači da sadržaj neće biti viđen. Drugi pretraživači, alati za pregled linkova na društvenim mrežama i mnogi alati koji prikupljaju sadržaj za AI odgovore JavaScript izvršavaju ograničeno ili nikako. Zato je najsigurnije da važan sadržaj postoji već u HTML-u koji server šalje.
SSR, SSG i CSR: tri načina renderovanja
Ključno pitanje je gde nastaje HTML sa sadržajem: na serveru ili u pregledaču posetioca.
| Način | Gde nastaje HTML | Prednosti | Mane | Za šta je dobar |
|---|---|---|---|---|
| CSR (client-side rendering) | U pregledaču, posle učitavanja JS-a | Jednostavan hosting, brzi prelazi unutar aplikacije | Prazan početni HTML, sporiji prvi prikaz, zavisnost od renderovanja | Aplikacije iza prijave, administracija |
| SSR (server-side rendering) | Na serveru, pri svakom zahtevu | Sadržaj odmah u HTML-u, uvek aktuelni podaci | Veće opterećenje servera, složenije podešavanje | Web shopovi, stranice sa čestim izmenama |
| SSG (static site generation) | Unapred, pri izgradnji sajta | Veoma brzo, jeftino i stabilno | Izmene zahtevaju ponovnu izgradnju | Prezentacije, blogovi, landing stranice |
Radni okviri kao što su Next.js za React ili Nuxt za Vue omogućavaju kombinovanje ovih pristupa: javne stranice se generišu statički ili na serveru, a interaktivni delovi rade u pregledaču. Postoje i hibridi poput inkrementalne regeneracije, gde se statičke stranice periodično osvežavaju. Takozvano dinamičko renderovanje, gde se pretraživačima servira posebna verzija, Google danas opisuje kao privremeno rešenje i ne preporučuje ga za nove projekte.
Šta Google vidi, a šta ne
Kod čistog CSR sajta, početni HTML često izgleda ovako:
<body>
<div id="root"></div>
<script src="/static/js/main.js"></script>
</body>Sav sadržaj, naslovi i linkovi pojavljuju se tek kada se main.js učita i izvrši. Google će pokušati da renderuje stranicu, ali postoje stvari koje neće uraditi:
- Neće kliknuti ni skrolovati. Sadržaj koji se učitava tek na klik na dugme „Prikaži još“ ili beskonačnim skrolovanjem može ostati neviđen.
- Neće pratiti lažne linkove. Navigacija preko elemenata bez href atributa ne služi za otkrivanje stranica.
- Neće čekati neograničeno. Spori API pozivi i skripte koje se dugo izvršavaju povećavaju rizik da deo sadržaja ne bude uhvaćen.
- Neće zadržati stanje. Svaka stranica se učitava kao nova sesija, bez kolačića i sačuvanih podataka iz prethodne posete.
<!-- Pretraživač ovo ne prati kao link -->
<span onclick="router.push('/usluge/')">Usluge</span>
<!-- Ispravno: pravi link koji JavaScript može da presretne -->
<a href="/usluge/">Usluge</a>Najčešći problemi kod React i SPA sajtova
- Isti naslov i meta opis na svim stranicama, jer se menjaju samo kroz JavaScript ili se uopšte ne menjaju. Svaka ruta treba da ima svoj title, opis i canonical, idealno već u HTML-u sa servera. Kako se pišu, objasnili smo u tekstu o meta naslovu i opisu.
- „Mekane“ greške 404. SPA za nepostojeću adresu prikaže poruku „stranica nije pronađena“, ali server vrati status 200. Google tada može indeksirati praznu stranicu. Rešenje je pravi status 404 sa servera ili noindex oznaka za takve rute.
- Adrese sa znakom #. Rute poput /#/usluge Google tretira kao istu stranicu. Koristite History API i čiste adrese.
- Blokirani resursi. Ako robots.txt zabranjuje fajlove sa JavaScript-om ili API adrese, Google ne može da renderuje sadržaj. Proverite podešavanja uz vodič za robots.txt i sitemap.xml.
- Canonical i noindex koji se menjaju skriptom. Ako početni HTML ima noindex, Google možda neće ni renderovati stranicu, pa ga kasnije uklanjanje kroz JavaScript neće spasiti.
- Veliki JavaScript paketi. Osim SEO-a, trpe i brzina i Core Web Vitals, posebno INP i LCP. Više o metrikama u tekstu o Core Web Vitals.
Kako proveriti svoj sajt
- Otvorite izvorni kod stranice (ne alat za pregled elemenata) i proverite da li se u njemu nalaze naslov, tekst i linkovi.
- U Search Console pokrenite proveru adrese i test aktivne adrese, pa pogledajte prikazani HTML i snimak ekrana.
- Pretražite Google operatorom site: zajedno sa rečenicom sa stranice i proverite da li je taj deo teksta indeksiran.
- Isključite JavaScript u pregledaču i pogledajte šta ostaje. To nije tačna slika onoga što vidi Google, ali brzo pokazuje zavisnost od skripti.
- Pratite izveštaj o indeksiranju. Ako se pojavljuje mnogo stranica sa statusom „otkrivena, trenutno nije indeksirana“, pročitajte tekst zašto stranice nisu indeksirane.
Zaključak
React i SPA sajtovi mogu biti potpuno ispravni za SEO, ali to ne dolazi samo od sebe. Najsigurniji put je da javne stranice imaju sadržaj, naslove i linkove već u HTML-u sa servera, kroz SSR ili SSG, a da se CSR koristi za interaktivne delove i aplikacije iza prijave. Ako imate sajt u React-u ili sličnom radnom okviru koji se slabo pojavljuje u pretrazi, pošaljite nam upit i proverićemo kako ga pretraživači zaista vide.
Česta pitanja
Da li Google može da indeksira React sajt?
Može. Google izvršava JavaScript uz pomoć ažurne verzije Chromium-a i može da indeksira sadržaj koji se pojavi posle renderovanja. Problemi nastaju kada sadržaj zavisi od klika ili skrolovanja, kada su resursi blokirani ili kada linkovi nisu pravi a elementi sa href atributom.
Da li je SSR obavezan za dobar SEO?
Nije obavezan, ali je najsigurniji izbor za stranice koje treba da se nađu u pretrazi. Uz SSR ili SSG sadržaj je u HTML-u od prvog odgovora, pa ne zavisi od renderovanja kod pretraživača i obično se brže prikazuje korisniku. Za delove iza prijave CSR je sasvim u redu.
Da li drugi pretraživači i AI alati izvršavaju JavaScript?
Ne u istoj meri kao Google. Mnogi alati koji preuzimaju sadržaj za AI odgovore i pregled linkova na društvenim mrežama čitaju samo početni HTML. Ako je sadržaj dostupan tek posle JavaScript-a, oni ga možda neće videti, što je još jedan razlog za SSR ili SSG.
Kako da proverim šta Google vidi na mojoj stranici?
U Google Search Console otvorite alat za proveru adrese, pokrenite test aktivne adrese i pogledajte prikazani HTML i snimak ekrana. Uporedite ga sa sadržajem koji vidi posetilac. Za brzu proveru bez Search Console može poslužiti i Rich Results Test, koji takođe prikazuje renderovani kod.
#JavaScript SEO#React#SPA#renderovanje#tehnički SEO
