SEO Beginners Guide for Meteor, React & Prerender

SEO (Search Engine Optimization) is one of the most important elements that you need to set up for your project if you want to improve the discoverability of your website for search engines like Google, Yahoo, and Bing.

A Single Page Application (SPA) is a web application that doesn't need to reload the page every time the user interacts with it. Its main advantage is the speed through which it delivers the content to the user and it does it by loading all the resources that the page needs in the initial load (HTML, CSS, and JavaScript) and only requests data to the server based on the user's interaction with the website.

Now, Meteor is a platform for building single-page applications. Since these applications rely heavily on the usage of JavaScript, the search engines will not be able to crawl and index your project correctly resulting in a website that is not discoverable or that is indexed with the wrong data.

In the following steps of this tutorial, we will learn how to debug the SEO of our web application and we will understand how to improve it and get the expected results with our Meteor project.

To set up a correct SEO system for our website, we will use a simple solution normally used for single-page applications called pre-rendering services.

A pre-render service is a system that caches the pages of your website by making sure that they load all their JavaScript content correctly and stores that content as static files so they can be delivered in a very fast and responsive way. This service works as a middleware of your web application and intercepts all of the page requests that were made from search engine crawlers (e.g. Google Bot, Bing Bot, Twitter Bot) and once these requests are intercepted, the pre-render system delivers the cached version of the page to the crawler.

The main advantage of these cached versions of our website pages is that the content of our project will be delivered completely without the need for JavaScript making our website discoverable to the search engines with the correct SEO metadata and with great results in the loading times of our website.

There are multiple pre-rendering services available in the market such as prerender.io, ostrio.io, and rendertron. For this tutorial, we will use prerender.io because of its free plan, simplicity, and popularity.

Meteor Project Setup

Let's start by creating our Meteor project with the command meteor create <project_name>. This command will build a simple boilerplate of a Meteor application, and by default, it will use React as its frontend framework. Once the project is created, we will deploy our application and debug its SEO using a tool called Google Search.

There are multiple ways of deploying your Meteor application. In this tutorial, we will not go through the deployment process, but we do recommend you choose between two of the most famous and simplest tools, which are Meteor Cloud and Meteor Up.

To test the SEO of our application, we will go to Google Search and paste the URL of our deployed website. Once the page has been processed, we can view the result by clicking on the View tested page button. Here, we will find two sections which are HTML and Screenshot.

These sections will show us how the search engines are rendering our website. In HTML, we will find the code the web crawlers process of our website (here is where the meta tags are retrieved), and in Screenshot, we will see how this code is being visually rendered.

Since we just deployed our website without the setup of prerender.io, we should see in our Google Search results that our application is not processed correctly (blank page with incomplete HTML code). As we mentioned before, this result is because our website is a single-page application; without the setup of our pre-rendering service, the web crawlers cannot render our website's content correctly.

Prerender.io Configuration

Now, we will set up our pre-rendering service. For this, we will create a free account in the prerender.io website, and once our account is complete, we will get redirected to the website's dashboard, from which we will retrieve our token. You can find your token either in the dashboard's top section or by clicking the Install middleware button on the page.

To set up prerender.io in our Meteor application, we will install Meteor's built-in SEO package with the command meteor add mdg:seo. To configure our pre-rendering service, we will add the following code to our settings.json file (if this file doesn't exist, you can create it under the root folder of your application):

{
  "prerenderio": {
    "token": "<token>"
  }
}

Now that we configured our pre-rendering service, we can deploy our application changes and test the SEO of our website on Google Search. The new results should display our website's content correctly (both in the HTML and Screenshot sections).

React Helmet Setup

To complete the SEO configuration of our project, we need to build a system that set's up the HTML meta tags of our application. For this, we will use a package called react-helmet, and we will install it with the command npm install --save react-helmet.

Next, we will build a react component to manage the meta tags of our website. We will create a new folder inside imports/ui called components, and inside of it, we will create a new file called SEO.jsx. This file should have the following code:

import React from "react";
import { Helmet } from "react-helmet";
import { Meteor } from "meteor/meteor";
 
export default SEO = ({ title, description, url, image }) => (
  <Helmet>
    <title>{title}</title>
    <link rel="canonical" href={Meteor.absoluteUrl(url)} />
    <meta name="description" content={description} />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image:src" content={image} />
    <meta property="og:title" content={title} />
    <meta property="og:url" content={Meteor.absoluteUrl(url)} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={image} />
  </Helmet>
);

Here, we defined the <SEO /> component which receives four different input parameters (props) which are title, description, url, and image. Instead of using <Helmet /> on every page/component with multiple meta tags definitions, we simplified this process, making the project SEO structuring much simpler. Here is an example of how to use our <SEO /> component in our App.jsx file:

import React, { Fragment } from "react";
import { Hello } from "./Hello.jsx";
import { Info } from "./Info.jsx";
import SEO from "./components/SEO.jsx";
 
export const App = () => (
  <Fragment>
    <SEO
      title="Welcome to Meteor!"
      description="Welcome to Meteor page description"
      url="/"
      image="www.example.com/image.png"
    />
 
    <h1>Welcome to Meteor!</h1>
    <Hello/>
    <Info/>
  </Fragment>
);

To ensure prerender.io knows when our website will be completely rendered and ready to be cached, we will add a new <script> element into the <head> section of our website. This element will define a new variable inside the window object, which is:

<script>window.prerenderReady = false;</script>

Since the <head> section is defined in our project main.html file, we will update its content for the following code:

<head>
  <title>Meteor Project</title>
  <script>window.prerenderReady = false;</script>
</head>
 
<body>
  <div id="react-target"></div>
</body>

Our new window.prerenderReady variable should be updated once our react page/component is rendered. To do this, we will add a useEffect hook definition inside our App.jsx file and update the variable value for true. With this, our file should have the following code:

import React, { Fragment, useEffect } from "react";
import { Hello } from "./Hello.jsx";
import { Info } from "./Info.jsx";
import SEO from "./components/SEO.jsx";
 
export const App = () => {
  useEffect(() => { window.prerenderReady = true; }, []);
 
  return (
    <Fragment>
      <SEO
        title="Welcome to Meteor!"
        description="Welcome to Meteor page description"
        url="/"
        image="www.example.com/image.png"
      />
 
      <h1>Welcome to Meteor!</h1>
      <Hello/>
      <Info/>
    </Fragment>
  );
};

Conclusion

Dealing with SEO is always a complicated task, even more, when using single-page applications. In this tutorial, we learned how to set up prerender.io and configure it inside our Meteor project. We also learned how to use react-helmet and build a reusable react component to manage the meta tags of our website.

If you want to follow through with the final code, you can find it in the following link.