Would a single-page app be SEO-friendly?

SPA development’s SEO is notoriously murky. Depending on who you ask, crawling of client-rendered content is either totally fine, fine if it’s synchronous, or not at all fine.

Because of all these conflicting opinions, I see the question “Is my Vue SPA SEO friendly?””friendly?””friendly?”” pop up in places like the Vue.js Developers Facebook group and the Vue.js Forums.

Throughout this article, we will challenge popular opinions, perform some basic tests, and conclude with a few sensible recommendations for building SEO-friendly SPAs.

Note: this article was originally posted here on the Vue.js Developers blog on 2018/04/09

The issue with client-rendered content

With a single-page app, the browser receives no meaningful content but only a page shell. JavaScript loads the content on demand from the server via AJAX and then adds it to the page using Java.

By doing this, a user can view the “pages” of an SPA site without having to refresh the page, theoretically improving the user experience.

This architecture may work for humans viewing the page in a browser, but what about search engine crawlers? Is JavaScript supported by crawlers? Does this mean they will wait until the AJAX calls have completed before crawling the page?

Knowing this is important because it could determine whether or not a search engine can index the site’s content, and just as important, how well its content is ranked.

Googlebot

Our investigation should focus on Googlebot, the Google search engine crawler, since it is the most popular search engine in the world.

Googlebot crawled only static HTML pages in the early days of the web. Googlebot began crawling in 2014, but now attempts to render JavaScript before it begins.

For helping webmasters troubleshoot JavaScript-modified pages, Google provides the Fetch As Google tool, which displays a snapshot of what Googlebot sees at a particular URL.

One common myth is that Googlebot won’t crawl asynchronous JavaScript. This article has done a great job of busting it. TLDR; Googlebot will wait at least 20 seconds for asynchronous calls to complete!

How Googlebot sees an SPA

Vue HackerNews Clone 2.0 is the quintessential example of a Vue.js SPA. The Vue team provides this open source project as a way of showing off the capabilities of Vue and effective design patterns.

This application was deployed to a Heroku instance and executed using Fetch As Google. As shown below, the screenshot on the left shows a screen shot as seen by Googlebot, while the screenshot on the right shows a screen shot as seen by a user. Their appearances are identical.

Removing server-side rendering

Server-side rendering (SSR) is a key feature of the Vue HackerNews Clone 2.0. It means that, unlike a more basic SPA, the content for each page is rendered on the server and sent to the browser when the page loads.

Ultimately, we would like to understand how Googlebot perceives client-generated content. Therefore, I turned off the SSR and repeated the test:

Googlebot was able to view the content even with client rendering only. After a few days I also checked to see if Google had indexed the app. I found that:

But wait…

It seems that this test answers any concerns about client-rendered content, but there are some reasons why you shouldn’t have complete confidence in it:

  1. The Googlebot engine, like all JavaScript engines, is not infallible. There may be situations where it cannot render your page.
  2. It doesn’t mean that a page will rank well just because it can be indexed

Related Posts

A membership website’s SEO strategy

Marketers, publishers, and content creators have long utilized search engine optimization as a content strategy. The strategy is known for driving long-term results – by making your…

The purpose of SEO content writing

An industry worth 80 billion dollars is search engine optimization. Do you get what you pay for? Copywriting for SEO requires an understanding of analytics and high-quality…

Content Optimization: How To Choose The Right Keywords

You can attract organic traffic to your website by selecting the right keywords for your content. However, don’t be discouraged! Creating killer content is only half the…

You Should Know These 3 WordPress SEO Plugins

A website’s SEO is a multifaceted endeavor regardless of its type. It involves writing blogs and other web copy that is optimized for keywords, creating images with…

Factors that will affect local SEO rankings in 2022

A local SEO strategy boosts your website’s ranking in local organic search results. Your business will be more visible to users if your website ranks higher in…

How to Actually Show Up in Google Searches: A Guide for Personal SEO

What Is Personal SEO? The term “personal SEO” still isn’t that widespread. I think this is because SEO seems like a technical, complex subject to most people….

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.