-
Bartosz StarygaFront-End Solution Architect, Magnolia
SPA SEO: Mission Impossible?
Magnolia in action
Take 12 minutes and a coffee break to discover how Magnolia can elevate your digital experience.
Single Page Applications (SPAs) are reshaping web development as the digital world is continuously changing and becoming more demanding. SPA is a type of web application or a website that interacts with the user dynamically, and rather than the traditional method of reloading the full page from the server at each interaction, it only requires an initial loading, and all further interactions happen without any more requests to a server for more HTML.
By dynamically updating the page's content, users don't have to wait for a whole new page to load, and this translates into a better user experience and faster navigation through the website, comparable to desktop applications.
Popular among web developers, preferred by users, but a challenge for SEO professionals. SPA SEO isn’t impossible if you implement it wisely and apply the best practices recommended by Google for improving JavaScript web apps for Google Search.
From Google Maps, Spotify, and LinkedIn to Netflix and GitHub, single-page applications (SPAs) are changing everyday customer experiences.
End users have now come to expect app-like experiences, even through their desktop and laptop web browsers.
To keep up with the latest trends in digital experience, more brands are launching SPAs instead of traditional websites, ecommerce stores, intranets, online communities, portals, and more. Initially, SPAs weren’t being crawled by Google nearly as well, but in 2024, Google Search runs JavaScript with an evergreen version of Chromium, and SPAs no longer face this problem. However, Google recommends a few best practices for improving JavaScript web apps for Google Search.
Which search engines can index SPA websites?
Unfortunately, apart from Google, no search engine has made any notable efforts to understand better and render the content of SPAs.
Google has improved significantly in executing JS and can index many SPAs just as well as static HTML files. There are a few ways in which you can aid Google in better index SPAs: Server-Side rendering (SSR), pre-rendering, hybrid rendering, and proper use of pushState.
SPA: The Go-to Guide for Marketers
Go headless with no limits for your marketers. Enable marketers to edit the structure, layout and content of a fully headless SPA (Single-page Application), directly in the Magnolia Page Editor.
Server Side Rendering: How to Optimize Your SPA for Search Engines
With server-side rendering, SPA SEO suddenly becomes far less daunting.
Server-side rendering (SSR) enables Google to index and recognize pages within your SPA.
SSR involves rendering a normally client-side-only single-page app (SPA) on the server and then sending a fully rendered page to the client. This means that the site’s content can be crawled, even if the crawler is unable to execute JavaScript code. Plus, social media platforms like Twitter and Facebook can read the page’s metadata more efficiently, allowing them to extract content and images for previews within their platforms.
The only downside to SSR is that it won’t load quite as quickly as a normally functioning SPA. SPAs generally leverage client-side rendering (CSR) for optimum speed, but you will need to trade some of that agility for the SEO boost you’re looking for.
Angular-based apps can leverage Angular Universal, Angular’s native rendering service. React-based SPAs are also SEO friendly, as they can utilize ‘render to string’ or popular libraries like Next.js, allowing them to return full HTML directly on the server.
Javascript SEO: Useful techniques
Describe your page with unique titles and snippets: Create unique and descriptive <title> elements and meta descriptions to help users find the needed information. These elements can be dynamically updated with JavaScript.
Compatible code: Developers should know that Google may have limitations on which browser APIs and JavaScript features are fully supported. Check if your code is compatible with Google in the guidelines for troubleshooting JS problems.
HTTP status codes: Googlebot uses HTTP status codes to determine if something went wrong when crawling the page. Guide Googlebot's crawling and indexing by using relevant status codes. If a page doesn't exist, return a 404. For pages behind a login, use a 401 status code.
Don’t Forget the Basics
What you don’t want to do is get so caught up in the SPA SEO technicalities that you forget about the basics.
So, once you jump through the server side rendering hoop, here are some more SPA SEO hoops to jump through.
Content, Content, Content: As we mentioned in our enterprise SEO blog post, your content should be your SEO differentiator. Sure, you may not be using your SPA to publish lengthy blog posts and text-heavy landing pages, but that just means you need to think even more carefully about keywords, header tags, and link building.
SEO-friendly URLs: Just like with a normal website, you’ll want to give each page within your SPA a unique, easy-to-read URL slug.
Meta Data: The following pieces of metadata should be rendered directly within the source code of the page; Page title, meta description, canonical tag, meta robots, and hreflang tags.
Error Pages: Finally, don’t neglect your error pages, which should return correct page header statuses in response to errors. So, a 404 header status should be returned if a user attempts to access a missing page, whereas a 500 status should be returned for a server error.
Alt Tags for Images: Since many SPAs are image-heavy, make it a priority to give each image relevant, keyword-dense alt tags.
Running Regular SEO Audits: Regularly check and re-check your content for errors, broken links, missing tags, etc. Using the Magnolia SEO module, you can audit your pages to discover any flaws in your SEO strategy.
To recap, if your company is preparing to launch a single page application, be sure to talk to your developers about server-side rendering to ensure Google can easily crawl and index every SPA page you publish. Then you can get back to the basics—and hopefully to the top of page one.
To learn more about SPAs from a marketing perspective, check out, ‘The Definitive SPA Guide for Experience Makers’. Remember to choose the right CMS for single page applications.
