Best Practice: OnePager/SPA with History-API and full SEO with KirbyCMS

Currently, I’m looking for a rock solid solution to have a OnePager/SPA (SinglePageApplication) with perfect deep linking (without any hashtags on HTML5-Browsers) and SEO.

Kirby is used to managing a “normal” page setup with – let’s say – 2 to 3 main pages (visible in the panel home). Every MainPage has multiple ChildPages. The Homepage is used to load and control all MainPages and its ChildPages via Javascript in a OnePager or a kind of SPA. the Homepage itself just reference the MainPages and has no further content.

Maybe-Solution: Using Kirby Routes:
First, I thought about using Kirby Routes and I have to say it was really easy to config Kirby in a way, that all MainPages and ChildPages are redirected to the Homepage. To keep the requested URL in the address bar of the browser I just had to use “site.visit” instead of “go”. From this point, it is no problem to initialize the SPA and display the requested content via Javascript for the humanity.

Hello I’m a SearchEngine-Bot:
With that maybe-solution in mind: If a Search-Engine-Bot (Bot) came along - it will first crawl the homepage and will find the references to the MainPages. It will follow the first link and - BOOM - it will find the homepage at this MainPage-URL again. At this point the Bot is lost in infinity and no content will be ever indexed again.

There are Bots and Humans:
That is the crux. Now there are new solutions to work that out. Here are some of them i got in mind:

  1. MainPages and ChildPages will be all using the default-template, if there is no specific template available. Only having the default-template available, it is possible to dynamically write the correct content using PHP in the default-template, by using snippets instead templates for pages, should do the trick. The bot will be fed up with the URL-specific PageContent and a user will experience a great SPA, which always will be initialized in the browser within the default-template.
  2. Every page uses its specific template. Every template has a piece of Javascript code, which will redirect to the Homepage by adding the requested URL via hashtag. Within the SPA I can instantly remove the # from the browser-address-bar to have a clean URL.

What do you think? I would like to hear your opinion and solutions.

Best regards


Kirby 2.4.0, currently in beta, has a new feature called Content Representations. Check it out.