Are PWAs Good or Bad for SEO? What Your Brand Needs To Know

Many ecommerce brands who’ve reached a certain maturity level are implementing progressive web apps (PWAs) to future-proof their growth. Such forward-thinking brands include Glenmorangie, Nomad, Daring, FLEO, Grown Alchemist, TULA Skincare, and many more.PWAs are powerful, mimic a native mobile app experience, and help your brand deliver high-performing, high-converting ecommerce experiences.

But when you go headless with a PWA, What happens with your search results? That is—what does SEO with a PWA look like?

• What are the implications of PWAs on search?
• Does Google favor PWAs for search engine optimization (over monolithic sites?)
• Do you optimize for search differently when running your store as a PWA?

All valid questions.

Whether you’re considering investing in PWA tech and want to get ahead of this, or you’re wondering if a new PWA will perform okay in the SERP, you’ve come to the right place.

Today, we’re getting to the bottom of whether PWAs are good for SEO, things you can tweak, and more.

Here’s what we’ll cover:

• What is a progressive web app (PWA)?
• Two common PWA SEO myths
• Best practices for optimizing your PWA SEO

First things first…

What is a progressive web app (PWA)?

Before we get into whether PWAs are good for SEO, let’s run through a quick definition of progressive web apps generally (or what PWA means for an ecommerce site):

Progressive web apps are websites served securely in a web browser. They initially load as a static web page but progressively become a “single page web application” in the same browser window.

In short—a PWA is a website that behaves more like a downloadable native app than a static or traditional website.

After a PWA loads completely, as you navigate page-to-page, it will show or load only the necessary parts of a given webpage at a time. It’s surgical about requesting information and therefore is extremely fast-loading for shoppers.

Take the progressive web app that prestige skincare brand TULA Skincare has implemented with Shogun, for example. As shoppers scroll down the homepage (or any page), the site only serves up the sections needed—not the entire page all at once. This keeps the browsing experience feeling near-instant.

If TULA ran a traditional ecommerce website, the entire page would load on first arrival—even the sections shoppers can’t see yet below the fold. This is why traditional sites with tons of heavy imagery tend to lag. Monolithic—or sites with standard (vs. headless) architecture—make many requests and are less efficient.

So in contrast, PWAs are popular for a few big reasons:

• Speed: Reduced data fetching requirements means shoppers experience near-instant page-to-page clicks and fast load times.
• Accessibility: PWAs can be viewed on any device.
• Offline functionality: Content can be viewed even without an internet connection if the site has been previously viewed.

Together, these benefits offer scaling ecommerce brands the flexibility to craft elevated site content and convert more shoppers.

#cta-mini-fe#Learn more about progressive web apps here: https://getshogun.com/enterprise/progressive-web-apps

The characteristics of an optimized PWA

So PWAs offer a host of benefits, but like traditionally-built ecommerce sites, not all PWAs are optimized for success.

Here’s what makes for a good progressive web app, according to Google:

• Provides an offline experience: Your PWA works the same offline as it does online (where connectivity isn’t mandatory for part of the site to function). A great example of this is an airline app listing boarding and ticketing information despite a shaky internet connection.
• Fully accessible: All good PWAs should follow and pass WCAG 2.0 accessibility requirements. Your customers are people, and people have a range of abilities. Ensuring your PWA is accessible to everyone is imperative.
• Discoverable through search: If Google (or other search engines) can’t crawl/find your site, how will your customers?
• Works with any input: Whether customers explore your PWA with a mouse, stylus, or their thumb, they should be able to navigate without issue.
• Offers context for permission requests: Site functionality like notifications, credentials, and geo-location often requires customer opt-in to work. A good PWA will trigger opt-in prompts with full context/rationale on why permission is needed. (For example, if a weather app wants to know your location so it can give you a proper weather report, a pop-up should trigger, asking you to share your location.)
• Follows best practices for healthy code: Keeping your PWA codebase clean is key to building and releasing new updates.

#cta-visual-fe#<cta-title>A radically different approach to headless commerce<cta-title>See why scaling brands are choosing to build their PWAs with an all-in-one Frontend Platform: Shogun Frontend. Learn more

Debunking PWA SEO myths

So are there PWA SEO benefits? Is a PWA good for SEO or not so much?

Turns out there are some components of how PWAs work that impact what you’ll need to consider, so let’s look at two myths surrounding PWA SEO:

PWA SEO Myth 1: PWAs negatively impact SEO because of their JavaScript

Historically, Google has had a hard time crawling JavaScript pages.

As Google shares openly:

“While Google does run JavaScript, there are some differences and limitations that you need to account for when designing your pages and applications to accommodate how crawlers access and render your content.” (Source)

This has resulted in much frustration from JavaScript developers.

Because JavaScript is used to power PWAs, brands with JS sites occasionally encounter issues with PWA SEO for Google.

To understand why, we can look at how Google analyzes JavaScript progressive web apps in three phases:

1. Crawling: The process of finding new or updated pages,
2. Rendering: Assembling all the parts (found during the crawl)—like the images, CSS, and text—to make a webpage, and lastly,
3. Indexing: When Google analyzes a page for content and meaning and stores it in the Google index.

In the case of PWAs, the challenge happens between the crawling and rendering stages. Some JavaScript sites (like PWAs) use the app shell model, which means the HTML of the page doesn’t include any content. Google would need to execute JavaScript to see the page content generated by JavaScript.

Where this becomes an issue is if Google doesn’t execute the JavaScript, meaning the page content doesn’t get accessed. If the page content isn’t accessed, it won’t be indexed. And if your web pages aren’t indexed, this will negatively impact your search appearance.

While this is a challenge, two methods can help with the rendering stage of Google’s crawling process: Server-side rendering and client-side rendering. Let’s look at both in more detail.

What is server-side rendering (SSR)?

Server-side rendering uses a server—not a browser—to produce HTML from JavaScript modules after a URL request.

After the server gets a request, it examines the necessary JavaScript modules and data to prompt a response from Google and returns a rendered HTML page to the browser.

What is client-side rendering (CSR)?

Alternatively, client-side rendering takes place in a browser. This method doesn’t re-fetch the entire HTML page each time the page is requested.

Instead, the JavaScript file shows only the necessary part of the page in the browser at a time. This allows the page to load faster even with unreliable internet.

How do server-side rendering and client-side rendering help with indexing PWAs?

Put simply: Server-side rendering and client-side rendering help improve the rate at which pages can be rendered or “viewed” by search engines. The faster your pages can be viewed by search engines (namely Google), the more your crawl budget—or the number of pages Google will crawl on your site per day—and user experience improves.

Notably, Shogun Frontend—our all-in-one Frontend Platform product, uses client-side rendering in every PWA build.

Whenever site updates are published in Shogun Frontend, the full site is compiled into a statically-rendered HTML site. Then, the site is served up as static HTML flat files which are cached using the content delivery network (CDN) that’s part of Shogun Frontend’s tech.

This client-side rendering is ideal for a PWAs SEO because it ensures Google has already accessed the rendered HTML for each page. This means that when executing a PWA with Shogun, your brand can expect every page on your site to be crawled and indexed, meaning you won’t miss out on any SEO benefits.

PWA SEO Myth 2: PWAs are inherently favored by Google and out-rank traditionally-built sites

Is Google really partial to progressive web apps?

Google says no.

John Mueller, the Web Master Trends Analyst at Google, says there’s no difference in treatment between HTML and PWAs:

“These are essentially [just] different ways of making a website, and you can make a website with lots of different frameworks and formats. And, for the most part, we see these as normal HTML pages.

So if it’s a JavaScript-based website we will render it and then process it like a normal HTML page. If it’s HTML already in the beginning we can do that.

The different frameworks and CMS’s behind it—usually we basically ignore that and just say, well here’s an HTML page and we can process it.

So just the fact that one of your competitors has moved from one framework to another, and has seen an improvement in search, that framework change from my point of view wouldn’t be responsible for that.”

So this leaves us clues for answering the big question:

Are PWAs good for SEO?

Google may not favor a PWA for simply being a PWA, but it might see a positive bump in the SERP all the same because it’s primed for a better customer experience, which does influence SEO rankings. The better your site experience, navigation, performance, and page-to-page load time, the better your Page Experience, which is a ranking factor.

When you choose to improve your site in meaningful ways (such as implementing a PWA), you can influence your position in the SERP and how much you’ll be charged for your ads (Google rewards speed and better experiences). So a PWA may have inherent SEO benefits if implemented especially well when it comes to the experience you intentionally deliver.

Ultimately though, no matter if your site is HTML or a PWA, if it’s not optimized for SEO and designed with shoppers in mind, it will not rank well.

Best practices for optimizing your PWA SEO

So, how can you implement a progressive web app to positively impact your SEO? Part of this will be how you structure your content for on-page SEO.

Your ecommerce PWA needs to be indexable and crawlable for it to see success in the SERP. Without clear headings and optimized metadata throughout, it’ll be challenging for Google to parse what your site is about.

It’s also important to account for other ranking factors like accessibility—both with devices and customer needs.

Here are a few best practices to bake into your PWA build process or apply to your existing PWA.

1. Ensure your canonical URLs are clearly defined

Canonical URLs are a big part of proper PWA SEO. These URLs ensure no confusion for search engines if different URLs direct to the same content or page.

Canonical URLs help define which URLs have identical or similar content using the rel=” canonical” attribute found in the header of a page and tell search engines which is the preferred URL.

If you have duplicate pages on your site with the same (or similar) content, this can often lead to confusion as Google indexes your site.

So, instead of blocking Google from crawling duplicate pages, use proper canonical URL structure instead. Add the following script on what could be seen as duplicate page content to outright signal to Google where the “original” content lives:

<link rel=”canonical” href=”https://www.example.com/your-url/” />

#cta-visual-fe#<cta-title>Want more examples of best-performing progressive web app? <cta-title>Check out our roundup of the top PWAs. Read more

2. Clean up your HTML for accessibility

On the topic of making your site crawlable, go back to the basics. It’s important to make sure your HTML is in excellent shape—meaning you’ve got proper use of alt text, headings, sections, title tags, labels, and other code components.

Not only does tidy code help Google understand what your site is about, but it helps with accessibility (a ranking factor).

The World Wide Web Consortium (W3C) sets the standard for HTML practices and says proper alt text and tags are vital to make images understandable for screen readers and for SEO purposes:

“…if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won’t miss important sections of your pages.”

Accessibility, in this case, refers to both shoppers who use screen readers but also to search engine bots. Not only does clean HTML help you stay organized, but it’s crucial for meeting accessibility standards and SEO.

For further reading on web accessibility, check out these resources:

• Web Content Accessibility Guidelines (WCAG) 2.0
• Introduction to Web Accessibility

3. Build your PWA site with various devices in mind

Your PWA should be responsive no matter the device customers use—desktop, mobile, or tablet.

QA your site on multiple devices to ensure images render correctly across devices and that there aren’t any accessibility or device break-point issues.

• Specifically:
  Google recommends using the srcset attribute to fetch images with various resolutions to accommodate for devices with different screen densities. This avoids having to download images larger than what your customers’ device(s) is capable of displaying.

• Additionally, make sure your fonts and line height are scaled properly so the text is legible no matter the screen size.

4. Continue to test your site as you optimize

It’s important to keep testing your site, especially after you update it.

Testing your site with tools like Google Lighthouse, Google PageSpeed Insights, and standard site QA (like checking links, ensuring images render properly, forms lead to the correct subsequent URL, etc.) can make all the difference in how your site ranks.

#cta-mini-fe#Learn more about gauging PWA success in this blog post: Measuring PWA Performance: What to Know About Data Integrity and ROI

PWA’s don’t mean default SEO benefits, but they’ll prime you for success

While building a progressive web app does not guarantee incredible SEO rankings, there’s a lot you can do with this tech that gives a PWA a leg up over HTML sites.

PWAs offer scaling brands unparalleled site speed and far greater design potential, which contribute to excellent customer experience and SEO.

They grant flexibility that can take your ecommerce site to a whole new level. And with careful content optimization, your site can maintain or even improve your search positions.

Building a PWA for your brand doesn’t mean you’ll be soaring above your competition in the SERP automatically, but it means you’ll be set up for long-term growth and success given the benefits of headless PWAs.

#cta-visual-fe#<cta-title>A radically different approach to headless commerce<cta-title>See why scaling brands are choosing to build their PWAs with an all-in-one Frontend Platform: Shogun Frontend. Learn more