SEO Considerations for Single Page ApplicationsChris Mann,
What is a Single Page Application?
Once loaded SPAs deliver users almost instantaneously loading pages, promoting a highly engaging browsing experience. From a developer’s perspective, SPAs allow for efficiencies to be achieved through a template driven approach to development.
While SPAs present a wealth of benefits to both users and developers, such frameworks can often create a mild sense of panic with even seasoned SEOs. This is due to the fact SPAs present a host of challenges when attempting to implement traditional SEO techniques.
SEO Best Practice
- "Sometimes things don't go perfectly during rendering, which may negatively impact search results for your site."
To maximise the SEO opportunities of SPAs it is recommended the following optimisation practices are implemented:
Utilisation of Serverside Rendering
If an SPA features serverside rendering, crawling / indexation issues can effectively be resolved before they arise.
- Angular 1.0 - requires third party tools or creation of custom inhouse scripts to enable serverside rendering, e.g. prerender.io
- Angular 2.0 - compatible with Angular Universal – a bespoke rendering service for Angular apps
- React - utilises render to string allowing it to return HTML strings directly on the server
Search Engine Friendly URLs
A unique URL should be served for all pages with a 200 status. URLs should be flat, clean and with no fragments (hashtags). Following the deprecation of Google’s AJAX crawling scheme hashbangs are no longer recommended.
It is recommended all key meta data is rendered directly within the source code of the page, supplementary to serverside render functionality. Key meta data should include the following tags (where applicable):
- Page Title
- Meta description
- Canonical tag
- Meta robots
Load Relevant Content Immediately
When rendering a page, search engines struggle to click buttons that trigger the loading of further data / content on a page. As a result, it is key all high value content requiring crawling / indexation is rendered in full on page load.
In addition to ensuring all links feature <a> tags it is strongly recommended core navigational elements such as the primary navigation are directly output within the source code.
The correct page header status should be returned in response to encountered errors. For example, a 404 header status should be returned if a user attempts to access a missing page, similarly a 500 status should be returned for a server error.
Given the inherent complications with crawling / indexation of SPAs, it is highly recommended an XML sitemap is published to provide supplementary access to all deeper level website content.
Implementation of the above best practice guidelines will help to ensure the significant benefits of SPAs to both users and developers can be realised but with the reassurance potential SEO constraints do not arise.
SPA's are more and more becoming the norm within website development however come with some potentially significant SEO issues, follow the best practice advice above to avoid losing rankings, and find out more about our SEO services here.