Learn how to develop a website with React SEO so that it ranks on search engines. Read the challenges and best practices for developing SEO-friendly websites.

1. React SEO: Tips
To Build SEO-
Friendly Web
Applications
www.bacancytechnology.com

2. Quick Summary:
Acknowledge the challenges that React
applications face on the SEO part. To be
more precise, you will find a brief on how
React is compatible with SEO practices. As a
result, you will also know how Google
crawls to these types of ReactJs websites.
Generally, a page undergoes several
processes before indexing. It’s all good
unless Googlebot faces problems crawling
the content. Eventually, when Googlebot
fails, the site suffers.

3. Introduction

4. When we talk about Search Engine
Optimization, React websites face huge
challenges. One major reason is that most
React JS developers and development
companies focus more on the client-side
rendering, whereas Google focuses on
server-side rendering. This creates
tremendous challenges for ReactJS & SEO
both.
On this note, we are going to talk about the
basics of React SEO. This guide lists the
challenges that restrict React from being
SEO-friendly. Alongside, we will even see
the best practices that enable your
application to rank better and higher in
Google search results.

5. Of all online searches, Google receives
around 90% of it when it comes to SEO.
Before delving into how SEO works, let’s
look into the crawling and indexing process
of Google.
The below image is taken from Google
Documentation.
How SEO
Works?

6. Diagram of Googlebot indexing a site.
Note: This is a block diagram. The original
Googlebot is quite complex.

7. Points to Remember:
Googlebot keeps up with a crawl queue having
all the URLs it requires to crawl and index
henceforth.
When the crawler stays unoccupied, it picks
up the upcoming URL in the queue, requests,
and collects the HTML.
Subsequently, Googlebot decides it is required
to collect and execute JavaScript after parsing
HTML. In case it does, the URL gets added to a
render queue.
In the latter point, the renderer collects and
executes JavaScript to render the page,
thereby sending the rendered HTML back in
its position.
The processing unit takes out all the URL tags
mentioned on the web page and adds them to
the crawl queue back.
The content gets added to Google’s Index.

8. Did you notice the clear difference between
the Rendering stage executing JavaScript
and the Processing stage parsing HTML?
Well, this differentiation takes place based
on cost. Executing JavaScript is costly as it
needs to have a look at 130 trillion
Webpages.
Quick Read:
Top Reasons to Choose ReactJS for Web
Development in 2021

9. General SEO
Challenges

10. Below are a few SEO Challenges that
software engineers and developers can
address and fix.
1. Empty First pass content
It is known that React applications depend
on JavaScript. As a result, they struggle with
Search engines. This happens due to the app
shell model employed by React. Initially,
HTML does not include any meaningful
content, which is why a bot or a user needs
to execute JavaScript to view the page’s
actual content. This approach denotes that
Googlebot traces a void page during the
initial pass. Thus, the content is viewed by
Google only while the page gets rendered.
Eventually, this leads to a delay in indexing
within thousands of pages.

11. 2. Page Metadata
Meta tags are brilliant because they enable
social media websites and Google to display
valid thumbnails, titles, and descriptions for
a particular page. But, these websites
depend on the tag of the collected webpage
to obtain this information. This site does
not perform JavaScript for the landing page.
React renders every content, even the Meta
tags. As the app shell remains the same for
the app/website, it becomes difficult for
individual pages to adapt the metadata.

12. 3. Sitemap
A sitemap is a file where all details about
your site’s videos, pages, and other forks are
provided, along with the relationship
between them. Being an intelligent search
engine, Google reads this file to crawl into
your site easily. React does not possess any
inbuilt method to create sitemaps. If you
use React Router to manage to route, you
need to find tools to create a sitemap.
Although, this might require some of your
efforts.

13. 4. User Experience and
Loading Time
No matter what the task is, Fetching,
executing, and parsing JavaScript takes
immense time. Furthermore, JavaScript
may even require making network calls to
collect the content while the user must wait
for a while to view the requested details. In
terms of ranking criteria, Google has
flourished a set of web vitals regarding user
experience. Extended loading times affect
the user experience score, thus informing
Google to rank the site lower.

14. 5. Other SEO
Considerations
Use a CDN to serve each static asset
such as JS, CSS, Fonts, etc., and use
responsive images to lower the loading
times.
Improving the robots.txt file can assist
search bots in analyzing how to crawl
on your website.
Below is a few considerations that are
linked to setting up excellent SEO practices.
If you want to improve your React
application performance, then React.memo
is a great solution to achieve the same!

15. React SEO
Challenges

16. ReactJs is a lucrative choice for web
development in 2021, but let us check out
what challenges do React developers face
when developing an SEO-friendly website.
1. Use of Single Page
Application (SPA)

17. To help reduce the loading time issue,
developers have developed a JS-based
Single Page Application(SPA). This is a
major problem with SEO for React apps.
They don’t reload the whole content.
Instead, they refresh the content. Thus, this
technology has been playing a vital role in
elevating the performance of websites ever
since its introduction.
2. Absence of dynamic SEO
tags
SPAs load information in a dynamic process. Thus, when
the crawler clicks on a certain link, it challenges
completing the page load cycle. The metadata cannot
refresh. This is a major reason why the crawler cannot
show SPA, eventually getting indexed in an empty page
format. Generally, none of these are good when it comes to
ranking. However, this needs a little concern as the
developers can easily resolve these issues by generating
separate and individual pages for Google bots. But, here
rises another challenge again. Creating individual pages
gives rise to the business expenses besides difficulties
ranking the website at Google’s first-page search results.

18. 3. Seo Problems with SPAs
As it is known, Single Page Applications
have optimized the website performance;
there are several issues regarding SEO.

19. How to make
React apps
SEO-friendly

20. 1. Isomorphic React
The Isomorphic JavaScript Technology has
an automatic capacity to detect whether a
JavaScript on the server-side is enabled or
not. In cases where JavaScript is disabled,
Isomorphic JavaScript works on the server-
side, thus providing the concluding content
to the client-side server. All the required
content and attributes become readily
available once the page starts to load.
However, when JavaScript is enabled, it
performs like a dynamic app having several
components. This enables faster loading
compared to the conventional website,
thereby leaving the user with a smooth
experience in the SPAs.

21. 2. Prerendering
Being one of the leading approaches to
make single and multiple-page web SEO-
friendly apps, prerendering is usually used
when crawlers or search bots fail to render
Web pages effectively. Pretenders are
unique programs that limit requests to the
website. If the request is from a crawler, the
prerender sends your site a cached static
HTML version. If your set sends the request,
the page gets loaded normally.
These programs are quite effective to
execute several kinds of modern
JavaScript and transfer into static
HTML
Easy to incorporate
Support latest web novelties
Advantages:

22. Services are not free of cost
Not suitable for pages that change data
frequently
Takes a lot of time to load if the website
is too large
Drawbacks:
3. Server-side rendering:
Fetching HTML Files With
Entire Content:
If you wish to build a React Web
application, you need to have a precise
piece of knowledge between client-side
rendering and server-side rendering. Client-
side rendering is a Googlebot and a browser
that receives empty HTML Files having less
or no content.

23. Subsequently, JavaScript code downloads the
content from the servers and allows users to
view it on their screens. However, the client-
side rendering faces several challenges
concerning SEO. This is because Google
crawlers cannot view any content or view less
content that is not indexed appropriately. On
the contrary, with server-side rendering, the
browsers and the Google Bots receive HTML
files along with the whole content. This assists
Google bots in performing indexing and rank
higher without any hassle.

24. React SEO
Best Practices

25. 1. React Router Usage
You must be knowing, React follows a
SPA(single-page application). However, you
can utilize the SPA model more optimally if
you describe certain SEO elements and
rules appropriately in your pages. This
guide needs to open pages as an individual
URL without the hashtag(#).
(As per Google, it cannot read URLs linked
with hash, and hence it may not index any
of the URLs generated with React).
Hence, we are creating URLs in a manner
that opens in separate pages. We must use
React Router in URLs. Below is a sample of
the same:

26. While building the content, we will
recommend you not to run a process with
setTimeout. In these cases, Googlebot might
leave the page and website when it cannot
read the content.

27. 2. URL case
Google considers certain pages as separate
pages when URLs contain lower or
uppercase.
For example:
/vendi
/Vendi
These two URLs will be considered as two
separate and individual pages by Google. To
avoid such duplication of pages, compose
every URL with lower case.

28. 3. "A Href" Usage in Links
Ensure giving “a href” to links.
Unfortunately, Googlebot cannot read links
provided with onclick. Hence, it becomes
vital to define links with a Href to make it
easier for Googlebot to spot other relevant
pages and visit them.

29. 4. React Helmet
One important component of SEO is
Metadata. Thus, it should pop up on source
code even when React is used. Keeping the
description and title in the same structure
might not be helpful enough in CTR and
other scales of SEO.
Here is when React Helmet comes to play.
Below is a sample code structure along with
metadata:

30. If the description element cannot function, try
filling in the description by receiving 160
characters of the first sample of page content.

31. Ensure keeping structured data items in the
source code along with the metadata.
(Organization schema, Product, etc)
For example, below are Raw & Render
versions of yolcu360.com. The structured
data displays in a protected form in both
versions. Ideally, we see no such difference.

32. Raw:
Rendered:

33. When you test the page with the Rich
Results test tool, the structured data on
your page can be easily viewed by
Googlebot.
You can display metadata in or content and
elements in to Google by operating helmet
and server-side rendering together. Any
deficiency or potential metadata errors can
negatively impact each of the metrics
present in search results.

34. 5. 404 Error Code
All defective pages run a 404 error code.
Hence, this is a gentle reminder to set up
files like server.js and route.js.
6. Images
You should specify your on-page images
with “img src”. As per Googlebot, although
images show up in its tools without any
complications, it still cannot index them.

35. Correct Use:
Using anything like a CSS background with
React can lead to difficulties in indexing
images.
Incorrect Use:

36. 7. React.Lazy
Implementing lazyload will help users explore
the websites faster and create a positive
impact on our page speed score in Google.
You can find this package on npm.
You can make use of React-Snap for
performance optimization in website speed.
Below is a sample:

37. Compared to several other JavaScript
frameworks like Vue or Angular, React can
obtain smaller files. It does not post
unwanted and inapplicable codes. Hence, it
helps in increasing the page speed
tremendously. To be more precise, you can
split your 2MB JS file into 60-70kb ones and
run it in separate processes.

38. Conclusion

39. While React SEO is widely used these days,
several important terms come along with it.
These include React Helmet, React Router
and React-snap. However, while using
JavaScript, bear in mind that Google
calculates and crawls the HTML websites
faster and better than the JavaScript ones.
But, this does not mean Google can’t crawl
JavaScript websites. The only thing to pay
attention to is to be a bit careful and
precisely know the potential challenges that
come their way.
At Bacancy Technology, we have expert
React developers who have the experience
and knowledge to build an optimum SEO
website for your business.

40. Thank You
www.bacancytechnology.com