If you're making a React.js website with many pages and want to add SEO for each page, you can use a similar method as before but with some changes. Imagine a situation where your React.js app has multiple pages.

1. Create Separate Components for Each Page:

   • Organize your React components so that each represents a different page in your application.

    // components/HomePage.js
    import React from 'react';

    const HomePage = () => {
      return (
        <div>
          {/* Content for the home page */}
        </div>
      );
    };

    export default HomePage;

    // components/AboutPage.js
    import React from 'react';

    const AboutPage = () => {
      return (
        <div>
          {/* Content for the about page */}
        </div>
      );
    };

    export default AboutPage;

1. Use React Router for Navigation:

   • Implement React Router to handle navigation between different pages.

    npm install react-router-dom

    // App.js
    import React from 'react';
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
    import HomePage from './components/HomePage';
    import AboutPage from './components/AboutPage';

    const App = () => {
      return (
        <Router>
          <Switch>
            <Route path="/" exact component={HomePage} />
            <Route path="/about" component={AboutPage} />
            {/* Add more routes for other pages */}
          </Switch>
        </Router>
      );
    };

    export default App;

1. Add SEO to Each Page Component:

   • For each page component, use react-helmet to set the title and meta description dynamically.

    // components/HomePage.js
    import React from 'react';
    import { Helmet } from 'react-helmet';

    const HomePage = () => {
      return (
        <div>
          <Helmet>
            <title>Home Page Title</title>
            <meta name="description" content="Description for the home page." />
          </Helmet>
          {/* Content for the home page */}
        </div>
      );
    };

    export default HomePage;

    // components/AboutPage.js
    import React from 'react';
    import { Helmet } from 'react-helmet';

    const AboutPage = () => {
      return (
        <div>
          <Helmet>
            <title>About Page Title</title>
            <meta name="description" content="Description for the about page." />
          </Helmet>
          {/* Content for the about page */}
        </div>
      );
    };

    export default AboutPage;

1. Ensure Proper Navigation Links:

   • In your navigation menu or links, be sure to use the right Link components from react-router-dom for moving between pages.

    // components/Navigation.js
    import React from 'react';
    import { Link } from 'react-router-dom';

    const Navigation = () => {
      return (
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            {/* Add more navigation links for other pages */}
          </ul>
        </nav>
      );
    };

    export default Navigation;

Using this method, you can make a multi-page React.js website with good SEO for each page. Change the title and meta description for every page component based on its content. This helps search engines understand and index your content correctly.