React SEO: Best Practices and Strategies
30 November, 2022
3
3
0
Contributors
React was developed to create interactive UIs that are modular, efficient, and cross-platform. Today, it is one of the most popular libraries among us, Initially, it was developed to make Single Page Applications (SPAs) but now it is used for creating fully-fledged websites, and mobile applications. However, the same factors and features that led to its popularity are causing a number of React SEO challenges.
If you have extensive experience in conventional web development and move to React, you will notice an increasing amount of your HTML and CSS code moving into JavaScript. This is because React doesn’t recommend directly creating or updating UI elements, but instead recommends describing the “state” of the UI. React will then update the DOM to match the state in the most efficient way.
As a result, all the changes to the UI or DOM must be made via React’s Engine. Although convenient for developers, this may even take longer loading times for users and more work for search engines to find and index the content.
In this show, we will address challenges faced while building SEO-performant React apps and websites, and we will outline several strategies used to overcome them.
Why React SEO Remains Challenging
This brief overview of Googlebot’s crawling and indexing only scratches the surface. Software engineers should identify the potential issues faced by search engines trying to crawl and index React pages.
Here is a closer look at what makes React SEO challenging and what developers can do to address and overcome some of these challenges.
Loading Time & UX
Fetching, parsing, and executing data takes much time in React. JavaScript may also need a network to fetch and parse the data correctly, and users may need to wait for a while to get their requested information.
Google has laid out a set of core web vitals related to user experience, used in its ranking category. A longer load time may affect the user experience.
Page's Metadata
Meta <meta> tags are helpful because they allow Google and websites to show appropriate titles, thumbnails, and description for pages. But those websites rely more on <head> tags as per the information.
React renders all the content, including meta tags, on the client. Since the app shell is the same for the entire website/application, it may be hard to adapt the metadata for individual pages and applications.
Sitemap
A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to crawl your site more efficiently. A sitemap tells Google which pages and files you think are essential to your site and provides valuable information about these files. For example, when the page was last updated and any alternate language versions of the page.
React does not have a built-in way to generate sitemaps. If you are using something like React Router to handle routing, you can find tools that can generate a sitemap, though it may require some effort.
Non-React SEO Consideration
These considerations are related to setting up good SEO practices in general.
1.
Have an optimal URL structure to give humans and search engines a sense of what to expect on the page.
2.
3.
Use a CDN to serve all the static assets like CSS, JS, fonts, etc., and use responsive images to reduce load times.
We can also address many of these problems by using server-side rendering (SSR) or pre-rendering.
Render Paths
We can render a react application in the browser or on the server side and produce some varying outputs.
Two functions that change significantly between the client side and server side are - routing and code splitting. Let's take a closer look at them below:
Client- Side Rendering (CSR)
Client-side rendering is the default render path for a React SPA. The server will serve as a shell app that contains no content. Once the browser downloads, parses, and executes included JavaScript sources, the HTML content is populated or rendered.
The routing is handled by th client app by managing the browser's history. This means that the same HTML file is served respectively which route was requested.
And code-splitting is what you can split your code using dynamic imports or React.lazy.
Server Side Rendering (SSR)
Server-side rendering refers to an application’s ability to display the web page on the server rather than rendering it in the browser. When a website’s JavaScript is rendered on the website’s server, a fully rendered page is sent to the client and the client’s JavaScript bundle engages and enables the Single Page Application framework to operate. A server-side rendered application helps to load faster than it's usual speed, it'd also improve the user experience of the application.
The web pages in server-side rendered applications load webpages efficiently.
Avoid hashed URLs
This issue isn’t as common for React, but it’s essential to avoid hash URLs like the following:
•
https://showwcase.com/#/home
•
https://showwcase.com/#/about
•
https://showwcase.com/#/contact
Generally, Google isn’t going to see anything after the hash. All of these pages will be seen as https://reactspa.com/.
Don't forget the basic fundamentals
While there are additional SEO considerations with React applications, that doesn’t mean other fundamentals don’t apply.
You’ll still need to make sure your React applications follow best practices for:
1.
Mobile-first
2.
Structured data
3.
Website structure
4.
Title tags
5.
HTTPS
Conclusion
Unfortunately, working with React applications does add to the already long list of issues a technical SEO needs to check. But thanks to frameworks like Next.js, it makes the work of an SEO much more straightforward than what it was historically.
Hopefully, this guide has helped you better understand the additional considerations you need to make as an SEO when working with React applications.
Keep Coding!
web
development
develevate
bestpractices