TLDR: Our platform, which can be found at https://platform.intervee.io, is written using React; we spent a few hours researching and optimizing it for Google Search Engine, and I want to share some helpful hints with you. The article is about React, however, the post presented here is equally applicable to Vue, Angular, and other frameworks as well.
For a while, I explored search engine optimization (SEO) and how to get the website to show up in Google results for a number of distinct queries.
There are many other strategies, but the most common one is to produce a large quantity of high-quality material, such as blog posts, articles, and so on.
When you’ve finished creating some material, the next step before promoting the content is ensuring that Google is informed of it. It might take some days for Google to index your website completely.
Now, let’s see whether Google has crawled the website, which has two sub domains:
However, platform.intervee.io (the React site) has a lot more content but got only 91 results. Google found only 10% of the site!
A lot of sites are written in react. Does it mean that Google can’t parse their content and links?
What is the difference between React and WordPress?
A WordPress site implements a classic approach of MVC, in which the view (the frontend) is sent in one big piece to the browser. It is often possible to read the site content without javascript. It’s not a precise definition of an MVC app, but good enough for this post.
React, on the other hand, renders the content during the loading, may request additional data during the execution, and relies on javascript. Without javascript, you can’t use/read React websites.
How Well Does Google Crawl JavaScript?
Very good, although with “limitations” that might lead to difficulties in the future. It is important that you be conscious of these limitations. It seems that I have made a number of mistakes with my website; so make sure you don’t repeat the same mistakes yourself.
I would first suggest using the Google Search Console, which includes a tool called “Url Inspection” that explains how Google reads and parses your website.
All the boxes are empty. Content was not loaded.
Problem 1 – loading time:
There were situations when my site was quite slow (10 seconds loading time). It is bad both for Google and users, but for some unknown reason, it only happened 1% of the time, and that 1% of the time was when Google accessed the site. Users were not affected by it, and neither do I, so it is easy to miss such a bug.
Solution:
In Intervee we implemented a custom caching mechanism that suffered from a “cold start”. This is very common and well known in a serverless architecture.
It is recommended to benchmark your website at different times of the days, especially after a long time of inactivity.
The loading time should always be below 3 seconds.
Problem 2 – Use links, not buttons.
Google crawler finds pages on your site by parsing the tag, looking for the href parameter.
Intervee however, used many buttons with onClick + document.location.
So google missed a lot of important pages.
Solution:
Use A tag for links when possible and Buttons for other actions.
It can seem like a simple solution, but it has a significant effect.
Problem 3 – I used the HashRouter module.
If you aren’t familiar with the term “React Router,” you can read more about it by clicking on the following link:https://reactrouter.com/
The React Router is useful when you need to add several pages to your React Website.
React app is a single index.html page. How is it possible for it to support many pages?
There are two tricks:
1. Using hash URLs (/index.html#page1). The hashtag tells the browser that you are still on the same page, but the javascript code can read its value, so It’s like providing the React app with certain parameters. In this case, you pass the parameter page1 to React, so React Router can read its value and load the component related to page 1.
2. Using regular links (/page1, /page2). Note that your browser will load a different page, so your web server will need to be configured if you use regular links (/page1, /page2). The web server must be informed that /page1 is not the real /page1 URL but rather index.html with an additional parameter.
I chose the easy approach – HashRouter.
That means that the links in the site look like /index.html#link1, /index.html/#2, etc. I found that Google treats all those links as the same page, and as a result, it does not load them.
The results – missing pages.
Solution: You will need to configure your web server and use the usual BrowserRouter along with the regular links.
Problem 3.1:
When using BrowserRouter, does each link cause the page to be reloaded? If the response is yes, the user’s experience is negatively impacted.
Let me explain:
Because we were already on the page we saw when we clicked the link that said “a href=”/index.html#page1, the browser did not prompt a page refresh. Then clicking on the link is smooth for the user.
On the other hand, with regular links, the browser will be sent to a new page. The browser doesn’t know that your webserver will deliver the same index.html page, so it initializes a new request.
To understand the impact, I tried clicking on the link and monitoring times.
When any of the links on the website was clicked on, the page was immediately refreshed. I use the Chrome developer tools to inspect the network requests, and there is not a single outgoing request.
How did the page load without additional requests?
In the code, I used the Router Link tag , which rendered “A” tag.
Let’s have a look at the React Router Link source code:
https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/index.tsx
It seems that an onClick handler prevents the default behavior of the tag and uses a custom behavior instead.
To verify this – I performed a quick test: using dev tools (inspect element) I changed the href to point to a different URL. I clicked on the link, and – nothing was changed. The correct link was reloaded while ignoring my changes.
Since I am currently improving the website, other modifications, such as the implementation of SSR (server-side rendering), will take place in the near future. If you’d like, I’ll write a follow-up post to this one.
Additional recommended material:
https://www.youtube.com/watch?v=3B7gBVTsEaE
If you want to challenge yourself, start here:
https://platform.intervee.io/challenges
We will add a React challenge next month