Single Page Applications (SPAs): How to Get Around the Tricky SEO Impact

You’ve probably interacted with AngularJS numerous times, without even realising it. AngularJS and other react-style frameworks are slowly taking over the internet. To name a few popular sites currently using the technology – Upwork.com, Udemy.com and Youtube.com.

You definitely recognized the last one, nowadays a lot of people spend numerous hours each week scrolling through the latest YouTube video clips. And you would agree that using the YouTube website is a pleasant experience. 

Angular JS SEO

React-style frameworks create a more streamlined web experience for both the site users and web developers.

What Is A Single Page Application?

Firstly, Single Page Applications (SPAs) and Single Page Websites are not the same thing. SPAs are web apps using dynamic updates to load a single HTML page and update information as the user interacts with the website or app.

With the use of HTML5 and AJAX, Single Page Applications create a fluid and responsive experience, without constantly reloading the page. Also, the JavaScript updates happen on the client side.

How Single Page Application Work

Traditional websites load each individual page while the user navigates through the site. This includes calls to the server and cache, loading of resources, and page rendering. SPAs cut out a lot of the back-end activity by loading the whole website when a user lands on any of the website pages. This means that a single HTML page is updated dynamically while the user interacts with the website.

How Does Single Page Applications Impact Web Crawlers?

The biggest benefit of Single Page Applications, is that the user has a streamlined speedy interaction with a website. Web developers also enjoy using it, with an effective universal template that allows for easy customization, testing and page optimization.

But the downside of an Angular or React site, is the SEO challenge. With all the data hidden in the background, it’s not only hidden from the site visitors, the Googlebots can also not access the information.

The Google crawlers rely extensively on HTML/CSS data to interpret and render site content. If the HTML content is hidden behind the site scripts, the crawlers have no content to use for indexing to list a website in the search results.

According to Google it is possible to crawl JavaScript and with a few SEO tests their claims are true. But the Googlebots still seem to struggle with most sites built on a Single Page Application framework. Oftentimes the only search engine results page (SERP) that appears after a crawl of the website, is the homepage.

The other issue that arises, is capturing Google Analytics data. The data is tracked by collecting pageviews when a user navigates from page to page. Without the usual HTML response trigger, the pageviews can’t be collected effectively.

A Five Step SEO Solution for Websites Using Single Page Applications

These steps will assist you to index pages for search engines, as well as rank on the first page of search engine results for specific keywords. Firstly, you need to create a list of all the site pages. Next you must install Prerender and activate the “Fetch as Google” feature. Thereafter the Google Analytics must be configured. Lastly, the site needs to be “recrawled”.

Step 1: Create A List of All Your Site Pages

If you’re thinking “this will take me ages to do”, grin and bear it, in the end it will be worth it. You might be lucky and all you need to do is export an XML sitemap for your site. Even if you have hundreds of pages, this task will help you to create a reference guide to consult while indexing your site. The list will also help to pinpoint any issues that might pop up during SEO optimization.

Tip: divide the content into sub directories, instead of listing individual pages.

Step 2: Install Prerender

This is a crucial element for effective SEO on a website operating on a Single Page Application framework. The Prerender service renders your site in a virtual browser. Next it provides web crawlers with the static HTML content.

With this solution you are getting the best of both world. Your users can still enjoy the speedy SPA experience and the search engine crawlers are happy with the indexable content for effective search results.

View Prerender’s pricing

Step 3: “Fetch as Google”

This is a very handy feature in the Google Search Console. You can enter a URL from your website and fetch the data in the same way a Googlebot would while crawling your site. Selecting “Fetch” will provide you with the HTTP page response, including a download of the source code, the way that a Googlebot interprets it. The “Fetch and Render” option offers you a page screenshot, showing you how Googlebot and site visitors view the page.

Even though Prerender can improve your site indexing, sometimes Google still displays some pages only partially. Or key features might not be featured. By using the “Fetch” or “Fetch and Render”, you can also assess the keyword rankings. Furthermore, you can use the “Request Indexing” option to improve the search results.

Step 4: Configure Your Google Analytics

Because Google has trouble fetching Google Analytics data from a Single Page Application framework, you need to use an alternative method in addition to the traditional tracking code.

Use the Angulartics plugin to replace the standard pageview tracking with virtual pageview tracking. The plugin tracks the user navigation across the entire site. It compensates for the SPAs loading HTML content dynamically, by creating a virtual version of the traditional Analytics tracking.

Another option is to use the Google Tag Manager “History Change” triggers. The biggest challenge is to make sure your Google Analytics record the user interactions with your pages, replacing the pageviews method.

Step 5: Recrawl Your Site

Once you have completed steps 1 to 4, you need to manually check that all the possible crawling errors have been removed. Prerender is a handy application to use, but sometimes a few technical hiccups can still pop up.

Storyteller Design Can Assist You with SEO Ranking for Single Page Applications

We’re not going to lie to you, the SEO process for a Single Page Application site is very tedious and troublesome. But luckily you can make use of our professional SEO services to take care of it for you.

We have the tools and knowhow to tackle this process on your behalf and make sure that you can offer site visitors the dynamic SPA interaction experience on your website, while keeping the GoogleBots happy.

Take our free SEO audit now.