Why SEO matters and how search engines work
Search engine optimization is the practice of increasing quality traffic to your website by using techniques that generate organic clicks from search results. If you’ve decided to build a web application, you’ll definitely want people to be able to find it on Google. That’s why you need to figure out how to make your website search-engine-friendly before you start developing it. And to make your web application SEO-friendly, you need to know how Google checks website pages and determines their priority. Roughly speaking, this process can be divided into three stages: crawling, indexing, and ranking.
How Google generates search results
Step 1. Crawling
Crawlers such as Googlebot search the web for new and updated websites in order to determine their content. Search bots find new pages by following links from websites they already know. They also crawl sitemaps and web pages provided by managed web hosts.
Step 2. Indexing
Once Googlebot finds new pages, Google tries to understand what those pages are about. Although Google can understand the content of images and videos, it understands text best. Use meaningful titles, headings, proper meta descriptions, and relevant content so Google sees what you want it to see on a particular web page.
Step 3. Ranking
The last step Google takes when processing new pages is to rank them and determine how relevant they are to users’ queries. When a user enters a search query, Google provides a list of results ranked from most relevant to least relevant.
As you can see, it’s important for your website to have pages with the content your users are looking for. And the higher the quality of the content, the better it is for your website’s position in Google search results.
But what’s the problem with React and SEO, and why does the question of their compatibility come up so often? Let’s dig into the technology to understand how React and SEO are connected.
React and SEO: what’s the problem?
React is an open-source jаvascript library used to build fast, responsive user interfaces (UI). It’s a popular choice for creating static applications, dynamic web applications, and single-page applications (SPAs). Interestingly, websites built with the same technology stack can show different levels of SEO-friendliness. Let’s see how and why different types of React applications differ when it comes to search engine optimization.
React applications and their SEO-friendliness
Static web applications are websites with information that doesn’t change often. Landing pages and blogs are examples of static websites. Information on these websites is stored as HTML files, which are generated on the server during development. When a user makes a request to a static site, it goes straight to the server, which retrieves the ready-made file and returns it to the user’s browser.
Static web applications are good for SEO because they quickly provide an HTML file with the necessary content, allowing Google to easily index and rank the pages.
Dynamic applications have dynamic content that changes often and that you can’t predict. For example, if you’re building an online store or marketplace, you can’t know in advance what each shopper’s shopping cart will look like. To create the cart page, requests containing user data are sent to the server, the server retrieves the necessary information from databases, and an HTML file is generated on the server and sent to the client’s browser. This allows Google crawlers to quickly recognize and rank dynamic pages.
Single-page applications, or SPAs, contain all their content on a single page. SPAs are famous for the great user experience they provide. This experience is possible because, unlike traditional multi-page websites, SPAs are rendered in the browser (on the client side) and don’t send requests to the server every time a user interacts with the application. This increases the initial load time, but subsequent interactions load new content instantly.
At the same time, SPAs have some drawbacks, one of which is client-side rendering, which can affect SEO. Let’s look at what we mean by that.
The first thing you should understand is that different types of websites provide different content for browsers to render.
While static and dynamic websites generate files containing HTML content that Google can easily understand, SPAs provide jаvascript files that are difficult to interpret.
During client-side rendering of an SPA, when a user makes a request in the browser, an HTML file containing a few lines of code is sent back to the browser. That code isn’t enough for Google to understand the site’s content and index the page. So Google has to wait for the browser to load the jаvascript content. Since loading jаvascript takes some time, Google’s crawlers might simply not wait for it to arrive. As a result, they may skip a page that takes a long time to load and move on to the next one.
What does all this mean for React and SEO, and for your React application?
There are two main takeaways:
- Not all React applications have trouble with SEO.
- Google’s crawlers generally have difficulty indexing and ranking SPAs.
However, it is possible to build an SEO-optimized React application, even a single-page one. How can you do it? Find out in the next section.
Practical approaches to building an SEO-optimized React application
Knowing that React applications can have some trouble with SEO shouldn’t stop you from developing a React application. Given that since 2015 Google has been rendering jаvascript much better than before, SEO-related problems are easy to prevent. Let’s look at what you can do so React and your SEO don’t clash.
Build static or dynamic web applications
We’ve already mentioned that React single-page applications tend to have SEO problems. Static and dynamic applications use server-side rendering, which helps search crawlers access their pages easily. The good news is that you don’t always have to choose an SPA. It all depends on the online business you want to build.
For example, you’ll need a dynamic website for a marketplace. If you’re creating a landing page to promote your business, a static web page is the best choice. In turn, SPAs are preferable for developing social networking sites, task management applications, or services like Google.
Use server-side rendering
If you’ve decided to build a single-page application, there are two ways to make it visible in search results. Using server-side rendering is one of them.
As you already know, Googlebot indexes and ranks server-rendered pages better. To enable server-side rendering (SSR) for your SPA, you should use Next.js, a React framework specifically designed to enable SSR. With Next.js, the rendering process looks like this:
Server-side rendering with Next.js
A request is sent to the Next.js server, where it is matched to a React component.
The React component requests data from a database or API. The data is then sent back to the server.
HTML and CSS files are created on the Next.js server and sent to the browser.
With an experienced React developer and a little effort, making a React single-page application SEO-optimized isn’t impossible. What’s more, there’s another way to achieve SEO optimization with a React application.
Use prerendering
Another popular way to make an SPA visible to search crawlers is to use so-called prerenderers: programs that can detect Googlebot requests. Once a prerenderer realizes that a bot is crawling your site, it provides the bot with a static HTML version of your SPA from the server so the bot can index it. But how does the HTML page get onto the server? In prerendering, all HTML pages are preloaded and cached using Headless Chrome, a tool that helps software engineers work easily with server environments.
You might want to choose prerendering because it’s easy to implement. Generally, you don’t need to make any changes to your existing codebase, and if the need arises, the changes will be minimal. Finally, prerenderers can convert any jаvascript code into static HTML files.
However, keep in mind that prerenderers are paid tools that may not work well with websites whose data changes often.
Conclusion
Successfully combining SEO with React is no longer as pressing a problem as it was a few years ago. However, making single-page applications—the type of website most often built with React—SEO-optimized is still a challenge.
To make an SPA visible to Google’s crawlers and accessible for indexing, you can choose prerendering or server-side rendering. Both approaches require you to spend more time, money, and effort to ensure SEO optimization, but you should definitely use them if you want your site to rank highly in Google search results.
