Making a React Website SEO-Friendly: A Real Case Study

The Spring Hill English Boarding School website is a React and Vite single-page app with a Firebase-backed admin dashboard. Visitors saw a complete site, but the HTML the server actually sent was an empty container titled "springhill", with no description, no robots.txt and no sitemap.

Google can usually render JavaScript, though it does so later and less reliably. Facebook and WhatsApp link previews, most other search engines and AI crawlers do not run JavaScript at all. To them, every page of the school’s site was blank.

The fix was to turn every public page into real HTML during the build. Tools such as react-snap do this by driving a headless browser, which often fails on hosting build servers. Instead, the build uses React’s own server renderer: Vite builds a server bundle, a small script renders each route with a static router, and the result is written out as a separate HTML file per page.

In the browser, the app then hydrates that HTML instead of throwing it away and drawing everything again. That one change matters for speed as much as for SEO: content appears on the first paint instead of after the JavaScript loads.

Every page got its own title, description, canonical URL and social preview tags, all generated from a single module so they can never drift apart. The same module produces School structured data with the address, map coordinates, phone numbers, opening hours and principal, plus breadcrumbs on every page and an FAQPage on the home page.

The FAQ itself was written from facts the site already published. Every answer can be checked against another page of the same site, which matters when an AI assistant might quote it word for word.

The build now writes a sitemap with every public page, a robots.txt that welcomes AI crawlers and keeps the admin area out, and an llms.txt summarising the school’s key facts for language models.

One lesson came from deployment: with clean URLs enabled on Vercel, the fallback rewrite for client-side routes has to point at the extensionless path. Pointing it at the .html file returned a 404 for the admin and login pages until it was corrected, a reminder to test the routes the build does not pre-render.

The audit also turned up smaller issues: the logo text was the only h1 on every page, banner titles sat hidden under a fixed navigation bar, two images had swapped alt text, the contact form never told parents whether their enquiry was sent, and an admission popup covered every page on load. Each was a small change; together they make the site clearer for people and machines alike.

If your site is a React single-page app, check what the server actually sends: view the page source, not the rendered page. If the content is not in that HTML, pre-render it, give every page its own metadata, add schema that matches what is visible, and publish a sitemap. It is a few days of work that decides whether search engines and AI assistants can see the site at all.