Turning a JavaScript-Heavy Website Into an SEO-Friendly Platform

How did Meek Media make the React site crawlable?

The goal was to keep the user experience the client liked while changing how pages were delivered. We changed the rendering model first, then fixed each signal search engines rely on, from links and metadata to schema, canonicals and speed.

1. 1

   Server-side rendering and static generation

   Pages were moved from pure client-side rendering to server-side rendering (SSR) or static site generation (SSG), depending on how often their content changes. Stable pages were pre-built as static HTML, while frequently updated pages were rendered on the server per request. Either way, the first HTML response now contained the full content, so crawlers no longer had to execute JavaScript to see it.

2. 2

   Crawlable navigation

   Menus, pagination and in-content links were rebuilt as standard anchor elements with real href URLs. Google's documentation is clear that it follows links in a tags with an href, not elements that only respond to clicks through JavaScript. Every important page got a unique, stable URL rather than relying on fragments or app state, so it could be discovered, linked to and indexed.

3. 3

   Server-rendered metadata

   Titles, meta descriptions, robots directives and social tags were generated on the server for every route instead of being injected after load. Each page received unique, descriptive metadata based on its content. This ensures the correct values are in the initial HTML that search engines process, and removes the risk of duplicate or default titles across the app.

4. 4

   Schema markup

   Structured data was added in JSON-LD, rendered with the page, using schema.org types that match each page's visible content. Adding schema at build or render time, rather than through a script after load, makes it reliably available to crawlers. The markup helps search engines understand what each page is about and can make pages eligible for rich results.

5. 5

   Canonical handling

   Single-page apps often generate multiple URLs for one view, through parameters, trailing slashes or client-side routing quirks. Every page was given a self-referencing canonical tag in the server response, pointing at its one preferred URL. Duplicate routes were redirected or consolidated so internal links, sitemaps and canonicals all agreed on the same address. Parameters were normalised too.

6. 6

   Performance optimisation

   JavaScript bundles were split so each page loads only the code it needs, and non-critical scripts were deferred. Images were compressed, sized and lazy-loaded below the fold. With content arriving as HTML, pages could display before the full app loaded. Faster, more stable pages help users and support Core Web Vitals, which Google uses as part of its page experience signals.