Insights from Our Experts

Blog image

How to do better SEO practices with React

Author Image

Shijin M,Software Engineer

Older web technology worked in such a way that the browser has to request each page of the website separately. Each new request to the server will cause an endless reload of pages. But technologies are changing, single page applications can give user experience similar to desktop applications. SPA allows pages UI and its data to be changed without reloading the page.  SPA tools such as React, Angular are great to provide better user experience with faster responses.

One of the greatest worries while building SPA applications is about search engine optimization. Most of the developers think that web crawlers of search engines will not crawl a page properly unless it’s completely rendered in the user’s browser. In the case of React-based websites, there will be nothing in HTML on the initial load. So, if the initially rendered HTML is not SEO rich, it may degrade the website ranking. Sacrificing users' time for good ranking is not at all a good strategy. We have to keep the user experience as good as possible and also the website ranking.


Do web crawlers of search engines wait for the response of javascript actions?

Most of the HTML elements of single-page apps are rendered through JavaScript after the initial HTML load, but currently, most of the search engine crawlers are unable to see what gets rendered. Google can run JavaScript and thereby render client-side views, but you can not depend on it. Google may or may not decide to run your JavaScript,  Google isn’t the only search engine, but it’s an important one to optimize for.



Server-Side Rendering in ReactJS

The best solution to have an SEO friendly website using react is to use Server rendering. Instead of loading contents after HTML loads, the server carries out all operations. The browser will get  HTML with all information.  After JS is loaded, the web turns into a “single page app” and works in the same nature. Server-Side Rendering will allow part of the code to be run on your server first. This means the server first obtains the data from API  that is required to include on the initial page’s HTML. Then it will package those data and send this data to the browser.

And the client gets the initial page HTML with all required data. A client-side rendering SPA would have to start from scratch, but a server-side rendering SPA would be at a starting point where they already have all the data.  

How to include meta/head tags in React?

Handling title and meta/head tags is a tricky thing in react. We have to define tags within the component. But they have to be moved on the document head on the client-side as well as server-side. There is a bundle of modules that supports setting meta/head tags in React components such as React helmet, react-meta-tags,react-document-meta, etc.

React meta tags

React-meta-tags is an npm package which allows you to write those tags in a declarative way and in normal JSX format.


npm install react-meta-tags


import React from 'react';
import MetaTags from 'react-meta-tags';
class Component1 extends React.Component {
  render() {
    return (
        <div class="wrapper">
            <title>Page 1</title>
            <meta id="meta-description" name="description" content="Some description." />
            <meta id="og-title" property="og:title" content="MyApp" />
            <meta id="og-image" property="og:image" content="path/to/image.jpg" />
          <div class="content"> Some Content </div>

Using id on tags helps replace of older meta tags with new ones.


React Helmet

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 simple and user-friendly for someone starting out on React.


npm install --save react-helmet


import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
  render () {
    return (
        <div className="application">
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="" />


  • Supports all valid head tags: title, base, meta, link, script, NoScript, and style tags.

  • Supports attributes for the body, HTML, and title tags.

  • Supports server-side rendering.

  • Nested components override duplicate head changes.

  • Duplicate head changes are preserved when specified in the same component 

  • Building a react application that is utmost SEO friendly is a challenge. But it is not something impossible to achieve. With the right knowledge we can build SEO friendly react web apps.

    Build SEO friendly react apps. Get in touch for a FREE consultation.

I Need

Help for