Making a React site readable to search engines and AI

jungmarker.com is a React app. Crawlers and AI assistants that don’t run JavaScript saw almost nothing, and some content was hidden in the HTML until animations ran. Heavy images and a large bundle slowed it down.

I planned and built the SEO work and measured each change before and after.

1. 1.Render

   A server build renders each route’s full React content to static HTML at build time.

2. 2.Describe

   Each page gets its own title, description, canonical URL, hreflang and JSON-LD in one connected graph.

3. 3.Slim

   Images move to WebP with mobile sizes; the JavaScript is split so pages load less.

4. 4.Check

   Scripts validate the structured data and canonicals, and a test guards the graph.

5. 5.Notify

   A sitemap is regenerated on every build and IndexNow tells search engines about changes.

• Prerendering of 240 HTML pages, with 118 URLs in the sitemap.
• One JSON-LD graph linking the agent, the business, the website, articles, FAQs, listings and places.
• hreflang for English and Spanish page pairs on 42 pages, and canonical tags on 235 of the 240 pages.
• Image re-encoding to WebP with mobile variants and width and height on every image.
• Bundle splitting with lazy-loaded chunks.
• Fixes for content hidden until animation: hidden H1s from 31 to 0, and repeated FAQ answers from 77 to 0.

Prerender instead of rewriting in a server framework

Rendering the existing React pages at build time put the content in the HTML without rebuilding the site.

One connected graph instead of separate snippets

Linking every block by ID tells search engines that the agent, the business and the pages are one entity, instead of many unrelated claims.

• Schema validation runs as a script and as a test, and the canonical audit checks every page.
• Each change has a before and after number from the same measurement.

• These are technical measurements. They show crawlers can read the pages; they don’t prove rankings or AI citations.

Front-end and web platform work with measurable results: rendering, structured data, performance and internationalization on a production site.

React, Vite, Server-side rendering, JSON-LD, WebP, IndexNow