The Problem – Why Vanilla React Does Not Score Well on SEO
Let us quickly look at how Google Bot ( and other search engines) index websites before addressing React SEO's problem.
How Search Index Crawlers Work – A Quick Look
Search Engines crawlers roam over the Internet to gather information about websites to store it in their database. Users can only discover your site on search engine results if the crawler stores or "indexes" this information. The modern web is vast, with millions of websites and billions of pages. So, crawlers have to get the best performance with minimum resources.
Empty First Pages
As we saw above, the initial loads in React are not info-rich HTML pages. So, crawlers cannot know what the site or page is about and do not readily index it.
Slow Load Times and UX Issue
Google, social networks, and other content sharing platforms use your page’s metadata to display information like descriptions, titles, and image data for better click-through rates. But, React only renders these meta tags in the browser on the client machine. So, these content sharing sites cannot list your pages correctly, leading to traffic loss and poor SEO performance.
React Does not Have an In-Built Sitemap Functionality.
A sitemap is a blueprint of your site that helps Google Bot understand its structure and relations between different pages. All this helps the crawler index your website better. But, React does not have an in-built sitemap generating functionality. You might use some third-party tools, but the process can be complex.
The Solution – Use the Power of Isomorphic React for Universal Apps
New frameworks like Next.js and Gatsby let us write isomorphic React code quickly by hiding away its complexity. We can choose one of these render paths to optimize our site for SEO as per our specific use case:
Server-Side Rendering to Static Content (SRSS)
If your site needs to generate HTML content based on user input but only needs to deliver the static page in response, you can use server-side rendering to static content. Your server will manage the routes, generate the user-specific static HTML content, and then serve it quickly to the browser. React provides you with the renderToStaticMarkup method for doing this.
Server Side Rendering with Rehydration (SSRH)
Pre-Rendering to Specific Content (PRS)
PRS takes Server Side Rendering one notch up by pre-building static HTML pages and delivering them super-fast as initial loads. We can achieve fantastic load times with PRS and provide semantically rich initial static pages to optimize them perfectly for SEO. An ideal use-case for PRS is e-commerce site product pages which generally do not depend on user input for their content but need fast load times for higher conversions.
Pre-Rendering with Hydration (PRH)
Finally, pre-rendering with hydration lets us update dynamic content in the UI after the initial pre-rendered static HTML page. This technique builds on PRH to provide a full-blown React app after the initial page load.
Each of the render paths is best for specific use cases. For example, in terms of pure load times, PRS performs best, but SSRH may be a better option for a rich web application where a user lands on his profile page.
The key takeaway is that modern React provides many options to optimize our website for SEO and superior performance. By choosing smartly as per the use case, you can now achieve excellent SEO results with your React websites.
Is React good for SEO?
While SEO is not one of the goals of React, modern React provides us with many features to achieve superior SEO performance. You should read our guide above to get the best React SEO results.
Which rendering is best?
You should choose a rendering method that aligns with the goals of your application. You should read our in-depth guide on rendering methods (internal link to rendering article here) to find out what best suits your site.
Why should I optimize my React app for SEO?
You can only grow your React app’s human user base if they can discover it. For this, you need to optimize your React app for SEO to let Google and other search engines show it up in their search results.