How to handle SEO of React App
Blog React SEO image

In this post we are going to learn how to handle SEO of React App. SEO (Search Engine Optimization) is one of the factor for your website to rank in google search but doing SEO is not really straight forward. In this post we were going to learn about what are the different way to do SEO for our React Apps.

Why SEO is Important

Various Research shows that 95% of the traffic goes to the websites which rank 1 in the google search and based on this solid fact we can say SEO is super important not only for the React app but for all kind of web apps independent of there technology.

Basic Content Optimization

Blog React  Content SEO
Blog React Content SEO

Before replying on other 3rd party packages we should focus on our content itself. So basically a content should follow these rules

  1. Content, Optimized for your Keywords
  2. Domain Name and Age
  3. Page Speed and Mobile Friendliness
  4. Inbound Links
  5. An Accessible URL
  6. Technical SEO (Title, Meta Tags, Image Alt Tags)
  7. Content Viewable By Search Engines (i.e. Google can crawl your pages)

SSR (Server Side Rendering)

server side rendering with
Blog React SSR SEO

The major reason of poor React app SEO is because we follow CSR (Client Side Rendering) because most of junior developers reply on the create-react-app and in no time its become standard for them. Every new project they gonna start will be built on create-react-app.

The solution to above problem is using some new awesome technology like Gatsbyjs and Next.js both provides SSR out of the box.

react-helmet

Blog React react-helmet
Blog React react-helmet

Its little bit hard for react developers to update there head tag from there React component code because by default we append our app to inside the body of html. Solution to this problem is 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.

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>
    );
  }
};

For SSR

ReactDOMServer.renderToString(<Handler />);
const helmet = Helmet.renderStatic();

Features

  • Supports all valid head tags: titlebasemetalinkscriptnoscript, and style tags.
  • Supports attributes for bodyhtml and title tags.
  • Nested components override duplicate head changes.
  • Duplicate head changes are preserved when specified in the same component (support for tags like “apple-touch-icon”).
  • Callback for tracking DOM changes.
  • Supports server-side rendering.

Using Prerender

Blog React Prerender logo
Blog React Prerender logo

This one is a bit tricky . Prerender allows your Javascript website to be crawled perfectly by search engines.

Search engines and social networks are always trying to crawl your pages, but they only see the javascript tags.

Blog React Prerender Working
Blog React Prerender Working

Prerender render your javascript in a browser, save the static HTML, and you return that to the crawlers!

Why you should you use prerender

  • Open Source
  • Perfect Cache
  • Blazing Fast
  • Google Approved
Blog React Prerender supported technologies
Blog React Prerender supported technologies

If you want to learn how to measure react app performance you can learn here.

Categories: Reactjs

2 Comments

How to integrate Google Analytics in React - Blog React · February 15, 2020 at 3:48 am

[…] How to handle SEO of React App Post Views: 5 Categories: Reactjs Tags: Reactjs Advanced […]

A roadmap from beginner to advanced for React developers 2020 - Blog React · March 7, 2020 at 4:19 am

[…] 5. Learn different types of rendering in React […]

Comments are closed.