React SEO: Tips To Build SEOFriendly Web Applications
www.bacancytechnology.com
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.
Introduction
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.
How SEO Works? 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.
Diagram of Googlebot indexing a site. Note: This is a block diagram. The original Googlebot is quite complex.
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.
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
General SEO Challenges
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.
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.
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.
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.
5. Other SEO Considerations Below is a few considerations that are linked to setting up excellent SEO practices. 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. If you want to improve your React application performance, then React.memo is a great solution to achieve the same!
React SEO Challenges
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)
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.
3. Seo Problems with SPAs As it is known, Single Page Applications have optimized the website performance; there are several issues regarding SEO.
How to make React apps SEO-friendly
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 serverside, 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.
2. Prerendering Being one of the leading approaches to make single and multiple-page web SEOfriendly 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. Advantages: These programs are quite effective to execute several kinds of modern JavaScript and transfer into static HTML Easy to incorporate Support latest web novelties
Drawbacks: 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
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. Clientside rendering is a Googlebot and a browser that receives empty HTML Files having less or no content.
Subsequently, JavaScript code downloads the content from the servers and allows users to view it on their screens. However, the clientside 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.
React SEO Best Practices
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:
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.
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.
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.
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:
If the description element cannot function, try filling in the description by receiving 160 characters of the first sample of page content.
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.
Raw:
Rendered:
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.
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.
Correct Use:
Using anything like a CSS background with React can lead to difficulties in indexing images. Incorrect Use:
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:
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.
Conclusion
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.
Thank You
www.bacancytechnology.com