Prismic Meetup

Design a top-notch online publication — with Smashing Magazine

Watch ↗

Guide: React SEO Considerations and Solutions

Written by Coner Murphy in A speed gauge for optimization Optimization on June 07, 2022
React SEO

As web developers, we’re often told about the importance of good SEO and why we should strive to achieve it. But, the issue is exactly that; we’re just told it's important and not how to implement it or what to focus on from a developer’s perspective.

Well, that’s what we’re going to solve in this post. By the end of this post, you should have a good understanding of why SEO is important, how it can impact a business/website, and how to play your part as a developer in getting technical SEO right in React applications.

So, without further delay, let’s get started with why SEO is important and what it actually is.

What is SEO and why is it important?

At a high level, SEO or Search Engine Optimization is the process in which we can optimize our content and website for better performance on search engines like Google, Bing, etc.

SEO can take many forms, but today we’re going to focus on the technical side and how we as developers can play our part when handling React SEO. But, in reality, the technical side of SEO is just a piece of the pie. There are also other very important areas of SEO like content creation and management. Although those fall outside this post’s (and often a developer’s) scope, they’re areas that you need to recognize as having a profound impact on a website’s SEO performance.

Why SEO is important to a business’ website?

Speaking of having an impact, let’s talk about why SEO is important to a business’ website in the first place. SEO is very rarely the end goal. In most cases, it is just the means to make the end goal a reality.

For businesses, this goal often takes the form of revenue and sales. A business might want to increase its online revenue, but to achieve that goal, it needs more people to view its website.

In our digital world, to get more people viewing your website, you need people searching for things related to your product or service to find it. This is where SEO comes in because it's one way to make online offerings discoverable.

Think about it for a moment: when was the last time you went to the second page of Google when searching for something, especially something to buy? I’d wager that for the majority of people, the second page of Google and beyond isn’t a place well-traveled. So, as a business, you don’t want to be there.

Where do you want to be? On the first page, that’s where you want to be.

But, not just anywhere on the first page, you want to be as close to that top spot as possible. In fact, according to a 2020 study, 28.5% of Google users click the first organic result, and it gets lower and lower for each following spot down the page.

Now, that’s a lot of sales opportunities right there. So, for a business looking to generate revenue via its website, SEO is undeniably important and should form the basis of a good business plan.

So, now that we’ve established the importance of SEO, you have to ask: are there times when SEO isn’t important? And, that’s what we’re going to explore in the next section.

Are there times when SEO doesn’t matter?

When it comes to SEO, you want to focus your efforts on public-facing pages like blog posts and marketing or services pages but not authenticated pages like user dashboards and profiles. Instead, focus your efforts on the pages you want people to find. You want a blog post to be seen by thousands of people if not millions. But, you want a user dashboard to (hopefully), only ever be seen by one person: the user. So, invest your SEO efforts accordingly.

And, there are of course some businesses that don’t benefit from SEO as much as others. For example, businesses that utilize methods like direct proposals and/or bid invitations for new work. These businesses won’t be too concerned about their page ranking on Google as it will have a minimal impact on their bottom line. But, it’s important to note that a lot of good SEO practices are just good web development practices in general. So, just because SEO isn’t important to a business model, doesn’t mean the best practices that also have an SEO impact shouldn’t be followed.

A cartoon graphics space scene showing an astronaut exploring space as rockets and planets float around.

Stay on Top of New Tools, Frameworks, and More

Research shows that we learn better by doing. Dive into a monthly tutorial with the Optimized Dev Newsletter that helps you decide which new web dev tools are worth adding to your stack.

Technical SEO and its importance

As mentioned earlier in this post, SEO isn’t just an effort for developers; it’s a collaborative effort between the content teams and developers. If either of these teams does a bad job, your SEO is doomed to fail. And, while it’s not often thought about, the truth of the matter is there are some core technical SEO tasks that developers need to get right so the content team isn’t fighting with one hand tied behind their backs.

In this section, we’re going to explore and give an overview of some of the core technical SEO tasks developers can do to help their content colleagues out in the pursuit of the elusive number one spot on Google.

Page speed and Core Web Vitals

One of the most well-known influencers of SEO is page speed. If your page is performing slowly and takes longer than 2.5 seconds to perform the Largest Contentful Paint (LCP), then there is a chance Google will lower your page ranking.

But, the reality of the matter is that no user likes a slow loading page. How long does it take you to press the back button when a page doesn’t load? Yes, you don’t want Google to knock your site down the rankings, but what you really don’t want is for visitors you've attracted to leave before they even viewed the page because of poor performance.

That's where Core Web Vitals come in. They're Google's way of trying to assess some aspects of user experience, which is playing an increasingly prominent role in their ranking algorithm, as it relates to page load speed and its impacts. Core Web Vitals are comprised of three metrics that help them understand the speed of the page load, the speed at which the page becomes interactive for users, and the stability of the page during the process. Keeping these metrics in mind as you build pages and making technical decisions to optimize for them is important for SEO optimized websites.

Sitemaps

Sitemaps are like a directory for your website; they tell search engines crawling the file what pages are available on the website and at what URLs they can be found, along with other info like the last updated date.

The whole purpose of a search engine is to crawl every page on the internet and then index them and show them in relevant searches. While they could do this to some extent on their own, we can be helpful here and create a sitemap for our website that updates every time we add new pages or change URLs and then submit it to search engines. Effectively we are giving them the address book to our website and saying, “Here is every contact (page) and here’s how to call them (URLs), now get dialing (crawling/indexing).”

If you want your pages to show on search engines faster, submit a sitemap.

HTTPS

HTTP (or, HyperText Transfer Protocol) is, in simple terms, the protocol on which the internet is built. It allows for and facilitates the internet as we know it today. HTTPS (HTTP Secure) fulfills the same role as HTTP but with one core difference, which is that HTTPS is encrypted to ensure that the data communicated between users and websites is protected from attackers trying to peer in.

HTTPS has long been the standard for web pages, and in 2022 there’s no reason to use regular HTTP on any of your pages. With free SSL certificates being provided by companies like Let’s Encrypt, it’s easier than ever to use HTTPS, and it’s more secure for your users.

Why is this important for SEO? Well, in 2014 Google made HTTPS a ranking factor for SEO, so if your page isn’t using it, expect to rank lower than pages that do.

HTTP status codes

As developers, we’re used to dealing with HTTP status codes, especially when it comes to handling API calls and debugging issues. But, did you know that the status code you return for a page can impact its SEO ranking?

You can tell bots like the Googlebot if a page can’t be crawled/indexed or if a page can’t be found using a 404 code. You can use a 410 if you’ve intentionally deleted a bit of content (although 404, 410, and most other 4xx codes have a similar impact). You can also use 3xx codes to indicate a redirect if you’ve moved a piece of content to a new URL so the index can be updated.

In short, the status code you choose to return for your pages can have a significant impact on your website. If you’re curious to learn more about how Google handles each HTTP status code, check out this documentation page from them.

Meta tags

Meta tags are small pieces of code that live in the head tag of each page. These tags you give important information to search engines like the title, description, viewport, and the charset of the page. You can also use them to control and restrict how search engines crawl your pages.

In short, you need to have key meta tags on your page, and omitting them is a glaring SEO error that is easy to resolve. If you’re interested in learning more about meta tags, read this helpful guide from ahrefs.

Structured data / schemas

You know when you search for a cooking recipe or for a product to buy and you get those helpful cards at the top of the results page? Well, they’re called rich results, and they’re the product of schemas (or, as Google likes to call them, structured data).

Simply put, they’re pieces of JSON data that we can add to pages to serve as helpful clues to search engines about the type of content that is on that page and its key points. So, for a cooking recipe, it might be the cooking time, ingredients, and the temperature it needs to be cooked at.

All of this information provides helpful insights to Google and by using these on your website you can appear in rich results sections, letting you get all that much closer to the top of the results page.

If you’re interested in learning more about these helpful tools, check out this Google guide. And, if you want a great guide for adding them to a Next.js application, check out this great post.

Accessibility

Simply put accessibility isn’t a nice to have but is a mandatory part of building your website. In some countries, it’s a legal requirement. So, it’s no surprise that Google and other search engines put an emphasis on your site’s accessibility and penalize it if it’s poorly configured.

And quality remains key here. There are some parts of accessibility that can hurt your website more than others if not done right. Take semantic HTML, for example. If you don’t correctly use the right HTML tags for the right situation then you might prohibit your website from being crawled as effectively as it could be.

As detailed in this guide on crawlable links, if you don’t use tags correctly for linking, Google won’t be able to follow them, and then in turn won’t crawl and index those pages.

So, follow best accessibility practices and use the right semantic HTML for the right situation, and not only will you have happy users, but your SEO will also get a boost.

Responsiveness

With the culture shift that has happened over recent years to mobile usage, it’s no surprise that if your site performs poorly on mobile, you won’t get anywhere near the number one spot. You don’t need to completely adopt the mobile-first way of building websites, but you do need to make sure your website performs great on mobile and has a seamless user experience displaying all of the relevant content they need.

Not having a responsive website in 2022 is a massive red flag and should be the first thing you fix on this list if you don’t already have it.

Challenges for React SEO

With the general technical SEO areas covered, in this section, we’re going to build your skills even further by focusing on the SEO issues that can occur in React as well as how we can resolve them.

For clarity, when mentioning React or talking about React, I’m referring to CRA or Create React App. Essentially, standalone React applications without meta-frameworks like Gatsby or Next.js.

Client-side rendering

How you render your website can have a big impact on its SEO performance. React by default only utilizes Client-Side Rendering (CSR), which means the entire application is rendered on the client’s device and not on the server as with Server-Side Rendering (SSR) or Static-Site Generation (SSG).

Using Client-Side Rendering (CSR) for our application has two profound impacts on SEO:

  1. Not all search engines can render Javascript.
  2. CSR increases page load times as well as the page’s “time to interactive” (TTI).

By using only CSR in our application, we place more workload onto the client’s devices. This isn’t a big issue for powerful desktop computers with CPUs that can easily handle the workload, but it is an issue for mobile devices, especially older ones.

Mobile CPUs aren’t as powerful as their desktop counterparts and can be easily slowed down when it comes to rendering complex Javascript scripts. This is especially prominent if you have a website that utilizes a lot of complex functionality or animations for example.

Slow rendering negatively impacts TTI, among other Core Web Vitals that we mentioned earlier. And, because Core Web Vitals are one of the many ranking factors for Google, having slow loading times on mobile not only hurts your user experience, it also hurts your SERP (Search Engine Result Page) rankings.

Solutions for React SEO

Now that we’ve covered the main technical SEO issues with using React, in this section I’m going to cover two possible solutions for solving the issues so you can achieve the best possible SEO performance with a React application.

Solution 1: Building on top of CRA

If you’re keen to stick with a standard CRA app and don’t want to transition to a meta-framework like Next.js or Gatsby (more on this below) or you’re unable to, then there are a few things you can do to help resolve your React app’s SEO issues.

The first thing you can use is the React Helmet package, which lets you easily add meta HTML tags to your pages to improve your SEO performance.

But, more importantly, you can solve the chief problem of using CRA, which is rendering with CSR, by using ReactDOMServer to implement your own SSR (Server-side Rendering). SSR is a rendering method where the server renders and builds your website’s pages as the user requests them before sending them. There are other rendering methods that we’ll touch on below that are even better than SSR; however, using SSR is a lot better than just CSR when it comes to general performance and overall SEO.

The major downside to this approach is that you will have to develop and implement your own SSR functionality compared to having it done for you with a meta-framework. Which is not to mention the support side — if your own SSR goes wrong, you are on your own, but with meta-frameworks, there are countless people willing to chip in and help resolve the issue.

Speaking of meta-frameworks let’s look at those next.

Solution 2: Meta-frameworks

The second solution is to utilize a meta-framework like Next.js or Gatsby. Both can add built-in features and functionality over the top of React. For this section, I’m going to focus on Next.js as I have more experience in it than Gatsby but both offer SSR, and the even better Static Site Generation (SSG), as rendering methods that resolve the CSR issues with CRA.

In my opinion, SSG is the best rendering method for performance and SEO if you’re able to use it. SSG is where all the content on web pages is pre-rendered at build time on a server and assembled to plain HTML before the user has even visited the page.

Utilizing SSG has two significant benefits. Firstly, the site will load faster because there is no client-side rendering of the page involved; the HTML is just sent directly to the user and displayed. Secondly, and what we’re most interested in today, are the SEO perks. By having all the content pre-rendered to HTML ahead of time on the server, it’s sitting there ready to be crawled by search engine bots. The search engines don’t need to worry about loading JS and rendering it out (which, remember, not all search engines can do). So, by having it all in HTML on the server, any bot can pick it up, crawl it, and index it with ease.

The beauty of a meta-framework like Next.js is it gives you flexibility. You can easily use SSG, SSR, or CSR, so it’s not one or the other. Although I’ll note that Next.js does urge its users to use SSR or SSG due to the aforementioned speed and SEO benefits.

And, it’s not just the rendering methods that make Next.js a great framework to build with for SEO-conscious websites; with Next.js you also get image, script, and font optimizations so all your static assets are optimized for delivery and overall speed, which once again is great for SEO.

There’s a reason these React frameworks have exploded in popularity in recent years and that’s because they make building a great user experience a seamless one for devs and their teams. When it comes to considering using a meta-framework, the real question to ask is, how fast can you get started?

My Opinion

In my opinion, don’t reinvent the wheel with CRA modifications, and instead use a meta-framework like Next.js or Gatsby. These frameworks have hundreds, if not thousands of contributors thanks to the open-source community.

So, unless you’re prevented from using a meta-framework for some reason like the app being already developed in CRA and you’re not able to rebuild it, I’d use a meta-framework.

My personal choice is Next.js due to experience and familiarity but both Next.js and Gatsby handle SEO very well and can let you achieve your SEO goals in React.

Side note: if you’re interested in a more in-depth comparison of the React meta-frameworks Next.js and Gatsby, check out this post.

Final Thoughts

And breathe! We’ve covered a lot of ground in this post from a high-level overview of SEO and technical SEO to more specifically the challenges for React SEO and solutions for them.

I hope you found this post useful!

A portrait photo of Coner Murphy in a plaid shirt.

Coner Murphy

Web Developer, technical writer, and tech entrepreneur sharing my journey to financial freedom. Building PhyType and SaaS products in public.

More posts