If you're working on a multi-page React.js website and want to implement SEO for each page, you can follow a similar approach as before but with some modifications. Let's consider a scenario where you have multiple pages in your React.js application.

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, make sure to use the appropriate Link components from react-router-dom to navigate 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;

Conclusion:

By following this approach, you can create a multi-page React.js website with proper SEO for each page. Adjust the title and meta description in each page component based on the content of that specific page. This way, search engines can better understand and index your content.