With PWAs, you get native-like interactions, push notifications, and home-screen installation. But it’s only part of the picture. In addition, distribution is much easier with standard web-like linkability, shareability – and no-app-store distribution.
We’ve asked experts from the Elephate SEO agency about their findings and recommendations regarding PWA SEO techniques.
After conducting a series of experiments with the modern JS frameworks vs Google, the findings they presented are really interesting:
1. The fate of Chrome 41
Google parses and renders JS but with heavy limitations – it uses a headless browser based on Chrome 41 (2015’) … If you’re using modern Ecma Script specifications (as most devs currently are) your JS probably should use a lot of shims/fallbacks to provide the same code/links structure to the Googlebot. The worst part is – it’s hard to say which elements will be successfully interpreted and indexed by Google, and which will not.
Unfortunately for PWA app developers, in Chrome 41, interfaces like IndexedDB and WebSQL are disabled. The interfaces are most commonly used for providing your users with offline support.
2. Googlebot is not a browser
The World Wide Web is huge though, so Google optimizes its crawlers for performance. This is why Googlebot sometimes doesn’t visit all the pages the webmasters want.
Most importantly, Google’s algorithms try to detect if a resource is necessary from a rendering point of view. If not, it probably won’t be fetched by Googlebot.
Elephate’s experiments show that Google crawler does not wait longer than 5 seconds for any resource to be downloaded/rendered. Moreover, it could “optimize” your app behavior by not respecting (still pretty common) setTimeout() calls, etc.
Here the Google Indexer just omitted the script and rendered the rest of the page. Source: Elephate blog.
3. Googlebot doesn’t click anything
You should make sure whether or not a menu is apparent in the DOM before clicking on any menu items. If you rely on the onClick event, it can stop the browser from indexing your website structure.
4. Feel the flow
Source: Google I/O ’18
SEO techniques in PWAs
Vue Storefront is a standalone Progressive Web App storefront for your eCommerce, able to connect with any eCommerce backend (eg. Magento, Pimcore, Prestashop or Shopware) through the API. It’s made using the Vue.js framework – and yes it’s SPA (Single Page Application), and yes it works well with Google and other crawlers. You can find more info on our Github.
Web development tools and techniques are changing – much faster than search engine capabilities to handle all the new features. Google is still using a rendering engine – dating back to 2015 – to render most modern web-applications.
There is a solution. You can separate the content served for the crawler (rendered server-side) from the super-modern CSR (client-side-rendered) version for your users. You can do that. Legally. No consequences ;)
Server-Side Rendering (SSR) is one of the techniques we’ve employed when building Vue Storefront. It’s like building an Isomorphic/Universal Application in which you write one JS code base for the client/server-side rendering.
The biggest advantages:
When you take a look at any of the Vue Storefront URLs – like https://demo.vuestorefront.io/c/women-20 – and click “View Source”, you can find that Vue Storefront provides the browser with a very unique, custom markup for each and every URL served.
It’s like a classic web application. After the first page is loaded – the app behaves like a typical SPA from the client’s perspective – fetching the data for all subsequent pages using AJAX + Service Workers.
For Googlebot, it is just HTML which allows it to index it the optimal way. For a developer, it is the same code – no matter if it’s rendered client or server side.
It’s pretty important to optimize the links structure- not only to avoid the typical SPA hashtag based links (#products instead of /products?) but also to allow the URLs to be customized.
Vue.js provides the developer with the pretty cool mechanism of Vue Router (https://router.vuejs.org/) where you can add and modify the custom URL/component mappings.
Meta data + Microformats
Starting with Meta tags, microformats, open graph – in eCommerce, it’s good to use them all to improve the content linkability and make sharing easier. Of course, it improves SEO results as well.
The framework you choose should allow developers to work on the template level, creating a highly customized HTML structure. Vue Storefront is based on a templating engine – core structures could be modified, exchanged, removed, etc.
Server rendering time can also improve your SEO rankings. It was many times officially stated by Google itself and proved by many experiments. The indexing algorithm uses basic information about page-load speed gathered among users. Therefore, optimizing the page load time will increase not only the Conversion Rates but also search rankings.
NoSQL database, caching, and pre-rendering all help keep Vue Storefront SSR time under 0.2s (on the developers env, without optimizations). OK, just wanted to show it off ;)
Key takeaways for JS SEO
- A PWA acts like a native app and provides a better user experience. It’s worth developing if you want to increase sales. There are plenty of cases studies to learn how to get started, with Google showcase ending with our TOP 30 Progressive Web Apps Benchmark Study.
- WRS (Web Rendering Service – service used by Google to render the website before indexing) is kind of headless browser; it’s like a very old – 2015’ vintage – Chrome 41 to some extent.
- It’s far easier to maintain dynamically generated (SSR) HTML markup for the SEO optimizations than to gracefully downgrade the JS caps for the Googlebot to index your app properly.
- You should make sure your scripts are fast. Make sure your server doesn’t slow down when the host load increases.
Read more on the Elephate blog. You can hardly find a better guide to JS indexing.
This article was written by Piotr Karwatka in cooperation with Maria Cieślak from Elephate.