Potential SEO Problems to Bear in Mind in React Development

Regardless if you’re building a new business website from scratch or updating your existing one to give it a more modern look and feel, you’ll need to think about lots of different factors simultaneously.

In most cases, businesses get overly-excited about the idea of bringing a new website to life and focus all of their energy on making it “great-looking, exciting, and a wonderful representation of who they are as a company and what sets them apart from everyone else”.

If you’re building a personal or a small business website, this is a somewhat challenging task. However, if you’re building a website for a corporation that has a great number of departments and teams, creating something that will satisfy everyone’s wishes and demands becomes a science project.

The SEO Trap

text

SEO is usually one of them.

We at Share IT have been in this game for a while and we have seen businesses make the same costly mistakes, again and again.

Speaking from our experience, businesses don’t think about SEO until their new website is already published. This can turn into a major problem later down the road.

Bad SEO can harm your business in multiple ways. In addition to preventing you rank high for relevant business keywords, poor SEO can make you entirely invisible in Google. You probably want to make the most of organic traffic to grow your brand and reach more leads and customers, so this is definitely a scenario you’d want to avoid.

In this post, we are going to outline the most common SEO problems that we have encountered while building hundreds of websites over the years for our enterprise-level clients. Since, as you probably know, we mostly work with React, we are going to focus solely on this JavaScript library and what potential SEO problems you need to bear in mind while you’re building your business website with React.

Understanding Google Bots

To avoid falling into an SEO black hole while working with React, you first need to get the fundamentals right. You need to have a crystal clear understanding on how Google bots work and what issues can React cause.

The engine uses bots, a.k.a. spiders, to learn about websites, their pages, and where to rank them in search. These little spiders crawl the website’s pages to figure out what they are about and how good the content is.

Once they finish analyzing the content, they submit their findings to a large database called Google index where all the information about your and many other websites is kept.

From that base, using its advanced algorithm, Google sends out answers to queries people type into the search bar.

The more relevant information the spider generates from your website, the better the chances you’ll have of appearing in front of the right people at the right time.

React vs. SEO

In order to help the spiders do their job, you need to make sure that crawling your site and pages is not hard for them. To do that, you need to tick all important technical SEO aspects from your checklist and make sure that your website data is properly structured.

In the robots.txt file, you can choose which pages you want these spiders to crawl and which not. To avoid overloading your site with bot requests, you can also hide some pages. This is super important because not all your pages should be visible in search.

Sounds simple, right?

Well, not exactly. Especially when you work with JavaScript libraries.

Google spiders are used to HTML pages. They favor them above everything else. Once they find themselves in a situation where they have crawl pages that are, for instance, built with JavaScript code, indexing gets a little wacky.

Google instructs the browser to ask the website server to create a HTML for each page and send it in its full form. Even when the requested pages share the same content as the previously indexed pages, the browser still needs to re-render the pages from the ground up.

This repetitive flow of data creates unnecessary work for the server because it needs to provide more than just super relevant data each time.

Satisfying Users’ Need for Speed with SPAs

text

In the process, JS-based Single Page Applications or SPA were created. The websites created with this tech don’t reload ALL the content on the website; they only refresh the content that differs from other pages that have already been processed.

This way of operating improves the performance of the website drastically because the amount of data being transacted is getting significantly reduced. ReactJS is the go-to option for building SPAs and optimizing the way content is rendered in people’s browsers.

However, having said all this, we still need to remember that Google favors HTML and that SPAs can also create SEO problems because:

  • No dynamic SEO tags - With ReactJs created SPAs, Google spiders only see portions of your pages, not the whole thing. Since they are unable to see all the metadata they prefer on your page, Google spiders have a habit of “giving up” and indexing your pages as empty.

Obviously, this is not good for you SEO. This means that your content is invisible to the search engine and that it won’t be displayed in search.

  • Google spiders look primarily for HTML - SPAs lean on JavaScript for dynamic loading of the content. Since spiders are looking to access HTML files, they tend to avoid JavaScript like it’s a big, hungry lizard.

Even though Google has said that their spiders can crawl JavaScript websites as long as we enable them to see the pages in their entirety, we still have lots of cases where websites built with JavaScript are not properly indexed. That’s because Google looks at these sources of code differently. Especially when they have errors. An error in JavaScript usually makes the indexing impossible, which is not really the same for HTML.

  • Crawling budget - JavaScript websites have issues with indexing because it takes Google more than five seconds to load the scripts, parse, and execute. The more it takes the scripts to load, the more crawling budget spiders need to spend on them. And once the spiders run out of crawling budget, they will simply abandon your website without indexing it.

How to Make Your React Website SEO-Friendly

text

  • Invest in pre-rendering - invest in special programs that resolve your rendering issues by intercepting requests coming to your website and providing the bots with cached, static HTML versions of your website. What you’re doing here is basically transforming your JavaScript code into a static HTML which Google spiders can easily read, thus helping them understand the content on your web pages without burning through the crawl budget.

Pre-renders are super easy to implement. They don’t require much coding.

However, pre-renders have their limitations. They shouldn’t be used for big websites with a lot of pages. Also, if your pages experience lots of changes - you should think about other solutions. Pre-renders are not free and you need to rebuild them whenever a change occurs on the page.

  • Think about server-side rendering - If you’re using React, then you probably know what client-side and server-side rendering stands for.

Server-side rendering offers Google bots and browsers all the HTML data, which is not the case with client-side rendering. With client-side rendering, JavaScript downloads the content from the server and then presents it to the users so they can see it on their device of choice.

This is, of course, a problem for SEO. Everything that comes for a client-side is a potential SEO issue. If you want to avoid potential problems while building your next React app, you should think about adding an extra layer of Next.js.

In the end, you can always hire expert developers who work with SEO consultants to ensure your website is top-notch, both technically and SEO-wise. At Share IT, we believe there are pros and cons to any solution out there. The trick is knowing what’s the best for your users and which path you should take to achieve optimal results.

If you’re looking to build a website in React, feel free to reach out to us at Share IT. Even if you’re not sure which technology would be the best fit for your specific use case, we’re more than happy to discuss different options and help you make the right decision.