What is React?
React is an
open source library which has been developed and maintained by Facebook for
building interactive UI components for both mobile apps and Single Page
Applications (SPA). It runs on JavaScript and is popularly used by developers
as it boosts productivity during the development process.
SPA problems
with SEO
The way these
sites are built makes it harder for search engines to crawl their content.
“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.”
- React Helmet
- Isomorphic
React Applications
What is a 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.
React Helmet Usage
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.
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:
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:
Read More on How to Make Your React Web App SEO-Friendly
