Search Engine Optimization in Reactjs — Part one
Many web developers choose Reactjs with single-page applications for their web development. However, many people not take Search Engine Optimization in their website seriously. In this article, we first discuss some good practices to improve our page rank. Then, we will discuss some React Library or techniques to improve our SEO ranking.
How Google scores your website
Google has its unique algorithm to rank every website, however, they do not provide all the details about how the algorithm works. I have been collected and combined some information from a different source, including the documentation from Google, the common features which is every high ranking website contained, documentation from W3C and COMMON SENSE :).
Google Lighthouse
Google Lighthouse is an open-source tool letting web developer to test their website. The tool will suggest how the developer to improve the website in the fields of Performance, Accessibility, Progressive web apps, and SEO.
Those four fields we will consider as four main directions to improve our page rank (SEO is one of a condition in the Google page rank)
More details about the Four Directions
Performance
Performance determined whether the user will be your web viewer, Some research finds that 35% of respondents say they are willing to wait 3-5 seconds for an e-commerce website page to load, in order words, we may lose that customer if our webpage is loading too slow.
Accessibility
Google does make Web Accessibility as one of the conditions for page ranking. Web Accessibility aims to let disabilities to enjoy web browsing. Also, Web Accessibility also makes Google Spider catch your website much easier.
Progressive web apps
This is a new web development trend nowadays. People seem not to download the new mobile app while downing required more steps and annoying. Progressive web apps seem to replace some non-native application which is the apps that used to show information or news.
SEO
Here, SEO means how is the data presented in the web and the use of HTML Tags in the source code. For example, the website should contain metadata (<title>) (in the old way), different heading tags (<H1>), and paragraph (<p>) tag. Google will also consider whether the website content is irrelevant beside of the topic.
Ways to improve your react app SEO
Use common High-level domain
Most of the website use .com for their website top-level domain. You should host your website in another’s company subdomain i.e. YOURWEB.wix.com. Google and another search engine will consider this is not original valuable content.
Make your domain name shorter
Short domain name not only makes people to memorize much easier, not also increases your website ranking. Since there are many span website with a very strange domain name for the internet attack. wannaCry kill switch (ifferfsodp9ifjaposdfjhgosurijfaewrwergwea.com). Those strange domain names make the antivirus software hard to detect. Google will also consider the short domain name website is much safer than the longer one.
Use a stable and fast web hosting
As Google lighthouse mentioned, the speed will be considered as one of the page rankings criteria. If you use Google Cloud for your web hosting. It is certainly a bonus. I suggest develop could use Google Firebase as the web hosting service. Since it is a serverless web hosting service, the developers can focus on their code and let Google handle other things.
Also if you use another web hosting, be aware of the server location. if your target clients are in North America, then your server may be placed in North America. Shorter client and server distance will make the first meaningful paint faster.
First Meaningful Paint (FMP) is one of six metrics tracked in the Performance section of the Lighthouse report. Each metric captures some aspect of page load speed.
For more information about FMP, there is an article from another medium user
Google Search Console
Search Console tools and reports help you measure your site’s Search traffic and performance
Users can link your domain and website into the search console. After your domain is linked, you can view your web traffic, search analytics and submit your sitemap. You can also know how your website was exposed in the search result.
In the console, we can submit the sitemap letting Google to index your website. The index makes the search much efficient for fetching your webpage.
Use React router [react-router]
React router is a package to implement routes in your react app. For a single page application (SPA), Router is a very important metrics to let Search Engine Spider fetch your website. If your website doesn’t contain any routes, i.e. every webpage with the same url path: https://my-web.com , Google cannot provide a search result to the user.
The best practice is to make your web become router-based. For the login page, the path may be https://my-web.com/login . For about page, the path may be https://my-web.com/about.
For more information about React router, I suggest you may take a look for this article:
Breadcrumb in React router
We should make our routes like a Breadcrumb. Breadcrumb make your web look structured and the Search Engine Spider can index your website much easier.
Use React Hammer [react-hammer]
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
For handling the meta tag in SPA, Using the React Hammer package is a good choice. The meta tag is important in the SEO by providing a short description to the Search Engine Spider. Make a search result more accurate.
We will teach you how to use React Hammer in your web app in the next article.
Use React Router Sitemap [react-router-sitemap]
Before submitting a sitemap to Google Search Console, we need to build it. Since our contents may dynamically and large, we cannot hardcode our sitemap. Using this package to generate our sitemap is the fastest way.
See this article to know how to generate our react app sitemap
In the next article, I will introduce how Google fetch your website from your HTML code
If you love this article, please give us a clip👏🏽 and follow our pages
react-router-sitemap
