JavaScript is an undeniable technology that is reasonable for most of the functionality of the modern web. As a result, JavaScript SEO is a base level requirement for most sites. The JavaScript technology that has been particularly challenging for SEO is the Single Page Application. Libraries like React, Angular and VueJS are all SPA frameworks.
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.
Video Transcription
Intro
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.
And I’ll talk about how web servers and websites and and browsers work in another video. But the bottom line is you get a response and then ultimately you get back HTML, CSS and JavaScript and then pages constructed and so on. But if you then click on something and then it loads another page, that whole process happens again where everything is downloaded, everything is restructured from the bottom up.
What happens in a single page application?
So in a single page application, what happens is there’s that same request and that response and you get that initial JavaScript, HTML, CSS. But what happens is you have a frame for the page. And so as you do subsequent clicks throughout the site or the application as it’s called, not the whole thing is being reloaded. So only the points in the content that change. And so what happens is called an AJAX request.
AJAX meaning an asynchronous JavaScript and XML. And so it’s asking the server for just the specific bits that have changed and then that’s ingested through that response and what’s called a JSON object. JSON standing for a JavaScript object notation. So basically it’s just a variable that comes back with a bunch of data that then populates that frame of the page and makes everything change.
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.
So the bigger point is that it’s invisible to search engines. And that’s why JavaScript SEO is a thing we got to think about like how do we serve this content in such a way that search engines can actually access it. And a large part of that is, you know, having States represented by URL so that when search engines traverse the site and they’re clicking on these links, they have access to all that content.
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.
Conclusion
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?
Leave a Comment