Insights from Our Experts
SEO tips 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 was will cause endless reload of pages.But technologies are changed, Single Page application can give user experience similar to desktop applications. SPA allows pages UI and its data can 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 worry 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 case of React based websites, there will be nothing as HTML on initial load. So if the initially rendered HTML is not SEO rich it may degrade the website ranking, sacrificing users time for getting a good ranking is not at all a good way of thinking. 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, all operations are carried out on the server and the browser will get HTML with all information. After JS is loaded the web turns into a “single page app” and works respectively. Server-Side Rendering will allow part of the code to be run on your server first. This means the server first obtain the data from API that is needed to be included on the initial page’s HTML, and 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 those tags within the component, but they need to be moved on document head on the client side as well as server side. There is a bundle of modules which 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 dead simple, and React beginner friendly.
- Supports all valid head tags: title, base, meta, link, script, noscript, and style tags.
- Supports attributes for 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