Progressive web apps (PWAs) have been stirring the mobile experience pot ever since Google first brought the term to common usage in 2015.

In a world that is increasingly glued to their mobile devices and accompanying apps, it only makes sense to create experiences that aim to, as senior software engineer at Google Alex Russell said, “blur the line between web content and apps.”

PWAs achieve this by delivering the app-like experience, which we’ve come to know, love and expect through native mobile apps (the apps you download from the app store), through a browser instead.

This yields a number of benefits, especially compared to native apps. There’s no download taking place, which makes these app experiences more accessible and even shareable (“check out this neat PWA I just found: https://paperplanes.world/”).

Not to mention their progressive and responsive design means they can work for everyone, regardless of an individual’s choice of device or browser.

In terms of search, PWAs are indexable, which means your app-like experience could appear in search results. However, there’s a lot of technical SEO aspects involved with ensuring that a PWA is discoverable and properly optimized for search engines.

This checklist below will address some of the more common, immediate SEO concerns of developing a PWA and getting it ready for users and crawl bots.

Install The Lighthouse Tool Extension

A lot of the immediate concerns for PWAs (in terms of both the app’s overall experience and its SEO) involve steps like ensuring that the site is secured with HTTPS, has a responsive design, can be loaded offline (a key aspect of PWAs) and so on.

The Lighthouse chrome extension tool is great for taking a baseline reading of your PWA. It checks for the following components:

• Offline accessibility: This also measures how well the app-like experience performs if the user has bad service.
• Page load speeds: Lighthouse’s report lists a number of different speed values for things like “Speed Index,” “Estimated Input Latency” and more.
• Network connection security: Checks that the PWA has an SSL certificate for secure connection (a proven ranking factor).
• “Add to homescreen” function: If your PWA experience is particularly useful, users will want to add a shortcut icon to their homescreens, so your web application needs to permit this function.
• Mobile-friendly design: Detects if your PWA is built with a responsive design to function appropriately on a wider number of devices.
• Service Worker presence: Service workers are the backbone of PWAs because they handle a number of the functions/features synonymous with web apps, like push notification capability, offline caching and geolocation data.

 If Lighthouse detects any issues with its initial reading, it will notify you and potentially give you insight into solving the issue(s).

Test The Site Across Popular Browsers

One aspect of your site that Lighthouse cannot verify on its own is how the PWA appears and functions in various browsers. You’ll need to do this yourself by accessing the URL on each browser and testing for functionality. While this isn’t directly an SEO issue, a browser issue could create high bounce rates from the users. It’s also damaging to the overall experience and functionality of your web app.

Annotate Pages Of Your Web Application with Schema.Org

You want to make it easy for Google to identify each part of your web application. Schema.org structured data is ideal for this because you can summarize the key parts of your PWA with metadata that signals to Google the purpose or intent of each page.

You can test your Schema.org meta information with free services included in Google’s toolkit, like the structured data test.

Consider Open Graph And Twitter Cards Metadata

As mentioned before, one of the huge advantages to PWA experiences is their shareability. This has always been a big struggle for native apps. If I recommend a traditional app to you, you’re tasked with visiting your device’s app store, finding the app, downloading it, accepting permissions and so on.

Whereas PWAs are instantly accessible through a URL, which opens up the door to sharing your PWA and its features on social media channels.

Make sure that when your PWA is shared on social networks, there’s the appropriate metadata formats available to make that transition seamless. Google recommends using the Facebook Object Debugger Tool, while this guide by Twitter is a helpful resource for Twitter Card metadata formatting.

No “#” In URLS

According to Google’s John Mueller, Googlebot doesn’t index URLS with “#” in them (except for “#!”). Once the bot hits “#,” it stops indexing anything beyond that marker. Thus, Mueller recommends using traditional URL structures that follow the path/filename/query-parameters structure. This can be tedious to implement, but helps ensure that the PWA is crawled correctly.

Avoid Duplicate Content Violation Issues

A lot of PWAs are developed to supplement an existing website. As such, there’s a lot of content crossover.

To ensure that you aren’t receiving duplicate content violations, you should test that all of your repeated pages have the necessary <link rel=canonical> tags that point to the canonical source of the content.

Test Crawl And Render

Through the Fetch As Google tool in Search Console, you can see how Google crawls and “sees” your PWA and its pages. The Fetch and Render function shows how the page appears to users. You can compare the two to test for visual differences between how a crawl bot and an actual user both see the page. This tactic will also alert you if anything is blocked by robots.txt, such as JavaScript files, 3rd-party APIs and other PWA features.

If a resource is blocked, you want to investigate if it’s possible to fix. That said, some 3rd-party APIs may be automatically blocked by the robots.txt. If that’s the case see how it is rendered on the user side and ensure that this blocked resource doesn’t detract from the overall app-like experience.

If it does, you may simply want to remove it.

Develop Slowly + Keep It Simple

In the excitement of creating a web-based app experience, A lot of PWA-hopefuls rush their development to bring the experience to users quickly. The issue with this approach is it can generate a lot of obstacles when each feature or PWA element is developed all at once.

As a safer alternative, consider building your PWA brick-by-brick and ensuring that each new version, or added feature, functions appropriately before moving onto the next building block. Your development time may take longer, but each new addition will be smoother and limit any disruption to existing users.

Developing slowly also prevents you from overloading your PWA with too many embedded resources. Naturally, you want to take advantage of all that PWA technology has to offer, but too many JavaScript files or unique server responses can gum up the works and result in timeouts, limited resources and a bad UX.

If you piece together your PWA slowly, you’ll have a better idea of which resources are causing the issues, which makes it easier to more appropriately choose the features with the most value for users.

Conclusions

PWAs yield a lot of potential value for businesses. This is especially true for businesses that have struggled to attract downloads to their existing native app or have had limited resources to develop these traditional apps in the first place.

Some websites have even explored using PWA technology in place of a more traditional “mobile-friendly” website. In any scenario, these SEO steps for your PWA are important because they not only ensure that your web application is indexable and discoverable in searches, but they also prevent you from making critical development mistakes that could harm the overall app experience itself.

As you continue adding to your web application and issuing new versions, it’s important to move through this checklist again and double-check that nothing has changed to damage your SEO or user experience.