Progressive Web Apps (PWA) and Search Engine Optimization (SEO)

Progressive Web App (PWA) is an application software delivered through the web. It’s built using standard web technologies such as HTML, CSS, JavaScript, etc. PWAs are commonly used to boost the website’s conversion rate and traffic. From 2021, PWAs are supported (fully or partially) by Google Chrome, Apple Safari, Firefox for Android, and Microsoft Edge.

Being a relatively new development, PWA optimization still leads to positive results in the majority of cases and has amazing statistics. PWA Stats constantly reports about benefits achieved by services that implemented PWA.

In general, according to the TOP 30 PWAs report, “the average conversion rate for progressive web apps was 36% higher than the one for native mobile apps”.

PWAs are great helpers when it comes to online marketing. That is why they are popular among the SEO crowd. However, just like React and SEO, the PWA SEO combination has its difficulties. In this article, we will shed light on how PWAs work with SEO.

Examples and Main Benefits of PWA

Any web service can be a PWA. There are three main requirements for that:

1. Runs under HTTPS.
2. Includes a Web App Manifest.
3. Implements a service worker.

The main purpose of PWA is to provide superior functionality for every user. Here is the list of the main advantages offered by PWAs:

1. PWA brings new opportunities and growth to literally any business. It combines the best of app and web qualities, being responsive and able to work on any device, and doesn’t necessarily require a speedy network.
2. The transport-layer security makes it secure.
3. Service worker (a special script that your browser runs in the background) allows PWAs to work in offline mode.

Let’s look at some of the greatest examples of PWA adoption:

Recommended for you: Most Popular Frameworks for Building Progressive Web Apps (PWAs).

1. Starbucks

The PWA of Starbucks’ ordering system is simple and user-friendly. It looks just like their native app but does have the ability to run offline when a user browses the menu and adds items to the cart. The best benefit of such a solution is the fact that PWA is almost twice smaller than Starbucks’ standard app. Because of that, the company significantly increased the number of web users.

2. Pinterest

After it was discovered that only 1% of Pinterest mobile users download an app and sign in due to its poor performance, the mobile app was rebuilt on the basis of PWA technology. Thanks to that, indicators such as time spent, ad revenue, and core engagements have increased up to 40% – 60%.

3. Uber

Uber web app was rebuilt as a PWA with an aim to provide fast service on low-speed networks and on old smartphones that aren’t compatible with the native Uber app. Thanks to that, a super-lightweight core app loads in around 3 seconds on 2G networks.

The Importance of SEO

SEO is all about optimizing your website for search engines (SEs). Its main purpose is to improve the website’s ranking in search results and engage visitors. It’s based on SE algorithms and uses keywords to help search engines show relevant content and attract a targeted audience to the websites. This is how SEO can bring organic traffic to your website which is the best of a kind. Unlike direct and paid traffic, it’s able to turn most of your visitors into your clients and customers.

SEO for Progressive Web Apps: What’s the Problem?

Despite all the benefits provided by PWA, many website owners still hesitate to implement the technology. There are two main reasons for that:

1. The fear of changing the existing system that already works well.
2.  Poor understanding of how PWA works with SEO.

As it was stated by John Mueller (analyst at Google), “PWAs currently don’t have any advantage in Google Search.”

Many PWAs are built using JS frameworks that aren’t known for their SEO-friendly nature.

So, unlike traditional HTML-based websites, JavaScript-dependent PWAs are challenging for SEO. That is why they don’t offer any advantages in terms of searchability. However, contrary to popular belief, this doesn’t mean that progressive web apps can’t be indexed by search engines. You just have to use different techniques for that.

Server-Side Rendering and Client-Side Rendering

Most websites use Server-Side Rendering (SSR). It’s the simplest approach where the page renders on the server-side instead of being rendered in the browser. However, the entire HTML loads every time a user requests the page which may be problematic when the internet connection is not stable or fast enough.

JavaScript-based PWAs use client-side rendering (CSR), where the content is rendered in the client’s browser. It doesn’t send an entire HTML page every time a user requests the page. The JavaScript file displays only the necessary part of the information from the page in the client’s browser. That is why the page loads faster even with a poor internet connection.

However, why do many website owners still refuse to use CSR? The problem is the Google bot. It can read the content of the website in the code that is fully visible in the HTML document. CSR, in its case, fully relies on the ability of a search engine to process JavaScript. That is why there is an opinion that CSR apps can’t be indexed. However, in fact, among all the search engines, Google is the best at processing JavaScript.

Nevertheless, this still doesn’t mean that the problem with JavaScript and SEO is solved: Google admits that the processing of JS is not perfect. Namely, the process of crawling a JavaScript-based page takes more time than that of an HTML page. In fact, this means that you will have to wait more time for JavaScript content to appear in the search engine’s result pages.

All these make it hard for website owners to both improve the user experience of their visitors and make their content optimized for search engines.

How to Implement PWA Without Losing Your Search Engine Optimization?

You may like: Magento PWA Studio: The Progressive Web App Tool for Magento!

1. Apply Dynamic Rendering

The dynamic rendering shows different versions of content to different sources. The visitor gets a CSR version, and the crawler gets a server-side rendered version. This allows improving the indexing of JavaScript-based pages by Google bot. This way, you will provide the most convenient user experience for your clients without risking the website’s SEO.

2. Combine SSR and CSR

Make sure that the crawler will see the most important parts of the content (that definitely need to be passed through to search engines) using server-side rendering. This information will be picked by the crawler as soon as it discovers the page. The remaining information will be automatically processed via client-side rendering during the second stage of the process.

3. Build your PWA using SEO friendly JavaScript framework

Our great recommendation is GatsbyJS. It’s pretty easy to build a PWA website using this framework (as well as turn the existing Gatsby website into a PWA). It pre-renders your website in a build step for a brilliant, lag-free performance, even if the internet connection is slow. Thanks to that, your visitors get an app-like browsing experience.

4. Resort to Ready-to-Use PWA Solutions

Today, PWAs are more affordable than ever. So, if you don’t want to waste a lot of time and resources on PWA development, you can use some ready-to-use PWA solutions that are made according to SEO principles and thoroughly tested, so you can be sure of the quality of the code.

5. PWA studio

PWA studio was released in 2019 as a web technology standard designed to provide an app-like experience. In fact, it’s not exactly a ready-to-go solution: it’s rather a collection of tools and features for PWA development. This solution is pretty complex and impressive but requires additional adjustments.

6. ScandiPWA

ScandiPWA is an open-source solution, based on React and Redux. It’s designed with the aim to improve websites with speed and the ability to work offline. It also constantly updates, so you will always be getting new functions.

7. Vue Storefront

This is one of the first PWA solutions available on the market. Actually, Vue Storefront is a universal, all-in-one solution, but requires additional maintenance resources.

How to Avoid SEO-Related Mistakes During PWA Implementation?

To develop a well-crafted PWA that will help you win at SEO by providing an improved user experience, you should:

1. Perform SEO audit. This will help spot and fix all the SEO-related problems.
2. Consult with SEO specialists. When you build your PWA using React (for example), your SEO specialists should know exactly how to combine React and SEO. This way you will avoid most of the possible issues that can appear after implementation.
3. Stick to fundamental SEO principles when developing PWA. In the article related to Progressive Web Apps SEO, published by Google, the company gives tips on how to build indexable PWAs. Some of them are as such:
   • Each page should be available via a specific URL. Thanks to that, each page will be crawled independently.
   • The website should have a responsive design and be optimized for mobile devices.
   • Use progressive enhancement. Thanks to that strategy, PWAs work well even on old browsers.
   • Check how Google renders your page using Google Search Console on a regular basis. Thus, you will always know when it’s time to upgrade or change something.
   • Keep an eye on the page load time. Google measures every page’s speed of load, and if your page’s loading speed slows down, Google will lower it in rank.

You may also like: React Native vs Flutter vs PWA: Battle of Trending Mobile App Frameworks.

The Bottom Line

PWA optimization offers lots of opportunities for online marketing and brings growth to the vast majority of businesses. In fact, the best SEO practice typically applied by PWA is the user-friendly interface: it’s responsive, structured, and renders fast. However, PWAs still don’t give a direct advantage to SEO, and the SEO-related problems are what stop many merchants from implementing PWA to their websites. That is why it’s important to be careful and use different techniques such as dynamic rendering, the combination of SSR and CSR, or ready-to-use PWA solutions. You should also involve SEO specialists in the process from the very beginning.

As you can see, you can make use of both SEO and PWA by successfully combining them. It also should be noted that the PWA is a young, innovative type of software, so improvements are to be expected.

This article is written by Ivan Jones. Ivan is an SEO specialist at Clockwise.Software with more than 5 years of experience in the industry. He knows the nuances that have helped him keep websites on top of Google search results for years. Being an avid learner, he is keen on testing new approaches that can benefit SEO results.

Disclosure: Some of our articles may contain affiliate links; this means each time you make a purchase, we get a small commission. However, the input we produce is reliable; we always handpick and review all information before publishing it on our website. We can ensure you will always get genuine as well as valuable knowledge and resources.