SEO for Progressive Web Apps (PWA)

Despite countless benefits provided by Progressive Web Apps, you still must ensure that your website is properly set up from the technical perspective to stay ahead of the game. So, why do we see so many businesses interested in PWA hesitating to implement the technology? The answer is fear of changing what is already proven to work, as well as not having a complete understanding of how SEO works with PWA. Technical SEO configuration isn't a straightforward process, often bringing headaches to website owners. But when it comes to the basic principles of technical SEO, the task remains the same for any website, whether PWA or not, and ultimately, it doesn’t sound that difficult at all. There are some things to be aware of, though.

Progressive Web Apps are different from 'traditional' HTML-based websites. This has caused a myth that PWAs can't be indexed by search engines. This is not true, though. Progressive Web Apps can be indexed just like any other webpages, although the techniques used to ensure that the search engines see and understand your website's content will differ.

Traditionally, the majority of websites use server-side rendering (SSR) to 'pre-boot' everything on the server-side. When the user is requesting a page, you send a rendered version from the server to the user's browser. This approach is straightforward but comes with some downsides — yes, you will get to load your first meaningful paint very fast, but this approach will also require to load the entire HTML every time the user is switching a page. This can be painful, especially when operating on a bad internet connection. Progressive Web Apps and other Javascript-based pages use an alternative method called client-side rendering (CSR). With this approach, content is rendered in the client's browser, using JavaScript. Instead of sending an entire HTML document from the server every time user is switching a page, the user is only receiving a tiny string of data with JavaScript file that will request and render the necessary parts of the page in client's browser, resulting in a significant website page load speed increase.

When comparing a 'traditional' website with Javascript-based PWA, in the first case, the website's content can be seen in the code. In the second, one must rely on the ability of search engines to process JavaScript and get all the information you want search engines to index. This is the reason why many people think that PWAs can't be indexed. In reality, client-side rendered apps can be crawled and indexed by search engines. Googlebot is currently the best among them at processing a client-side rendered JavaScript.

In reality, things are more complicated. While Google is advocating the technology and has achieved incredible progress in Googlebot's ability to render JavaScript, the company admits that currently, there are still issues with processing JS and not all search engine crawlers can process it successfully or immediately. Yes, speed is another important aspect here. To ensure that the JavaScript-based page is being properly crawled, an extra stage is required that traditional HTML content doesn't have to go through. This process requires more resources from Google, meaning that you will have to wait longer to see your JavaScript content appear in the search engine result pages.

Dynamic rendering is a great workaround solution to solve the issue . Dynamic rendering requires your webserver to understand the source of a request, in other words, detect whether it's a real visitor or a search engine crawler and serve different versions of content to different sources. This allows you to provide a client-side rendered version for your real visitors, and conditionally serve the server-side rendered version to search engine crawlers. There's also another neat way to solve the task. You can prioritize your content, identifying the most important elements of your page that you want to pass to search engines as soon as possible, and serve this content using server-side rendering.