SEO for Progressive Web Apps: Boost Organic Traffic to Your PWA

When thinking about turning their website into a Progressive Web App, a lot of people are concerned about how it will affect their search engine rankings.

Progressive Web Apps (PWAs) deliver an “app-like experience”, which is great for the look and feel of your website, but not so great if it means you risk losing all your organic search traffic because your site no longer shows up in Google.

So, what’s the answer? Are these fears legitimate, or can you still build a Progressive Web Application that ranks and draws SEO traffic? Read on and we’ll explain how to do SEO for Progressive Web Apps.

Unique Elements of PWAs

The first step to understanding PWA SEO is understanding what makes a Progressive Web App different from a standard website.

In truth, PWAs are not dramatically different from a standard website. They’re built with the typical web development stack of HTML, CSS and JavaScript, as a normal website is, and served in the browser, which fetches HTML content from your site’s web server and turns it into a visual website.

So how is a PWA different then?

There are four “core” elements that all PWAs have:

• HTTPS
• A web app manifest
• A service worker
• An application “shell”

HTTPS means the website’s URL must begin with https:// - indicating that it uses a secure and encrypted communication channel with the web server where its content is hosted.

While HTTPS is a requirement for all PWAs, it’s not really different from a standard website, as most websites run on HTTPS today anyway.

A web app manifest is different. This is a JSON file that provides details about the website (such as its name, an app icon, and the website path where it can be accessed). A web app manifest is essential to allow users to download and install the PWA and add a launcher icon to their device’s home screen.

The web app manifest doesn’t affect SEO at all, though.

The third element does have an effect on SEO. A service work is a JavaScript file that perform actions in the background, independently of the website’s regular code.

Service workers handle caching, network requests, and enables some of the advanced functionality of PWAs, such as offline mode and push notifications.

The way it caches and handles data can potentially come into play with SEO.

The final element, your application shell, can also have an impact on SEO. An app shell is the minimum code needed to render your website UI, and is cached for fast loading on subsequent visits. 

Depending on how this is set up, it can present issues for Google’s (and other search engines’) crawler in terms of reading and understanding your content, which we’ll dive into in more detail shortly.

Does SEO Work for Progressive Web Apps?

Let’s get straight to the burning question: can PWAs be optimized for SEO traffic?

The answer is yes. SEO does work with PWAs; Google can crawl PWAs, and if set up correctly, turning your site into a PWA can actually have significant benefits for your SEO.

The main thing you need to understand to ensure your PWA is discoverable by search engine algorithms is the difference between Client-Side Rendering and Server-Side Rendering.

Let’s explore this in more detail now.

Client-Side Rendering vs Server-Side Rendering

Traditional websites use server-side rendering, or SSR.

What this means is that when a request is made (i.e. a user types in a URL), the web page is compiled on the server side, and delivered in one complete package to the browser, where it loads for the user.

This is the simplest way to render content. It’s a little slower, since the browser needs to load an entire HTML document at once, but it makes it easy for a search engine crawler (like Google’s) to understand what’s on the page (which is essential for SEO).

Most PWAs, however, use client-side rendering (CSR).

With CSR, upon request the server sends a minimal amount of code, which is the application shell we talked about earlier.

Along with that, it sends a little bit of JavaScript code, which the browser then uses to populate the app shell with the rest of the content.

CSR results in much faster loading speeds. However, it can be hard for crawlers to process JavaScript websites and understand what content is on the page, and thus can present problems for search engines.

Some search engines even ignore JavaScript completely, which is bad news if you want to show up in their search results.

Can Client-Side Rendered Sites Be Crawled by Google?

So does adopting a CSR approach mean that Google can’t crawl and rank your website?

Not exactly.

Google’s crawler can still read, render and index JavaScript content, but it takes a while, as you’ll need to wait for a second crawl for Google’s search engine to be able to fully interpret your site’s content.

An alternative option is to use Dynamic Rendering, which serves different content to real users and search engine crawlers.

Essentially, you’ll use fast, optimized CSR for people who visit your website, but for automated bots that crawl your site, you’ll show a fully rendered HTML page.

Dynamic Rendering seems like a perfect silver bullet, but it does add a lot of complexity, and can lead to issues where crawlers see different content to real users, which can create confusion and hurt SEO long-term.

One more option (which might be the best option for SEO and user experience) is to mix CSR with SSR, in a kind of hybrid rendering approach. This means loading a larger amount of content on the initial server request, rather than the bare minimum of your app shell followed by JavaScript to populate the rest.

With this approach, you would basically expand your application shell to include all the content the page needs to provide to search engine crawlers.

Additional design and functionality can then be rendered on the client side.

The user experience would not be as smooth and interactive as a fully client-side rendered application, but it would be much easier for Google to crawl and thus better for SEO.

Read more: Google Search Central on Dynamic Rendering, and Google’s documentation on different rendering techniques.

PWA SEO Tips

Summing up what we’ve discussed so far:

• PWAs can be optimized for SEO.
• PWAs can be crawled by Google.
• The way your content is rendered can have a big impact on your search engine optimization.
• Fully client-side rendered apps can be indexed and crawled by Google, but you may run into problems (and some search engines won’t crawl JavaScript content at all).
• The best way to approach it is either dynamically render different versions of your website for real users and for crawlers, or find a midpoint where you render some of the page on the server side and some on the client side.

With that in mind, here are some tips to follow to make sure your PWA SEO is up to scratch, and maximize the visibility of your app in search engines.

Make Sure Your Content is Crawlable

As we discussed above, the first priority for SEO is making sure that automated crawlers like Google’s Googlebot can crawl and understand your site’s content.

If all it sees is an empty shell with a little bit of JavaScript, it’ll be hard to know what keywords to rank your site for and whether you’re doing a good job of satisfying search queries (even if you are).

Avoid over-complicated UI

If you want to maximize the SEO performance of your PWA, you’ll want to tone down the fun and interactive elements of your website.

It doesn’t have to be boring, but you shouldn’t have every sentence be triggered by a JavaScript animation.

The fewer flashy UI elements you have, the easier it will be to ensure your website is crawlable.

Build a Fast, Responsive, Mobile-Friendly Website

One area where PWAs have an advantage for SEO is that they’re specifically designed to be fast, responsive and provide a great user experience on mobile devices.

All these things have become more of a priority for SEO in recent years. It won’t fly anymore if your site doesn’t work well on mobile, or loads too slowly.

So while you may need to rely on SSR to make sure your site is crawlable, utilize whatever other tricks you can to enhance your site’s speed and usability.

Use a Sitemap and an Intuitive Site Structure

Beyond server-side or client-side rendering, the structure of your site is essential for helping search engines crawl and understand your site.

This starts by providing an XML sitemap, which is a simple list of all the pages on your website.

You should also structure content and URLs on your website in an intuitive manner, using internal links and different URL paths to show crawlers which pages cover similar topics.

Optimize Metadata and Schema

The backend HTML that users don’t see is important for crawlers. Things like schema, meta titles and meta descriptions are specifically for sharing additional information about your page or your website for automated crawlers. Make sure you utilize these tools to the fullest extent.

Publish High-Quality, Helpful Content

Technical SEO aside, the most important thing for SEO is content.

That doesn’t change with PWAs. Your site still needs to meet the search intent for your target keywords with high-quality, original, and helpful content.

PWA SEO is essentially about making sure that the enhancements you do to make your site a PWA don’t hurt your SEO. But dynamic rendering or a smart mix of SSR and CSR won’t make your site rank if you don’t have the content to win the SERPs in the first place.

Build an Authoritative Brand

With each Google update, it’s become more and more important to have an authoritative, trustworthy brand.

SEO hacks and tricks won’t last, but a recognizable brand name with a strong authority signals, such as high-quality backlinks and mentions from well-known publications will.

Look for other signals of trust and authority you can show both Google and real users, such as user reviews, awards, App Store badges, contact information and “About” pages and social media profiles.

Getting into the app stores is an amazing way to display brand authority.

‍Click here to learn how you can easily turn your PWA into a mobile app and enter the app stores in as little as two weeks.

Follow Basic SEO Best Practices

All in all, PWA SEO is not that much different from regular SEO.

Once you’ve made sure that Google can discover and crawl your site, it all comes down to the same basic principles.

Most of the tips above are not specific to PWAs. All websites need great content, some links to show authority, an intuitive structure, good technical SEO and a fast, mobile-friendly site.

Tools for SEO for Progressive Web Apps

These are some of the most useful tools to help maximize the SEO footprint for your PWA:

Google Search Console

Search console is a must for anyone doing SEO. It offers a ton of useful insights, all coming from first-party data; from Google itself. 

You can use it to see which queries you’re generating most of your clicks and impressions from, check the status of your pages, whether they’ve been crawled, whether they’ve been indexed, and get an update on any pages that are failing or need improvement in Google’s Core Web Vitals measurement.

Considering it’s free, there’s no reason not to utilize this tool for your business.

Lighthouse

Google’s Lighthouse tool is another must, especially for anyone building a PWA.

Lighthouse audits your site for categories such as Performance, Accessibility, SEO and whether it meets the criteria for a PWA. It’s another tool that’s completely free, and delivers valuable insights that you can use to improve your UX and SEO.

Ahrefs/Moz/Semrush

If you’re really serious about SEO, an SEO toolkit like Ahrefs, Moz Pro or Semrush is essential. 

These tools give you a depth of data on keyword search volume, keywords your site is ranking for, keywords that other sites are ranking for, backlinks, technical SEO issues and much more.

Publishing content to rank in search engines is almost impossible in any halfway-competitive industry without the help of one of these tools. The one you choose is up to you - I prefer Ahrefs, but Moz, Semrush, and a number of other tools do basically the same thing.

Detailed Chrome Extension

Finally, one little tool I really like (and which happens to be extremely useful for PWA SEO) is the Detailed SEO Extension for Google Chrome.

This extension gives you a snapshot of all the data that crawlers see on your page.

In just one click you can see the metadata of a page (such as title, meta description and canonical URL), the page’s word count, headings, internal and external links on the page, schema and more.

It’s particularly useful for PWAs, because it allows you to see how your page appears to crawlers, and whether the backend of your page matches what’s shown on the front end.

Final Thoughts: Building SEO-Optimized PWAs and Completing Your Omnichannel Presence

PWAs are a great way to build websites with an enhanced user experience and advanced features that elevate above what you see from stock-standard websites.

Many businesses, such as ecommerce stores, publishers and more, can benefit from making their site into a PWA. And the good news is, you don’t have to sacrifice SEO to do so.

As long as you have an understanding of how search engines crawl websites, and how PWAs work differently to normal websites, you can ensure your PWA is optimized for both real users and bots.

If you want to take your omnichannel presence one step further, convert your PWA into a mobile apps with MobiLoud.

Launching a native app alongside your PWA is a great way to appeal to users no matter where they prefer to access your site, as well as a strong authority signal to boost your PWA’s SEO even further.

Click here to book a demo to learn more about how MobiLoud can help you make your PWA into a professional, high-quality mobile app in as little as two weeks.