After my blog came into a shape, a question came to me: how do I get my blog to be not just searchable on Google, but also provide meaningful meta-data? Few days ago, I did manage to submit my webpage to Google, so now the world’s most popular search engine does have my data. It was a simple process, all I had to do was to verify that this address (*.jshji.com) was mine. This is what Google’s search result shows currently:
Yes, just the text from my main page. And it hit me: how does the search engine will know about other pages of my blog, if my blog is a SPA (Single Page Application)? The short answer is it can’t.
Well but not really. There are work-arounds, and also Google has a smart bot that can kind of run the JavaScripts of a homepage to also include all the other information about the webpage even if some pages don’t really have its own page as a dedicated *.html file.
In case you aren’t super familiar with the concepts
Before:
Every single webpage has to be a separate file. For example, a website may consist of home.html, about.html, gallery.html, etc. files and they are ’linked’ together.
Now:
With the evolution of web, we can now change a part of a webpage using JavaScript. This means a part of, or the entirety of what you see on the screen can change without reloading another file. This has many benefits. For example, the user only has to retrieve the webpage once, and then that’s it, the server can call it a day and go home and rest, and the user’s webpage will still change dynamcially when the user clicks on something. Well, the server won’t just shut down right after sending the file in reality, but technically it could do that for some simple websites, like this blog. (You can simulate it by turning off your internet now, and you can still navigate through the blog, reading different posts, except you can’t load images.) Okay so this is it. This blog is an example of SPA, a single page application, because it is technically a single page, that can change its contents.
Google’s Perspective (Search engine’s perspective)
I may be wrong and I’m not an expert, but basically a search engine has a bot that travels through the web and kind of make note of every webpages out there. And when user searches something, it shows the relevant webpage. This works great with the traditional websites because each different page will be in Google’s db, as each page is scanned by it. But what about SPA? It can’t. When the bot sees my blog, for example, it sees the first page and thinks that’s it. It doesn’t know this post exists! That’s the general picture, and like i said, Google has a bot that can kind of run the JavaScripts of my blog and will also try its best to care about my posts, but there is no guarantee.
I didn’t know that!
Nope! Didn’t think about it! If I did, I may have chosen different approach in creating my blog. There are some workarounds though. There is a program that visits every page of an SPA, and genreate separate HTML files. So basically it kind of converts SPAs to the traditional webpages. And I think that’s about the only choice I have. This technology is called pre-rendering, and there are few pre-rendering packages available for react. The ones suggested on official create-react-app webpage are react-snap and react-snapshot, but none of them seems to be actively being maintained. Will have a look at it another time probably.
Future
Okay, but there is barely any contents on my blog right now, so I don’t want to worry too much about SEO (oh so making websites that can be easily found on Google and other serach engines is called SEO, search engine optimisation) right now. If worst comes worst, I can pick some other blogging platform or so, and just move my posts. Of course I’d prefer to keep this cute little blog. But still, I do want to have a look at SEO technologies. Visibility is the key!
I think I’ll probably switch to Svelte. I wanted to use Svelte at first too, but I couldn’t really figure out how to start and build a project.
Lesson
Again, lack of high-level planning. I mean these were definitely foreseeable, yet I failed. High-level planning is really important. This project is way too small to feel the need, but if a project gets a litle bit bigger, high level planning will make all the differences. Think before act, Jason, think before act.