Insights from Our Experts

Blog image

SEO tips 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 was will cause endless reload of pages.But technologies are changed, Single Page application can give user experience similar to desktop applications. SPA allows pages UI and its data can 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 worry 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 case of React based websites, there will be nothing as HTML on initial load. So if the initially rendered HTML is not SEO rich it may degrade the website ranking, sacrificing users time for getting a good ranking is not at all a good way of thinking. We have to keep the user experience as good as possible and also the website ranking.

 

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

Most of 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 obviously 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, all operations are carried out on the server and the browser will get  HTML with all information.  After JS is loaded the web turns into a “single page app” and works respectively. Server-Side Rendering will allow part of the code to be run on your server first. This means the server first obtain the data from API  that is needed to be included on the initial page’s HTML, and 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 those tags within the component, but they need to be moved on document head on the client side as well as server side. There is a bundle of modules which 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.

Installation

npm install react-meta-tags

Usage

import React from 'react';
import MetaTags from 'react-meta-tags';
 
class Component1 extends React.Component {
  render() {
    return (
        <div class="wrapper">
          <MetaTags>
            <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" />
          </MetaTags>
          <div class="content"> Some Content </div>
        </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 dead simple, and React beginner friendly.

Installation

npm install --save react-helmet

Usage

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

 

  • Supports all valid head tags: title, base, meta, link, script, noscript, and style tags.
  • Supports attributes for 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