Single Page Application and SEO

In the beginning of 2016 i started to work to an ambitious project. This project was already developed as a minimum viable product but it needed a lot of new features, so i decided to start it from scratch.

In the early 2016 AngularJS was the framework i knew best (in comparison to React and others) so i adopted it to create the client side of the application in combination with NodeJS.

At that time Angular (2+) hadn’t been released yet (as stable version), so i thought that it could take a while before it would become a mature framework and i decided to use AngularJS.

Regardless of the framework or library you want to use if you want to implement a single page application you need to do client side routing. In the world of single page apps, there are two types of client side routing: push-state, and hash-based. Each of these have their strengths and weaknesses.

Now as you may know, most of the client side routing frameworks focuses on push-state routing, using the HTML5 History API and (sometimes) server-side rendering with Node.js. There are a number of reasons for this, the two main ones being:

Instead, hash-based routing works by only considering the part of the URL starting with the # character, which I’ll refer to as the hash. This vastly simplifies things for a few reasons:

So let me just put this out there:

It depends on the cases, so designing your new app with push-state or hash-based routing can be a very difficult choice.

Most pages of an app could be hidden behind a restricted (under login screen), and thus have at most one page which needs to be indexed by Google. In this case removing #/ from your page URLs is not a benefit. So push-state routing adds enormous complexity for little to no benefit, since your hash-based router can be implemented in less than 30 lines with React for example.

But for your landing pages for example adding the push state can be a great choice because you can take advantages of the server side to render the initial part of the page where for example you put your meta tags:

In this case we are using the client side routing for the user that would like to navigate our website, and at the same time when the website is visited from a crawler can serve different meta tags for each page.

Related posts:

I am a Singaporean which means that I have to take a fitness test every year as part of my national service. I just took it and here are the results: So I basically failed the test but I am not…

If you want to land a great JavaScript job or catch up on important tech for 2020 and important technologies in the new decade, this post is for you. The point of this post is not to tell you which…

Es imprescindible mantenerse al día sobre las corrientes de diseño, con tal de destacar entre la multitud y cautivar a la audiencia, que cada vez es más exigente. Después de haber leído lo que más…