SPA problems with SEO

For some time now, web developers have shifted from multi-page sites to single page sites, which contain great benefits like smoother loading, mobile adaptability and others.

However, there is a big issue: the way these sites are built makes it harder for search engines to crawl their content. This issue was really well explained by Barry Adams, an SEO expert:

“What happens when you use React without server-side rendering is that the crawler halts on the very first page because it can’t see any hyperlinks to follow. It sends the page to the indexer, which then has to render the page and extracts the hyperlinks, which will then be added to the crawler’s queue. Then the crawler will eventually crawl the next set of pages, and again will stop there because all the links are invisible until the JavaScript is rendered. So it has to wait for the indexer to come back with a new set of URLs to crawl. Etc.” (full article here)

But this can be improved using React Helmet.

What is React Helmet

React Helmet is a library that helps you deal with search engines and social media crawlers by adding meta tags to your pages/components on React so your site gives more valuable information to the crawlers.

From the official React Helmet’s Github:‍

“This reusable React component will manage all of your changes to the document head.
Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.”

React Helmet Usage

For this example let’s assume we have a React application with a Home Component, which is the landing page of a business which sells products for pets.

-- CODE language-jsx keep-markup --
import React from 'react';
‍
import ProductList from '../components/ProductList';
‍
‍
const Home = () => {
return <ProductList />
‍
};
‍

export default Home;

This is a basic component that doesn’t include any meta data useful for search engines and social media crawlers, so we need React Helmet to do it.

To start using React Helmet we need to install the library as follows:

-- CODE language-jsx keep-markup --
npm install -save react-helmet

Then we need to modify the Home component to start using Helmet in a way that we can use title tags and meta tags:

-- CODE language-jsx keep-markup --
‍import React from 'react';
‍
import { Helmet } from 'react-helmet';
‍
import ProductList from '../components/ProductList';
‍

const Home = () => {
  return (
    <>
‍
      <Helmet>
‍
        <title>Pets - Products</title>
‍
        <meta name="description" content="Find all the best quality products your pet may need" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@user" />
        <meta name="twitter:creator" content="@user" />
        <meta name="twitter:title" content="Pets - Products" />
        <meta name="twitter:description" content="Best Products for your pet" />
        <meta name="twitter:image" content="url_to_image"/>
        <meta property="og:title" content="Pets - Products" />
        <meta property="og:description" content="Best Products for your pet" />
        <meta property="og:image" content="url_to_image”/>
        <meta property="og:url" content="pets.abc" />
        <meta property="og:site_name" content="Pets - Products" />
        <meta property="og:locale" content="en_US" />
        <meta property="og:type" content="article" />
        <meta property="fb:app_id" content="ID_APP_FACEBOOK" />
      </Helmet>
‍
    <ProductList />
‍
  </>
  )
‍
};
‍

export default Home;

On the previous snippet we configured the title and description for our Home page and we also configured how our page is going to look whenever it’s shared on social media like Twitter and Facebook.

Note: Nested or latter components will override duplicate changes, as shown in the documentation:

-- CODE language-jsx keep-markup --
<Parent>
‍
  <Helmet>
‍
    <title>My Title</title>
‍
      <meta name="description" content="Helmet application" />
‍
  </Helmet>
‍

  <Child>
‍
    <Helmet>
‍
      <title>Nested Title</title>
‍
        <meta name="description" content="Nested component" />
‍
    </Helmet>
‍
  </Child>
‍
‍
</Parent>

Outputs:

-- CODE language-jsx keep-markup --
<head>
‍
<title>Nested Title</title>
‍
<meta name="description" content="Nested component">
‍
‍
</head>

There are more features and tags that you can find and use in the official Github page of React Helmet. We strongly encourage you to explore that library and combine it with server-side-rendering on your react project.

We at Fullstack Labs are always looking for ways to deliver great products to our customers. If you are interested in developing a software project for your business in a professional way, contact us and we would be happy to help you.

Written by

Camilo Gutierrez

I decided I wanted to be able to not just use technology, but also to create things that help as many people as possible and make their lives easier and better. I'm currently building out the order management system for Benjamin West, one of the largest interior supply companies in the world, and in the past have made a chat app for a chain of Colombian pharmacies and built a site to facilitate business and investment on the Colombian Atlantic coast. I love working in JavaScript for its universal applicability, whether on the front end, back end, or in the Internet of Things. I'm disciplined, studious, and joyful, and I like exercising and spending time with my friends.