-
Bartosz StarygaFront-End Solution Architect, Magnolia
SPA SEO: Mission Impossible?
From Twitter and LinkedIn to Netflix and Google Maps, 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 this latest trend in digital experience, more brands are launching SPAs in place of traditional websites, eCommerce stores, intranets, online communities, portals, and more. But what they’re finding is that, unlike their traditional websites, their SPAs aren’t being crawled by Google nearly as well.
SPA SEO: What’s the Problem?
SPAs are not inherently friendly to search engines—but don’t take our word for it.
According to SEO expert Barry Adams, React-based SPAs (and other JavaScript-based SPAs), don’t play nicely with Google’s crawler.
“What happens when you use React without server-side rendering is that the crawler halts on the very first page because it can’t see any hyperlinks to follow. It sends the page to the indexer, which then has to render the page and extracts the hyperlinks, which will then be added to the crawler’s queue. Then the crawler will eventually crawl the next set of pages, and again will stop there because all the links are invisible until the JavaScript is rendered. So it has to wait for the indexer to come back with a new set of URLs to crawl,” Adams explained in a Medium article.
“It makes the crawl process incredibly slow and inefficient. And that is why websites built on React (and similar JavaScript platforms) perform worse in Google than websites that primarily serve plain HTML to the crawler,” he continued.
For the sake of speed, SPAs provide an empty shell of a page, which only gets populated with content when an Ajax call is made—i.e. when a human user loads the page via a web browser. JavaScript is then used to load the content itself.
The only problem in that scenario, is that Google’s crawler doesn’t always appreciate the extra work it needs to do in order to access your page(s), and the content they hold.
Simply put, a JavaScript-based SPA makes Google’s life more difficult for Google to quickly crawl your website. Some tests indicate that JavaScript is simply unreliable when it comes to search engine indexing.
To make matters worse, many SPAs are built without unique, search engine-friendly URLs, which makes it even harder for Google to crawl and index pages beyond the SPAs don’t have individual URLs for different areas or pages of the application.
However, there is good news; SPA SEO isn’t impossible, it’s just a little trickier than good old fashioned website SEO.
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 be quite as quick to load 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.
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 meta data should be rendered directly within the source code of the page; Page title, meta description, canonical tag, meta robots, and hreflang tags.
Internal Linking: Your SPA’s internal links should be embedded utilising link <a> tags as opposed to JavaScript onclick events. This helps enable search engine crawling.
XML Sitemaps: to ensure search engines can gain access to your deeper, more obscure SPA pages, ensure that you publish an XML sitemap.
Error Pages: Finally, don’t neglect your error pages, all of 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: Be sure to 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’.
