How to Create a SEO-friendly Progressive Web App [Complete Guide]

How to create a SEO-friendly Progressive Web App

Progressive web apps (short for PWAs) are forecasted to replace native applications whatsoever. They are super fast, have excellent UX and UI that users love, and are currently the next big thing in app development. And you don’t need to download a PWA to your device to use it; you can even access it when you’re offline.

Yet there’s one question that’s an often hurdle: will getting a PWA trample your site’s SEO?

And how can you work around this problem?

Undoubtedly, as you decide on building a progressive web application, you must have a clear understanding of its pros and cons and how it differs from native applications. Furthermore, it is wise to get to the bottom of the highly debated SEO matter.

Essentially, you wouldn’t want your site to drop in SEO once you get a PWA. In this post, we’ve got you covered on the subject.

1. Defining the PWA related Terms

Before we jump over to the detailed overview of SEO-friendly progressive web applications, let’s shortly define what each of them means.

SEO

Search engine optimization is a digital marketing strategy that aims to improve a website’s organic traffic. The site’s ranking by search engines and its positions within the search results (SERPs) are also important. To reach this, marketers use one of the many tactics, including on-page optimization, outreach, and link-building, to name a few.

PWA

A progressive web application is a website that’s built with the use of modern frameworks. It is designed to function from the browsers of various devices. Plus, it’s noted for its fast speed, user-friendly UX and UI, and boasts numerous other features.

2. The Question: Progressive Web Apps or Native Apps?

Banner created by Onilab

As you might have guessed, progressive web applications differ significantly from their traditional native application “relatives.” Let’s go over the main points worth noting regarding the differences between PWAs and native applications.

2.1. App Launch & Installation

To begin, PWAs aren’t applications to the full extent of the term we’re all used to. The thing is that you can refer to a progressive web application as a highly optimized website for mobile versions. This means that it works on the device right from any browser.

That said, unlike with the native application case, you don’t have to download a PWA to use it. (Whereas you install native apps to the device from AppStore, Google Play, etc.). This brings up a significant difference in the paths developers take when creating PWAs and native apps.

We’ll go over this question a bit later on in the article.

If you want, you can add PWAs to the device’s home screen with a simple click. As a result, an icon of the progressive app (that looks like any other native app one) appears on the screen.

It launches the app in the browser via a short link; on the other hand, a native application runs on the device. From this, it also follows that the user doesn’t have to update the PWA. Nor does the user need to maintain it in any other way once the app makes it to their home screen.

2.1.1 A few words about app weight

However, it’s not just the download and app launch methods that make a PWA differ from a native application.

Yes, native apps can improve the monetization possibility. Nevertheless, they are generally weighty and take up the memory of the device. Plus, they usually require updates or some other maintenance from the user’s side with every release.

Therefore, it makes sense to assume a much higher chance that a user will delete a native application from their device after some time. For instance, to save storage space.

According to the latest and freshest 2021 statistics by BuildFire on native application downloads:

“The average person uses nine mobile apps per day and 30 apps per month. 25% of apps are used only once after being downloaded, and then never used again.”

How many apps do we use?
How many apps do we use? – Source

Which conclusions can we make from that?

If you’re not sure that your audience will be using your app regularly or will even download it in the first place, then native apps might not be the best road to take. This question is remarkably relevant for eCommerce sites.

By far, not all businesses that specialize in online sales have found having a native application a cost-effective decision.

PWAs are lightweight and practically don’t take up any storage space on the device. Their weight is comparable to a link, so they customarily have a longer “lifespan.”

2.2. Speed

Featured image on the banner: Unsplash

So, PWAs function from the browser, but did we mention that they’re very fast? The lightning-quick, almost instant page load times are among the biggest strengths of a progressive web application.

This advantageous feature uplifts the site in terms of SEO. Since search engines take site speed very seriously when ranking it. It also enhances user satisfaction. People don’t get impatient as they wait for the page to load the content. Thus, they “bounce” from the site less frequently.

2.3. UX/UI

What else makes PWAs stand out?

Progressive web applications have taken the best of what native apps offer in terms of UX and UI. They move the user experience to the next level. Considering the mobile-first approach, the designs of a PWA are very reminiscent of native applications.

Below is a PWA on the example of the official Tally Weijl website. This is how it looks from a browser on an Android mobile device.

The design is a lot like a regular native application, don’t you agree?

Screenshots were taken on the official Tally Weijl PWA website

Many details make PWAs easy to navigate and very user-friendly. The placement and use of elements, space-saving decisions, rational use of text, etc., matter a lot. Such an emphasis on usability increases the satisfaction of those browsing the app from a mobile device. This way, everything is intuitive, visible, and logical.

There’s a big chance that a user browsing a PWA might not be aware that it’s a PWA. People often suppose that it’s just a well-tweaked and mobile-optimized site.

2.4. Other Features

Featured images on the banner: Pixabay

Mentioning other distinguishing PWA highlights, progressive web apps offer the possibility of offline mode use. They support push notifications too. Both these points are crucial.

Offline mode allows acquiring the market share and reaching out to the audience who suffers from a poor internet connection and regular loss. Hence, when users’ Internet connection breaks, they can continue using the site and browse cached pages.

From a technical point of view, this becomes possible due to Cache API and the service worker’s use.

Let’s see how it works.

A user takes action when browsing the site offline. For example, he tries to add a product to the shopping cart. This client request is placed in a queue for processing after the connection is back. Hence, the product will appear in the cart when the Internet will be on again. And the user doesn’t have to pause shopping.

Secondly, thanks to the use of service workers, PWAs can obtain push notification functionality. It is substantial leverage for customer retention. By sending push messages, the PWA can bring clients back to the website.

2.5. Conversions

All the above brings us to one big takeaway. PWAs can skyrocket mobile conversions and improve many other vital metrics.

Based on the data provided by PWA Stats, businesses that have launched progressive web apps have seen:

  • A tangible boost in site speed,
  • Improved conversion rates,
  • Lowered bounce rates,
  • More page views and mobile users,
  • Longer site sessions and better user engagement,
  • Better customer retention,
  • Decreased cart abandonment,
  • Cut costs on client acquisition,
  • Higher revenues,
  • Among other things.

3. How Do Developers Build PWAs?

Featured logos on the banner: React, Vue.js, AngularJS

As shortly mentioned earlier, PWAs and native applications have different approaches in terms of their development. When building native apps, developers need to take in mind the peculiarities of various codebases. It is vital to fit the standards of the platforms, e.g., Android and iOS.

What does this mean?

Developers have to code the same native applications at least twice. Otherwise, the application won’t make it both to Google Play and AppStore. This happens because of the different requirements of each of the codebases.

In turn, this explains the difference in development costs as native applications generally cost a lot more to develop than PWAs do. The same goes for the big difference in time frames. For example, it takes a while for a native application to get verified to appear in the store.

Does it mean that PWAs are technically simpler to develop than native applications? No, by all means, it doesn’t.

3.1 PWA Development Paths

To create a progressive web application, developers need to opt for modern Javascript frameworks. These are, for instance, ReactJS, VueJS, or AngularJS.

Either coded entirely from scratch via one of the frameworks mentioned above or by customizing the solutions provided in out-of-the-box packages (like ScandiPWA or the Magento PWA Studio), developers can craft the application.

Some developers opt for combining the two options. They code some parts of the app on their own and adapt ready-made solutions for others. This can be done, for example, using both ReactJS and a third-party theme.

Regardless of the chosen development scenario, developing a PWA isn’t an easy process. For the progressive web app to have the features that it should, developers must have in-depth knowledge of the platform they build the PWA site.

Furthermore, they must know all the nuances that deal with its proper frontend and backend construction with the framework. To be more specific, one of such tricky angles regards the PWA’s SEO.

3.2 How Do You Turn a WordPress Site Into a PWA?

But what if your e-commerce website uses WordPress?

Because many eCommerce sites have WordPress as the basis of their store, here are some tips regarding PWAs for this platform.

To convert your WordPress site into a progressive web application, it must be of the 3.5 version or later, have “HTTPS” instead of “HTTP,” and the PHP of the 5.3 version or above. Next, just as noted in the previous section, you can either code the PWA manually or make use of a plugin solution.

For this specific platform, extensions for building a progressive web application are believed to be a time-saving option.

Mentioning the WordPress PWA plugins worth considering, these are:

  • SuperPWA (this package solution has a free version);
  • WordPress Mobile Soft (this software comes at a paid basis with a license for around 25 USD);
  • PWA for WP & AMP (this plugin is an excellent all-embracing option that starts from 50 USD).

To get the plugin, you need to install it on your WordPress Site. To do this, access the admin area of your site, click on the “Plugins,” and then on “Add New.” Look for the plugin you want to get by typing in its name, for instance, “SuperPWA.” Once you’ve found it, press “Install” and then “Activate” the plugin.

4. Performing a PWA SEO Audit: Short Tips

In short, performing an SEO audit of your site is required regularly. Thanks to it, you can allocate the site’s possible issues or weak spots and fixing them. This way, you make sure that your online store makes the most of your SEO efforts.

As such, site crawlers rank your website and grade it based on complex algorithms. To improve the rating, pages shouldn’t be overstuffed with keywords and must have relevant content.

Some other search engine ranking factors that matter include:

  • how fast the pages are,
  • if the page is broken or not,
  • how many people bounce off the page “empty-handed.”
  • whether the site is secure or not,
  • how simple it is to navigate the site.

Recommendations for Your SEO Audit

Tip 1. Your eCommerce site most likely has tons of pages. So, before you get confused about where to begin, remember that Google prefers the mobile-first approach. Therefore, it makes sense to look over the pages that are accessible to users from their mobile devices. You need to check how well these pages are well-optimized for mobile use. The same applies to matching the speed of your pages.

Tip 2. You should scan your website to get a better understanding of how Google’s crawler sees it. When performing the scan, sort which pages have issues (for example, broken links, feature duplicate content, or have not enough content) and fix these drawbacks. It makes sense to list these as separate tasks to make certain that they’re all fixed orderly.

Tip 3. Be careful with similar content. There are many cases when you use the same titles or tags on multiple pages or cover close topics in more than one place. This can lead to your pages competing against one other, which is harmful.

For example, you may apply such a tool as Copyscape to check which pieces of your site’s text are copied or appear more than once.

Tip 4. Page structure is another crucial point to make a note of. Your site’s pages have to be lined out hierarchically in a logical way. Think your categories through and draw a “tree” of pages. If some pages fall out of the “logic,” rework parts of the structure for better inclusion.

Tip 5. Your keywords matter a lot. This is one of the reasons why you should carefully use them in your meta titles and descriptions. Similarly, it is considered good practice to place your main keyword within the first one hundred words of the page, preferably in the headings.

5. How to do SEO for a Progressive Web Application

Featured image on the banner: Pixabay

So what’s the deal with a progressive web application’s search engine optimization capabilities?

5.1 Will Getting a PWA Kill off Your Site’s SEO?

There is a perception that progressive web applications are incapable of handling the SEO matter properly. In essence, this opinion implies that getting a PWA can negatively influence your site’s SEO, SERP positions, rankings, etc. But is this entirely true?

While a progressive web application revolves around ultimate optimization in its core, if a PWA’s SEO setups aren’t handled properly, there is a risk that the site can drop in SEO. After all, a site’s performance has a significant impact on SEO, and broken SEO can lead to huge consequences.

5.2 Can PWAs Boast Having SEO as a Strength?

They can. Again, if everything the developers implemented everything correctly from the technical perspective, SEO can be a piece of cake for the progressive web application.

The first point to note here is that progressive web apps are fast. And site speed and fast page load times are what Google and other search engines care about a lot. So, if a PWA is adequately developed and functions quickly, this is already a big chunk of the deal.

Another thing that makes a PWA “leapfrog” native application is that its pages have URLs just like regular websites do. This means that the PWA pages are linkable and may thus appear among search engine results pages. This is excellent news for those who work on a site’s search engine optimization.

You’re good to go as long as search engines manage to index the PWA’s pages. But this is the tricky point. A PWA’s rendering is handled differently than with the usual HTML-based pages of websites. More about that next.

5.3 What Needs to Be Done to Handle a PWA’s SEO?

As stated previously, Javascript is used to build progressive web applications. Their rendering approach differs from those pages that are HTML-based. Let’s try to understand how specifically.

5.3.1 Server-side rendering vs. client-side rendering

In a standard HTML-page scenario, whenever a user wishes to browse a page, the request is sent to the server. The HTML page rendering occurs entirely on the server’s side, returning the full page content to the user.

This may, at times, take a while. Even if two separate pages differ by just one letter, the server will render them entirely from scratch. This will happen with every request to the server. On the other hand, since the page is in HTML, Google and other engines have no problem crawling it. Ultimately, they “see” all the content.

PWAs can’t afford to waste time as the pages get rendered and indexed. That’s why JS sites opt for client-side rendering. In this case, the page is put together on the client’s side, not on the server.

As opposed to pitching the whole data chunk upon request, the CSR method delivers data partially via petite JS files. The user receives only the requested part of the data (not the entire scope that makes up the page). This is much quicker.

But the complexity here lies in the fact that you must “do some technical magic.” The search engine should “see” the source code of your pages. Only this way, it’ll index it adequately without missing out on any information that’s present on the page.

5.3.2 Setting up a PWA’s split rendering

That said, you can set up your progressive web application’s rendering differently. Put simply; the crawler should come back to the page several times to scan it. I.e., after the first launch of the page, the crawler will most likely see the page as empty. This will happen because it pays attention only to those files that aren’t Javascript.

So, before it makes conclusions that nothing is there, “redirect” it to look at the page once again. During its second and consequent visits, the crawler will see the rest of the parts making up the page.

This solution is time-consuming, indeed. It’ll take the crawler much more time to index a PWA’s page. I.e., it would spend much less time going through a regular HTML page. So is there another way out? Yes.

5.3.3 Dynamic rendering

The most optimal yet not picture-perfect alternative solution is going for dynamic rendering. This measure allows dividing your client-side and server-side rendering based on who sees the site. In this event, regular users will make use of the fast CSR option. Crawlers, on the other hand, can enjoy good-old SSR results to crawl.

What is more, you must make sure that you have an experienced team developing your PWA. This way, you’ll be sure that professionals will handle all SEO setups, including those dealing with analytics, correctly.

Conclusion

Wrapping up, progressive web applications have managed to take the top traits of native apps and offer them to users right within their browsers.

They’re future-oriented, and with appropriately implemented rendering, they can handle SEO as easily as shelling peas. Getting a PWA can bring better conversions and uplift user satisfaction. Not to mention the benefits of enhanced site speed and excellent UX/UI.

Now you know more about PWAs and how they differ from native apps. We’ve also looked into how to work around the SEO question on PWAs correctly.

Would you opt for getting a progressive web app for your site?