How to set up SEO-friendly routing in React?

@elliott 

Setting up SEO-friendly routing in React largely revolves around ensuring that your web application can be properly crawled and indexed by search engines. This involves a few key practices:

1. Use React Router

React Router is the most popular routing library for React. It allows you to manage navigation and rendering of components based on URL changes.

Installation:

1

npm install react-router-dom

Basic Setup:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

2. Server-Side Rendering (SSR)

SEO for SPAs (Single Page Applications) like those built with React can be challenging because crawlers may have issues with JavaScript-rendered content. Using frameworks like Next.js, which supports server-side rendering, can help address this.

Example using Next.js:

1. Install Next.js: npx create-next-app my-next-app
2. Pages in Next.js provide file-based routing: Create files inside a /pages directory such as index.js, about.js, contact.js.

Next.js pre-renders every page by default, so search engines can easily crawl your content.

3. Use React Helmet

React Helmet is a library that helps manage meta tags and the document head. This is important for specifying titles, descriptions, and other meta tags crucial for SEO.

Installation:

1

npm install react-helmet

Usage:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import React from 'react';
import { Helmet } from 'react-helmet';

function About() {
  return (
    <div>
      <Helmet>
        <title>About Us - My Site</title>
        <meta name="description" content="About page of My Site" />
      </Helmet>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

export default About;

4. Static Site Generation (SSG)

For content that doesn’t change often, generating static pages can be a great approach for SEO. Tools like Next.js also offer this with SSG.

Use the following in a Next.js page to pre-generate static pages:

1
2
3
4
5
6
7

export async function getStaticProps() {
  return {
    props: {
      // any props you want to pass to the component
    },
  };
}

5. Use Descriptive URLs

Ensure your routing structure uses meaningful and descriptive URLs. This helps both users and search engines understand the content of the page.

6. XML Sitemap

For bigger sites, generate an XML sitemap to help search engines index your pages more effectively. This can be automated using tools or manually done depending on the site's architecture.

7. Internal Linking

Ensure that your site is well-connected with internal links, making it easier for crawlers to find all your pages.

By implementing these practices, you will improve the SEO-friendliness of your React application significantly.