fbpx
Share this article

If you’re fairly new to React, and have made multi-page applications with React Router, you may be wondering how to implement technical SEO on each of your individual pages. In this tutorial we’ll be covering how to do just that, using an NPM module called React Helmet.

In this tutorial:

  1. Introduction
  2. Creating our React Helmet SEO demo app
  3. Adding Components
  4. Creating Navigation with React Router
  5. Adding SEO with React Helmet

Introduction

For the purposes of this tutorial, we’re going to start by creating a simple multi-page demo site using React and React Router. Seeing as the focus of the article is around Helmet & SEO, I’m going to assume to assume you’re already familiar with React & Router, so I won’t go into too much detail about how to create the app, but it’s worth following along, just so we’re on the same page.

The project’s source code is available on Github if you want to clone it and dive straight in to the code, and there’s also a live preview available if you want to see the end result in action.

Creating our React Helmet SEO demo app

Let’s start by using create-react-app to (guess what) create our react app. I’m going to assume that you’ve already got NPM installed on your machine. I’ll be working on MacOS, but the process is very similar on Linux and Windows. Now browse to the directory where you want to create your react app and run the command npx create-react-app react-helmet-seo-demo.

Creating our React Helmet SEO Demo App

The process will take a few minutes to complete. Once it’s done, enter the directory with cd react-helmet-seo-demo and run npm install --save react-router-dom react-helmet to install Router and Helmet. Once that’s done, start up the app with npm start. You’ll now see the app in your browser, at the address http://localhost:3000. It should look something like this:

Default React App Template

We can get rid of some of the stuff that comes packaged with the default react app template. Open up the App.js file from within the src directory in your project with your favourite code editor, and remove everything between the enclosing <div> tags and remove the logo import, so that your code looks like this:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

Now open up App.css and remove everything so you end up with an empty file. If you open your app now, it should render as a blank white page. Now that we’ve got a blank canvas, we can start making some our own components.

Adding Components

Within the src directory, create a new directory called components. Let’s start by adding a header component. Create a new file in your components directory called Header.js, and add the following code:

import React from 'react';
import logo from '../logo.svg';

export default class Header extends React.Component {
  render(){
    return (
      <header className="Header">
        <div className="Wrapper">
          <h1 className="Branding">
            <img src={logo} alt="React Helmet SEO Demo logo" className="Logo" />
            React Helmet SEO Demo
          </h1>
        </div>
      </header>
    );
  }
}

Now we need to import our new component into the main App.js file. Add the following line to the top of the file:

import Header from './components/Header';

Now render the header by adding the component to the App function, along with a containing <div>:

function App() {
  return (
    <div className="App">
      <Header/>
    </div>
  );
}

If you open up your app now, you should see the react logo and the site title, which will look something like this:

Unstyled header component

It’s not looking good though, so let’s do something about that. Open up your app.css file again, and add the following code:

.Wrapper {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.Header {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  display: flex;
  position: sticky;
  top: 0;
  z-index: 999;
  background: #111319;
  color: #fff;
  width: 100vw;
}

.Header .Wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Header .Branding {
  margin: 0;
}

.Header .Branding .Logo {
  height: 40px;
  margin: 10px 0;
  vertical-align: middle;
}

a {
  text-decoration: none;
  color: #fff;
  margin: 0 10px;
}

Great, now we’ve got a proper header for our site! It should look like this:

Styled header component

Next, we’ll create some more components that’ll display the content for each of our pages. First create a new file in your components folder called Home.js, and add the following code:

import React from 'react';

export default class Header extends React.Component {
  render(){
    return (
      <div className="Wrapper">
        <p>This is the home page content for the React Helmet SEO Demo App</p>
      </div>
    );
  }
}

Now create another file called About.js, and add the following:

import React from 'react';

export default class Header extends React.Component {
  render(){
    return (
      <div className="Wrapper">
        <p>This page tells us all about the React Helmet SEO Demo App.</p>
      </div>
    );
  }
}

Seeing as it’s just a demo, we won’t add any fancy content to these pages. Just a couple of pages with a line of text on each page will do.

Creating Navigation with React Router

Now that we’ve got some page content components ready, we can start adding some navigation and URLs for our pages. First, add the following to the top of your App.js file:

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

Now change the render function in your App.js to the following:

function App() {
  return (
    <div className="App">
      <Router>
        <Header/>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Router>
    </div>
  );
}

If you open up your app again, you should see the home page content rendering, like this:

Home page content

Browse to http://localhost:3000/about, and you should see the about page content:

About page content

Good stuff, now we can add some navigation in the header component. Open up your Header.js component file and add the lines highlighted below:

import React from 'react';
import logo from '../logo.svg';
import { Link } from 'react-router-dom';

export default class Header extends React.Component {
  render(){
    return (
      <header className="Header">
        <div className="Wrapper">
          <h1 className="Branding">
            <img src={logo} alt="React Helmet SEO Demo logo" className="Logo" />
            React Helmet SEO Demo
          </h1>
          <div class="Navigation">
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
          </div>
        </div>
      </header>
    );
  }
}

Awesome, now we’ve got some navigation in our header:

React Helmet SEO Demo App Header with navigation links

Try out the links on the right hand side, they should switch between the two pages. If you open up the developer console and view the page HTML with the inspector, you’ll notice that the page title and meta description show the default React app data, and they’re the same for both pages:

Default React Title and Meta Description head tags

This is where Helmet comes in. We can use it to change the title and description for each page, and add some meta keywords, making the pages appear appropriately in Search Engine Results and improving our technical SEO.

Adding SEO with React Helmet

First, open up your Home.js and About.js component files and add the following code to the top of the file:

import { Helmet } from "react-helmet";

Now change your Home.js render function, adding the highlighted lines below:

export default class Header extends React.Component {
  render(){
    return (
      <div className="Wrapper">
        <Helmet>
          <title>Home</title>
          <meta name="description" content="React Helmet SEO Demo Home page" />
          <meta name="keywords" cpntent="react,helmet,seo" />
        </Helmet>
        <p>This is the home page content for the React Helmet SEO Demo App.</p>
      </div>
    );
  }
}

Now we’ll do something similar for the About.js component:

export default class Header extends React.Component {
  render(){
    return (
      <div className="Wrapper">
        <Helmet>
          <title>About</title>
          <meta name="description" content="About the React Helmet SEO Demo" />
          <meta name="keywords" cpntent="react,helmet,seo,about,information" />
        </Helmet>
        <p>This page tells us all about the React Helmet SEO Demo App.</p>
      </div>
    );
  }
}

Open up your app again, and inspect the HTML with the developer console. This time you should see our custom head tags in action:

Home page head tags
About page head tags

That’s all there is to it! We’ve successfully changed our head tags for each of our individual pages, improving our React App’s SEO!


Share this article

Leave a Reply

Your email address will not be published.Required fields are marked *

email subscribe web design & development tutorial updates

Get more awesome web design & development tutorials delivered straight to your inbox as soon as they’re published!