In this episode of Rank and File, I break down how Single Page Applications work and why the impact SEO in efforts to help you better understand the problem and what to look for.
Greetings and salutations, ladies and gentlemen. welcome back to another edition of Rank and File. I’m your host, Mike King, founder and managing director here at iPullRank. So today I want to get back to basics. One of the things that I do with the team is the session that we call atomic SEO. Really break everything down to the basics so that we can build up our understanding even more. So today I want to talk about single page applications and how they work.
How do traditional websites & apps work?
First, how does a traditional website work as far as like how it loads and so on. Basically the client or your browser makes a request to the web server and then there’s a response. So when you talk about response codes that is involved in that response, that HTTP response. And so what comes back with that is HTML. And then also the HTML gets parsed and so on.
What happens in a single page application?
Pros and Cons
So a couple pros and cons here. One, pros, it’s way faster than just downloading everything. And then reloading the entirety of the page. And then also it allows for what’s called component driven design. So you’re designing around the different pieces of the page rather than having to like design a whole page every single time. And so those components get populated with different variables and different data points in different content to make that adjustment.
Cons here, completely invisible to search engines. You know, whenever those changes happen, engines aren’t necessarily operating in the exact same way as a user and so if they have to do a user action for to make that change, they’re not going to see that content. And it kills the back button. And so that’s actually indicative of a bigger problem in that the URL state isn’t necessarily managed by the browser.
So you can have all these states change to the page but the URL could just not update. Now there’s a lot of frameworks out there like react and so on that really manage the updating of the URLs for you. There’s the history API, there’s a lot of ways around it. There’s push date and so on and so forth. But it still messes up the back button. And think about all those times where you’ve hit back on a tool like whether it’s TweetDeck or something like that. And it doesn’t go back the way that you expected. It takes you to the beginning of what the state of the page was and it’s pretty annoying.
And the other part is of course server side rendering because this whole process, typically what server-side rendered is just the frame of the page, not all the content. And then there’s a later AJAX requests that will then fill in that content.
So these are the key reasons why single page applications become problematic for SEO. And I hope that’s helpful in getting you more understanding of how they work and why it’s something that you need to account for in your SEO. So thanks for watching and I’ll see you tomorrow.
Now, over to you, what are some of the challenges you’ve encountered with Single Page Applications?