Apr 24, 2023 by Jordi Bassaganas
Let Crawlers Index Plain React Pages Without Next.js
By writing the static content in the public folder
Photo by Stem List on Unsplash
A reason why Next.js is often preferred over plain React is for SEO purposes. Unlike the single page application (SPA) paradigm where the server sends all of the application's code in one single HTTP request, with Next.js the HTML code of the page is generated on each request.
It is uncomplicated to find out whether or not a web app is an SPA or an MPA. Just visit the web page you want to inspect, right-click on it and then click on the View page source button.
If the source code contains a few dozen of lines with plenty of different
HTML tags such as main, article, section,
h1, h2, h3, p,
in other words, if there's search engine indexable content, chances are
it is a multi-page site. Instead, if the code contains few lines and
basically what it does is load one or more JavaScript files most likely
it is a single-page application.
chesslablab.com is an example of SPA using plain React.
Right-click on chesslablab.com and view the page source. The main page hardly contains any HTML tags.
To some extent, server-side rendering (SSR) with JavaScript pretty much resembles the classical multi-page web application (MPA) paradigm which has been out there for years. A main difference though in my opinion is that SSR with JavaScript is way more complicated than SSR with a classical server-side programming language like PHP, Python, Java or Ruby.
Server-side programming languages are easier to learn than Next.js. A great example is the Laravel framework for PHP which is a popular choice among web developers to create apps effortlessly.
But did you know there's a way for web crawlers to index the HTML content of a plain React app?
Let's say you're working on a non-indexable plain React app and want to write search engine indexable content for the About page while staying away from the intricacies of server-side rendering with Next.js.
Because you want to do things effortlessly.
In this particular case, create a subfolder called documentation
inside the public folder, and then write the HTML content
in a new file called index.html. Well, this is what I
did to get the content of chesslablab.com, which is a React app created
with create-react-app,
indexed by search engines.
The Documentation page contains lots of technical content intended for web developers. It is working quite well for keywords like chess api.
Right-click on chesslablab.com/documentation and view the page source.
The source code of the documentation page contains plenty of HTML tags. It is available in the chesslablab/website repo on GitHub. This approach works out quite well as long as the content to be indexed is static.
Thus, if you're a static site generator (SSG) developer who doesn't want to mess around with Next.js, or just feel comfortable with manually editing HTML files, you may want to write your pages in the public folder.
I hope this approach will be helpful to you.
Thank you so much for reading!