Creating single page applications and the SEO knock on effects
Why create a Single Page Application with WordPress?
WordPress is a free open-source website creation platform. At Twilo we use WordPress as the base platform to develop a number of our websites that are not E-commerce. We custom build (from the base up) unique themes for each individual client’s website, and WordPress acts as a Content Management System (CMS). This allows our clients to log in to an admin area, update pretty much anything on their website, manage pages, update services, everything you would expect from a CMS. This gives our clients the freedom of a self managed website.
A Single Page Application (SPA) is an application, or website, that allows the user to navigate around the website by dynamically loading in content as the user’s actions request it.
When a user clicks on a link to load a page, a traditional website would refresh the page and load in entirely new page content. A SPA would instead replace content specific to the previous page with content specific to the new page, without refreshing the page at all.
The seamless user experience, with new pages loading much faster than a traditional website, is the reason we want to create a SPA with WordPress.
Single Page Application with Headless WordPress
Single Page Applications are commonly built using JavaScript frameworks, such as Angular, React or Vue. They are more commonly used for applications, tools, dashboards and other similar pieces of software. They’re also useful for more standard business websites is in their infancy.
In our case, the front end framework (built in Vue) would fetch the website content by communicating with WordPress via its built in REST API (Headless WordPress*). When we need to fetch some content that has been stored in the database by WordPress, we make API calls via AJAX requests to endpoints, and WordPress will return the data. We can then process this data and use it to display our page.
Starting from scratch you could manually create all the required API calls, or alternatively, you could use one of the many plugins that have been created to do some of the heavy lifting for you.
*Headless WordPress refers to an installation of WordPress that removes all front-end tools. The is commonly referred to as decoupling the front-end and back-end. What remains is the admin area of WordPress, basically the CMS.
What are the impacts on Search Engine Optimisation (SEO)?
If you have any experience in SEO you probably have a few questions about how serving your website as a SPA can impact your SEO or Google ranking. Unfortunately today the news is not all good – SPAs are not inherently friendly to search engines. SPAs are fantastic for users, but the methods used to fetch content make it quite awkward for search engine spiders to crawl.
Google has made good progress in this area, and can crawl applications built in React or Vue, however the consensus still seems to be that a traditional website would have a better chance of ranking higher.
That is not to say there aren’t strategies that can be used to improve SEO. The basics including SEO-friendly urls, meta data, internal linking, image alt tags and XML sitemaps should always be implemented.
There are also more advanced techniques such as server-side rendering or pre-rendering your application, both of which convert the SPA into a more crawl-able format. Unfortunately, this does come with the sacrifice of some features of your SPA.
What do we take from this?
The importance of SEO should be considered before building a website as a SPA. If search engine ranking is beneficial to the website’s goals, it’s probably still too early to consider building the website as a SPA, and more traditional methods should still be used. If the website doesn’t need to benefit from search engine ranking then no problem, get experimenting!
