Are single page apps killing your SEO?

October 15, 2019

SEO , Technical ,

0

A JavaScript-based website means that you need JavaScript code rendered/processed before serving the content to the web user and any User-Agent.

Traditionally, Google was only looking at the raw text-based content that we’d get in the HTTP response body and was unable to interpret what a typical browser running JavaScript would see. When websites started becoming more reliant on the use of JavaScript, Google initially was unable to read them and therefore unable to give them the benefit of their content in regards to search engine result page rankings.

In order to solve this problem, Google started developing the functionality to understand JS pages. Despite this advancement, even when a page is crawled and indexed properly, there is proof that sites that use large amounts of JavaScript can affect your rankings.

(Will Critchlow saw a significant traffic improvement after shifting from JavaScript-driven pages to non-JavaScript reliant.)

The outlook for JavaScript Based Websites

Angular is the most popular JS framework for Single Page Applications (SPAs). Google support and maintain AngularJS with a community of individual developers, whilst funnily enough, not being able to render large numbers of AngularJS pages.

In the following study, we’ll review Single Page Applications and similar technology rather than AngularJS to understand what you can do to make your angular site more visible in the SERPs.

List of popular JavaScript Frameworks

AngularJS is a very popular framework for Single Page Applications. Angular has been on the market for quite a few years and offers an impressive list of features that will benefit developers such as; two-way binding; templating; currency formatting; pluralization; reusable controls; RESTful API handling; AJAX handling, etc.

a chart showing which spa frameworks are supported by different seo functions

a chart showing that of all the search engine bots only google and ask can successfully crawl the single page app frameworks

Technically, SPAs don’t need to use any fancy framework like MVC, Ember.js, Node.js or AngularJS. It is, in fact, possible to build an SPA using only jQuery and HTML for the front-end display, but it’s not recommended for large websites where data is best managed by a powerful back-end CMS.

So what is the impact for SEO?

Today, Google is able to render a substantial number of web pages more like an average user’s browser with JavaScript turned on. But sometimes things don’t go perfectly during rendering, which may negatively impact search results of a site.

In fact, there is no search engine that can understand and process JavaScript at the level our modern browsers can. Even so, JavaScript isn’t inherently bad for SEO, it’s just that due care and attention needs to be taken to ensure that search engine crawlers get the full context of the pages easily.

John Mueller recently explained how Google indexes JavaScript sites in his newsletter.

“Google supports JavaScript to some extent. Google supports the use of JavaScript to provide titles, description & robots meta tags, structured data, and other meta-data. When using AMP, the AMP HTML page must be static as required by the spec, but the associated web page can be built using JS/PWA techniques. Remember to use a sitemap file with correct “lastmod” dates for signalling changes on your website.”

 

What is a Single Page App? 

A Single Page Application is a web application or website that loads all of the resources required to navigate throughout the site on the first page load. The idea behind SPAs is to create a smooth browsing experience like the one found in native desktop apps. All the necessary code for the page is loaded only once and its content gets changed dynamically through JavaScript.

A single page application is suitable for a simple site that doesn’t have too much data to load, because the data is loaded once, and all the actions are performed client-side. For example, a single luxurious villa holiday website would do the job.

Known tracking issues:

This type of application will often update the URL in the address bar to emulate traditional page navigation, but another full page request is never made. So, for a single page application where the site loads new page content dynamically rather than as full page loads, the analytics.js snippet code only runs once.

Some SPAs only update the hash portion of the URL when loading content dynamically. This practice can lead to situations where many different page paths point to the same resource. In this case, a website owner would require their analytics specialist to configure the tracking code to record virtual pageviews.

Known indexability issues:

The site’s content is not indexed by Google – as explained above, Google’s indexing system does process JavaScript but some issues may need to be fixed to make content accessible.

For example, if you are using new browser features like the Fetch API, ensure that they are polyfilled in browsers without support. “Polyfill” is actually a browser fallback, just like a JavaScript library that brings a new API to an older environment, using only the “means of that environment.”

To test how Google renders your SPA page, simply use the Fetch as Google tool, found within Search Console, to get a preview of what Google will see.

Progressive Web App (PWA)

A Progressive Web App (PWA) offers the benefits of a natively installed app, minus the app store.

The terms progressive in this context means it works for every user, regardless of browser choice because it’s built with progressive enhancement as a core functionality. A PWA has to have a responsive UI which means it fits any form factor; desktop, mobile, tablet, or whatever is next. A PWA doesn’t necessarily need to be SPA, but can be multi-pages if developers put additional efforts to create custom URLs.

This technology shows two specifications that are particularly interesting for the future of SEO & UX:

  • PWAs run faster and perform smoother than mobile websites, which gives them an edge with impatient mobile users.
  • Users can access PWAs more reliably than traditional mobile websites. In an offline environment, PWAs employ service workers to act as a proxy server, allowing you to pre-cache all the resources you’ll need. This means your app continues to work in an offline environment that is exactly when people needs it the most (planes, undergrounds, etc.)

PWAs are SEO friendly as long as they follow a checklist of best practice and don’t take the form of a SPA. For best SEO practice, PWAs should use the History API to reproduce a sort of URL trail instead of page fragments that use Hashbang (#!). For example everything after the #! in https://example.com/#!user/26601.

Available Solutions

Because all the code is loaded only once in a Single Page Apps (SPA), search engines cannot assess page content quality, neither assign properly any page quality score to that webpage (or ‘PageRank’). In other words, Google know the existence of the page since they have the ability to discover it through links, but can’t really say if the copy on that page is able to respond to accordingly to the search intent.

At Harvest, we have investigated different workarounds below to run SEO-Friendly Single Page Apps (SPA). Some options may involve Dev resources and/or additional third-party tool costs.

Host a Sitemap

Overall, sitemaps are particularly helpful if a website site has pages that aren’t easily discovered by Googlebot during the crawl process — for example, pages featuring rich AJAX or images. Even though this is only a partial solution it worth deploying an XML sitemap (if not done yet) on your website. With this sitemap, search engines will be able to follow links and then discover pages. However, a sitemap won’t solve difficulties regarding page content crawl & indexing. In other terms, webpages will appear in Google (essentially) but may appear not to have content in the SERPs if using heavy JavaScript frameworks.

E.g. – Checking Google’s cache for an SPA that only deployed an XML sitemap (but no other solution) tell us that their indexed pages are content empty:

a screenshot of the google search listings showing that cafe rouge has been cached by google

a screenshot from google search console showing that cafe rouge cannot be displayed and the site is not crawlable

Build Custom URLs (Dev Resources)

Depending on the JavaScript Framework, SPAs like Ember.js can be tweaked/optimised to serve custom URLs through dynamic segments. In the case of Angular.js, it will require attention from the developer to configure the location mode to HTML5.

BromBone

BromBone automatically downloads all of the pages from the sitemap.xml then uses a proxy to send HTML pages to search engine bots. No need to install any software.

  • Type: HTML pre-render
  • Dynamic/Static update: Dynamic
  • Deployment easiness: Easy
  • Cost: $129/month
  • Resource: http://www.brombone.com/

Prerender.io 

Prerender.io requires a manual upload of the sitemap.xml and will do the rest. Smaller sites (up to 250 pages) can use Pre-render for free, while larger sites (or sites that update constantly) may need to pay as much as $200+/month. However, having an indexable version of your site that enables you to attract customers through organic search is invaluable.

  • Type: HTML pre-render
  • Dynamic/Static update: Static
  • Deployment easiness: Very easy
  • Cost: $200+/month
  • Resource: https://prerender.io/

 

Conclusion

Will we be seeing more Dynamic JavaScript sites in the future? It is certainly possible. Even with traditional, multi-page sites, having solutions that make development and testing of those sites quicker and easier is always going to be welcome and appealing.

With more and more web designers and developers turning to these JavaScript-powered solutions, we can also expect them to become even easier to use as a whole – which is ultimately great news for everyone looking to design and develop rich web experiences.

Comments are closed.