Table of Contents[Hide][Show]
As you have probably realized by now, ReactJS is the talk of town.
It all started with the arrival of Javascript frameworks about 10 years ago. Angular led the way into adoption but quickly got overtaken by other more SEO-friendly JavaScript frameworks, like React JS.
At the time of writing, React-powered single-page applications (SPAs) are the preferred development environment for front-end web tech teams.
About 70% of all client projects I have audited or consulted on in the last 5-6 years were based on React JS.
Javascript-powered websites have already established a path in the industry and are here to stay so, if you are an SEO you’d better start upscaling your skills in this area.
This guide aims to provide helpful advice to make React javascript SEO-friendly.
What is React JavaScript?
Definition: React JS is an open-source, front-end development platform made by Facebook to create user interfaces.
React is the most popular JavaScript library today, with over 150 million monthly downloads, and the foundation for many popular frameworks and libraries, such as Gatsby, Next.js, and Redux.
Why is it powerful? for several reasons:
It can enable developers to create web applications with a rich user experience using components and reusable code.
It allows developers to quickly create complex user interfaces and web applications without writing much code.
It can allow developers to build complex UIs from individual components quickly.
It’s supposed to be fast ( caveats exist)
Developers love ReactJS
In the last five years, I have learned a lot from React developers through my involvement in supporting and auditing large-scale React-based web projects.
Developers employ reusable chunks of code, called components, to construct complex UIs in React.
The components make React so powerful and why developers turn to it for most large-scale web applications. These can be:
Breadcrumbs
global links
boilerplate content areas
CTA buttons
Topnav links
The basic building blocks for creating UIs in React include HTML files and elements such as divs, spans, lists, etc., and custom attributes called “props,” which provide additional information about how those elements should behave or look on screen.
The platform is componentized in nature, and virtual DOM (VDOM) simplifies updating parts of an application without reloading the entire page. The library responsible for that is ReactDOM.
The DOM (Document Object Model) in question is a tree-like representation of a web page and its content, which React updates to create faster, smoother user experiences.
To sum up, React JS is a revolutionary library that can help developers create user interfaces more efficiently and quickly. There is no doubt that React JS is a great library, but optimizing React JS websites for SEO is much more difficult than working on other non-javascript platforms based on LAMP, Ruby on Rails, etc.
If you want your React JS app to be visible in SERPs and stand a good chance to be crawled and indexed, then following some SEO best practices is very important, because ReactJS ‘out-of-the-box’, is not SEO-friendly.
Steps to making React JS SEO-Friendly
Search engine optimization for React JavaScript websites requires a combination of technical and content-oriented approaches.
It includes :
ensuring the server delivers rendered HTML, aka SSR (server-side rendering)
ensuring all code is valid and properly formatted
- establishing basic URL rules from project day 1, eg: URLs in lowercase, word separation by hyphens, non trailing forward slash urls
correctly using semantic HTML tags such as H1s and H2s, image HTML
(alt txt, captions, clean URLs)- implementing all the common best practice onpage optimisations
minimizing any HTML file, element, and attributes.
internal links coded in HTML
- optimising speed performance overall
Upgrade to Server-Side Rendering (SSR)
This one is probably the most important functionality.
Server-side rendering (SSR) is a process whereby the rendering of HTML is done on the server before it is sent to the user’s browser. It can help search engine bots better understand what content is on your website and how it is structured, including Googlebot.
Most React developers use one of a few React frameworks to enable SSR. The most common framework and the preferred one for this purpose is Next.js but there are a few others: Gatsby, Grommet, React Bootstrap.
The NextJS framework supports ‘server-side rendering’ (SSR) and enables faster load times. It basically converts well javascript code onto HTML which is key for SEO. So if you are considering building your next site using Reach JS and want it to be SEO-friendly, consider Next JS!
If Next JS is not an option for you, perhaps because your React SPA is already developed, you then have the pre-rendering option: Prerender.io and Rendertron
What is Client Side Rendering, then?
Client-side rendering (CSR) is where the HTML file is rendered on the user’s browser, which is the default for ReactJS. The HTML file does not need to be pre-rendered on the server. As a result it can be difficult for search engine bots to crawl, as they need to process the Javascript code before accessing the content.
Googlebot can wait up to two seconds for the HTML file to be generated and can also index the content from the HTML file, but it is never as effective as when using SSR.
Produce semantic HTML
SEO-friendly code on React sites is about using as much semantic HTML as possible.
ReactJS facilitates the use of semantic HTML through JSX. See below an example
React enables the construction and composition of any form of valid HTML elements, whether they are semantic or otherwise.
Enabling accessibility in website development is considered good practice, so you need to decide what sorts of semantic elements you bring into each of the React components.The following provides a brief illustration for a React app + the HTML rendered:
This would be the semantic HTML output delivered :
This is how it happens in the scenario above:
- a React component named ‘
App
‘ was defined which represents the structure of the provided HTML. - The
renderPage
function usesrenderToString
fromreact-dom/server
to render theApp
component to a string, which can be sent as the server response. - Finally, it exports the
renderPage
function, which can be used in your server-side code to render the React component to HTML. You would integrate this all with your server setup to handle requests and serve the rendered HTML to the client.
And this is how the actual content would display on the front-end web page:
Navigation:
- Home
- Products
- About
- Contact
Article:
- Title: My Perfect Website
- Section 1: Great user experience
- Subtitle: UX and Accessibility
- Content: Lorem ipsum all about accessibility and UX here
- Section 2: Great SEO
- Subtitle: (No subtitle)
- Content: Correlation does not imply causation.
- Source: The art of SEO, a real-world study
- Section 3: Great Content
- Subtitle: (No subtitle)
- Content: This is probably all about the content.
- Download: Download this article!
Footer:
- © 2024 Made with React – 1, rue de Napoleon, Paris 75008.
Tip: Accessible Top navigation menus
Place particular emphasis on the navigation because even if React SSR is used to deliver the HTML directly from the server, React developers have a tendency to develop top nav menus in javascript.
It is a bit harder to code it all in HTML, particularly fly-out menus, so make sure you raise this early enough and request a fully accessible topnav menu. Test it properly using different browsers with Javascript switched off.
SEO Basics: Optimize all critical SEO tags
From title tags to image alt tags, going through meta descriptions and rel canonical, you must check all of those and ensure there is a system for users to edit those areas and for the front end to pick it up correctly. This is a basic SEO task but one that cannot be missed.
In React, these needs can be met through the react-helmet library, so I recommend you to become familiar with it and discuss it with your developers.
Implement Structured Data Markup
Implementing structured data markup (reviews, events, sector-specific, open graph, content type) on ReactJs websites is good advice and highly recommended.
Structured data markup can help SEO and web page crawlers better understand your website content. It might also influence how and where your content appears Googlegle search results. Structured data markup can be applied to various types of content, such as products, articles, and events.
You can use the Schema.org vocabulary to implement structured data markup on your React JS website. For instance, by adding structured data markup to the page, you can help web crawlers understand that your website is about a specific retail store.
On the social media front, Open graph protocols, such as Facebook’s Open Graph Protocol, and Twitter cards can also help improve Google’s and user’s understanding of your website content.
Create HMTL and XML sitemaps
Creating both XML and HTML sitemaps will help because they will enable more avenues for your content to be found. Even if things like SSR are in place, it is a good idea to give Google a comprehensive picture of your site architecture via sitemaps.
A sitemap can help search engines understand the content on your React JS website, how it is structured and organized, and how often it is updated.
If the website is large and complex, I recommend you to build a multi-sitemap where the main index sitemap would contain references to other individual child sitemaps. These child sitemaps in turn will cover each of the silos or segments across the website. The split can be done by topics, categories, content types or any other form of logically structured content.
It is important to ensure that the sitemap is up-to-date and includes all the URLs on your website. You can then submit the sitemap to major search engines such as Google, Bing, and Yahoo. You can also identify static HTML pages on your React JS website and submit them to search engines directly.
Optimize Images
React SEO can involve optimizing images on your website, which helps with SEO and improves page loading times. It is important to ensure that the images on your website are properly compressed and scaled down to an appropriate size.
You should also use descriptive alt text for images. This can help search engines understand what the image is about and make it easier for visually impaired users to interpret your website. Javascript code can also generate and add alt text for images.
With regard to images, some important things to take into account are image size and dimension specifications, and not using lazy loading for images visible ‘above-the-fold’, as that can slow down performance.
Creating Internal Links using HTML
Web pages with strong internal links are easier for search engines to crawl and index. Internal linking can help search engine bots understand the structure of your website and how pages are related to each other.
For React SEO, it is important to ensure the web pages on your website link to each other and that the anchor text reflects the content on the linked page. Avoid internal links made with javascript. It is best to stick to the usual SEO-friendly model.
Improve Speed Performance
Creating an SEO-friendly React app involves improving performance and security. Ensuring pages load quickly for users can help improve your website’s SEO. You should also ensure your app is secure using encryption, HTTPS, and other measures.
You can also use tools such as Lighthouse to measure the performance and security of your website. It can also provide suggestions on how to improve the SEO of your React application.
Consider installing the Webpack Bundle Analyzer module in NextJS. Developers can get a lot out of this tool as it will allow them to optimize the chunking of javascript files, amongst other things. That will certainly have an impact on performance at client level. Their UI looks a bit like this:
Another area where there is scope for improvement is the delay or differing JS front. Run Lighthouse and Webpagetest or other similar tools, or follow your Web Core Vitals reports and conclude after analyzing all the data.
Use a Content Delivery Network
A content delivery network (CDN) is a group of servers located in different parts of the world that serve content to users based on their geographic locations. A CDN can help improve page loading times and reduce lag for users worldwide.
Using a CDN for React SEO can also help reduce network traffic, as it caches HTML static content and distributes it to users from servers close to them. Javascript code can also set up a CDN on your React JS website through third-party services such as Cloudflare.
Benefits of making React JS SEO-Friendly
Here is a comprehensive analysis of how React SEO can help improve your website’s search engine rankings and visibility:
- Optimal accessibility and overall better crawling of your website
- Giving to Google and other search engines additional context of the website content
- Improved user experience (UX) making the website faster, therefore facilitating engagement
- Increased visibility in the SERPs (Search engine results pages)
Conclusion
Making React JavaScript SEO-friendly will, in turn, make your website more accessible and, therefore, rank better and increase your chances of getting relevant traffic. It can also help improve the user experience, as faster page loading times and a better website structure make it easier for users to find what they want.
Several SEO best practices should be followed to ensure that your React-powered website remains SEO-friendly, such as implementing server-side rendering via the NextJS framework.
NextJS boasts many ‘out-of-the-box’ SEO features. The real challenge will be making gradual improvements in JS optimization that will help speed up your website.
What are your experiences with React so far? feel free to comment if something should be added to this post.
FAQs
As React Js becomes more popular, numerous questions arise about this technology. It is because it requires high understanding, and each case requires special attention. Below are some of the frequently asked questions:
How do I make my React JS site SEO-friendly?
The best way to make your React JS site SEO-friendly is to use server-side rendering, create a structured website with internal linking, optimize meta tags and open graph protocols, improve performance and security, and use client-side rendering.
How is Next.JS different from React?
React is a UI Javascript library well-known for simplifying the process of constructing user interfaces via its component-centric methodology. It can potentially create React apps quickly, via some of its collections, eg: Create React App (CRA).
Next.js can also be used to create React applications but adopts an alternative strategy that includes certain optimizations otherwise hard to tackle, for developers, such as:
- File-system routing
- CSS integrated into JavaScript styling via styled-jsx
- Server-side rendering
- Automatic code-splitting
- Route prefetching
What is the difference between SSR and SSG?
SSR stands for Server-Side Rendering, meaning web pages are rendered on the server and sent as fully rendered HTML to the client’s browser. SSG, in turn, stands for Static Site Generation, which means that web pages are pre-built during the build process and served as static files to the client’s browser.
What is best SEO approach: GatsbyJS or NextJS?
Both GatsbyJS and NextJS have advantages for SEO. Based on your SEO strategy, choose the one that better aligns with your specific website requirements and development preferences.
Leave a Reply