Insights from Our Experts
How to do better SEO practices with React
Older web technology worked in such a way that the browser has to request each page of the website separately. Each new request to the server will cause an endless reload of pages. But technologies are changing, single page applications can give user experience similar to desktop applications. SPA allows pages UI and its data to be changed without reloading the page. SPA tools such as React, Angular are great to provide better user experience with faster responses.
One of the greatest worries while building SPA applications is about search engine optimization. Most of the developers think that web crawlers of search engines will not crawl a page properly unless it’s completely rendered in the user’s browser. In the case of React-based websites, there will be nothing in HTML on the initial load. So, if the initially rendered HTML is not SEO rich, it may degrade the website ranking. Sacrificing users' time for good ranking is not at all a good strategy. We have to keep the user experience as good as possible and also the website ranking.
Server-Side Rendering in ReactJS
The best solution to have an SEO friendly website using react is to use Server rendering. Instead of loading contents after HTML loads, the server carries out all operations. The browser will get HTML with all information. After JS is loaded, the web turns into a “single page app” and works in the same nature. Server-Side Rendering will allow part of the code to be run on your server first. This means the server first obtains the data from API that is required to include on the initial page’s HTML. Then it will package those data and send this data to the browser.
And the client gets the initial page HTML with all required data. A client-side rendering SPA would have to start from scratch, but a server-side rendering SPA would be at a starting point where they already have all the data.
How to include meta/head tags in React?
Handling title and meta/head tags is a tricky thing in react. We have to define tags within the component. But they have to be moved on the document head on the client-side as well as server-side. There is a bundle of modules that supports setting meta/head tags in React components such as React helmet, react-meta-tags,react-document-meta, etc.
React meta tags
React-meta-tags is an npm package which allows you to write those tags in a declarative way and in normal JSX format.
Using id on tags helps replace of older meta tags with new ones.
This reusable React component will manage all of your changes to the document head. Helmet takes plain HTML tags and outputs plain HTML tags. It's simple and user-friendly for someone starting out on React.
Supports all valid head tags: title, base, meta, link, script, NoScript, and style tags.
Supports attributes for the body, HTML, and title tags.
Supports server-side rendering.
Nested components override duplicate head changes.
Duplicate head changes are preserved when specified in the same component
Building a react application that is utmost SEO friendly is a challenge. But it is not something impossible to achieve. With the right knowledge we can build SEO friendly react web apps.