Docsify.js single-page apps are indexable on Google!

I recently got LUME docs, a single-page app, on real URLs instead of hash-based routing.

As an example, the Docsify site currently uses hash-based routing:

https://docsify.js.org

When you click an item in the sidebar, the URL will change to something like https://docsify.js.org/#/quickstart with a /# in the URL.

Hash-based Routing

Since the old days, anything after the hash was dynamically modifiable with JavaScript and people took advantage of this to implement "single-page apps" with URL navigation that way. Clicking on a link would dynamically update the URL hash and the page's DOM without actually re-loading the whole site.

History-based Routing

Eventually browsers added the History API to make it possible to dynamically modify normal URLs without using a hash. As an example, clicking on a link in the LUME docs sidebar will take you to a hashless URL like https://docs.lume.io/guide/scene-graph.

SEO

Using Docsify's routerMode: "history" option switches from hash-based routing to history-based routing, and Google can see and index the dynamically-loaded content.

Here is a Google search result for specific text that Google has so far indexed from the LUME site.

Google has not indexed everything on the site yet as of this writing, and it is a slow process; I just started over a week ago.

In Google Search Console, I can see what Google sees:

Yay!

This is awesome!

It means we can publish static websites that are single-page apps, without needing any build steps, without needing any build tools. The LUME docs site is just an HTML file with JavaScript, served from Vercel's static web hosting. There is no backend, and none of the HTML pages are pre-built.