Read Aloud
Text Size
Website • ReactJS • SEO
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.
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.
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.
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.
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:
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.
