React SPA i SEO: Kako sam riješio 404 Routing i indeksiranje

Izazov: “Fantomske” 404 greške u React aplikaciji

Sajt je radio savršeno dok se kreće po linkovima unutar aplikacije. Ali, onog trenutka kada bi korisnik uradio Refresh na nekoj unutrašnjoj stranici (npr. /bar-oprema), ili pokušao da pristupi direktnim linkom, Vercel bi vratio grešku 404: Not Found.

Zašto se ovo dešava?

React Router obrađuje navigaciju na strani klijenta (u browseru). Vercel server, po defaultu, traži fizički fajl na toj putanji. Pošto fajl bar-oprema.html ne postoji (sve je u index.html), server vraća grešku prije nego što React stigne da preuzme kontrolu.

Rješenje: Konfiguracija Vercel Rewrites

Rešenje nije bilo u React kodu, već u konfiguraciji servera. Morao sam da “naučim” Vercel da sve zahtjeve proslijedi na index.html, i pusti React da odluči šta će prikazati.

Kreiran je vercel.json fajl u korijenu (root) projekta sa sljedećom konfiguracijom:

vercel.json

Ovaj jednostavan snippet koda je riješio 90% problema. Svaki zahtjev sada “pogađa” aplikaciju, a React Router preuzima URL i renderuje odgovarajuću komponentu. Nema više 404 grešaka kada se osvježi stranica.

SEO Bonus: XML Sitemap i Kanonizacija

Sljedeći korak bio je osigurati da Google botovi ne budu zbunjeni. Primetio sam nekonzistentnost između www i non-www verzija URL-ova u sitemap-u, što je moglo dovesti do problema sa duplim sadržajem.

Šta sam uradio:

1. Čišćenje Sitemap-a: Ručno sam verifikovao XML fajl da osiguram da svi linkovi vode na kanonsku (glavnu) verziju domena.
2. Robots.txt: Konfigurisan je robots.txt da eksplicitno pokazuje putanju do novog sitemap-a.

 

Prikaz validirane XML mape sajta za Linea BH.

Rezultati

Nakon implementacije ovih tehničkih popravki:

• 0% 404 grešaka na validnim linkovima.
• Trenutno učitavanje stranica zahvaljujući Vite bundler-u.
• Poboljšan UX: Korisnici mogu da bukmarkuju i dijele linkove ka specifičnim proizvodima bez straha da link neće raditi.

 

Ovaj projekat je dokaz da moderni JavaScript framework i dobar SEO mogu ići ruku pod ruku – ako znate kako da konfigurišete server side ispod haube.

Često postavljana pitanja (FAQ)

Zašto koristiti React za sajt male firme?

React omogućava kreiranje interfejsa koji se ponaša kao aplikacija – nema ponovnog učitavanja cijele stranice pri svakom kliku, što drastično poboljšava korisničko iskustvo.

Da li je Vercel dobar za SEO?

Apsolutno. Vercel je optimizovan za performanse (Edge Network), a brzina učitavanja je jedan od ključnih faktora za rangiranje na Google-u (Core Web Vitals).

Kako riješiti problem ako React sajt nije indeksiran?

Provjeriti da li se koristi Server-Side Rendering (SSR) ili Static Site Generation (SSG) ako je sadržaj ključan.
Ako se koristi čisti Client-Side React, obavezno koristiti sitemap-u i Google Search Console za inspekciju URL-ova.