MENUMENU
  • Services
    • Services
      • Search Engine Optimization
      • Local SEO
      • Generative Engine Optimization
      • Digital PR
      • Content Marketing
      • Email Marketing Services
      • Lifecycle Marketing
      • Paid Media Advertising
      • Social Media Marketing
      • Creative Design Services
      • Conversion Rate Optimization
      • Website Design & Development
      • Amazon Marketing Services
      • Franchise Marketing
      • Franchise Development
      • National to Local Marketing
      • Reporting and Data Analytics
      • Digital Marketing Strategy
  • Who We Serve
    • Who We Serve
      • Franchise Marketing
      • B2B Marketing
      • Lead Generation
      • Ecommerce
      • We Build Custom Strategies
      • View Sample Industries
  • About Us
    • About Ignite Visibility
      • Our Story
      • Our Values
      • Our Team
      • Clients
      • Diversity & Inclusion
      • Our Blog
      • Marketing Resources
      • Franchise Marketing Resources
      • Careers
      • Hiring Notice
  • Case Studies
  • Awards
  • Contact
  • 619.752.1955
Home / Blog / Understanding Progressive Web Apps and AMP for Advanced SEO

Understanding Progressive Web Apps and AMP for Advanced SEO

March 6, 2018 By John Lincoln

AMP and Progressive Web Apps are all the rage these days. They are light-weight, SO fast, mobile-first and new-er technologies.

In this blog, I will breakdown what AMP and PWA (progressive web apps) are and how to best implement them onto your site (and of course cover SEO)

Progressive Web Apps and AMP
Progressive Web Apps and AMP

Chances are, you’ve heard the words “AMP” and “PWA” thrown around a lot these days.

Both are big news for businesses and the mobile web, and each has plenty to offer in their own right.

But they’re most effective when they work together.

In this article, I’ll cover everything you need to know about AMP and PWA, and how to integrate the two for an enhanced mobile web experience.

First, I know many people come to this blog for SEO, so I am going to jump ahead and cover this first. We will dive into the full article after.

A Quick Note On AMP, PWA and SEO

One thing that is important to note, is that AMP and progressive web apps are very new and their technical SEO implementation is evolving.

Right now, here is what you need to know.

  1. AMP pages are rel canonical to another page in 99% of cases. This means, Google does not rely on them for ranking. If you have a responsive design site, the AMP page will canonical to that URL. If you have a mobile subdomain, it will canonical to the mobile domain.
  2. There are some AMP only websites being built now. In this case, they are being indexed by Google. So there is no canonical. And sure, these pages can rank and basically operate under the same principals as normal HTML pages. They need all the same stuff.
  3. Progressive Web Apps are starting to get picked up better by Google, but it is still a little hit or miss. If you do want the content to get indexed by a PWA for SEO ranking purposes, its a good idea to either have an HTML base and load the progressive web app over that, use a tool like prerender.io and/or pushstate.
  4. Just having an AMP and a PWA based site is possible, but for SEO purposes, you want to make sure the AMP has similar qualities to a normal high functioning SEO site.
  5. Best case scenario at the moment is to have a lightweight CMS that delivers HTML elements, PWA elements loaded over that but not to the point where there is cloaking and AMP installed on the pages that are news related or have limited functionality.

 

Diving Deeper – Progressive Web Apps and AMP: What is PWA?

A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users.

According to Wikipedia, “progressive web apps are a hybrid of regular web pages (or websites) and a mobile application. This new application model attempts to combine features offered by most modern browsers with the benefits of mobile experience.”

In layman’s terms, it’s technology that helps a website behave more like a mobile app, thereby improving the overall user experience. It connects the experience of an app with the reach of the mobile web.

It works like this: When you visit a PWA page on your mobile device, it will start as a normal webpage in your browser. As you explore the page, you’ll soon be given a prompt “Add to Home Screen.” Once accepted, the page will live on your home screen and can appear as an app.

Why use a PWA? Because businesses can no longer rely on users to download their apps. In fact, over 50% of America’s smartphone users download zero Apps a month, and 80% of user’s time is spent in their top 3 apps.

Progressive Web Apps and AMP
Progressive Web Apps and AMP

For businesses, that translates to dollars spent on advertising, etc. with little return.

That, and PWA’s promise to make their take on apps more reliable, fast, and engaging.

To be considered a PWA, an app must be:

  • Progressive – Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.
  • Responsive – Fit any form factor, desktop, mobile, tablet, or whatever is next.
  • Connectivity independent – Enhanced with service workers to work offline or on low quality networks.
  • App-like – Use the app-shell model to provide app-style navigation and interactions.
  • Fresh – Always up-to-date thanks to the service worker update process.
  • Safe – Served via HTTPS to prevent snooping and ensure content has not been tampered with.
  • Discoverable – Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  • Re-engageable – Make re-engagement easy through features like push notifications.
  • Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable – Easily share via URL and not require complex installation.

Progressive Web Apps and AMP – Why Integrate PWAs With AMP?

Part of PWAs appeal is its ability to provide fast load times to users within in app.

But here’s the catch: that speed doesn’t kick in until the second load.

PWAs work througha  technology called Service Worker, a client-side proxy that only kicks in after the second request.

That means the first time a user loads a site, it could load slow.

And as we all know, the slower the site’s load time, the higher the bounce rate:

  • A 100-millisecond delay can reduce conversion rates by as much as 7%
  • A two-second delay in page load time can increase bounce rates by more than 100%
  • 53% of mobile users will leave a page that takes longer than 3 seconds to load

Unfortunately, most sites don’t come close to those numbers: the average page loading time is 19 seconds, with 77% of mobile sites taking 10+ seconds to load.

That spells trouble for mobile sites – even those using PWA. But don’t worry; there’s a light at the end of this tunnel. All PWA users need to do is increase that initial load time.

And that’s where AMP comes in.

AMP stands for accelerated mobile pages, and it’s designed to make web pages load fast. Really fast.

Those who view AMP pages see the same relevant content as desktop users, but it’s on a page with a much more simplistic design that allows it load much more quickly.

As Google notes, the two were previously working in conflict. But if the two were integrated, it would allow them to “deliver fast initial loading and reliable second-visit performance, as well as advanced features like offline reading and richer UI treatment.”

Here’s a brief breakdown of each:

  • AMP
    • Reliable, instant delivery
    • Optimized discovery
    • No Javascript
    • Static content
  • PWA
    • First delivery can be slower
    • Not easily embedded
    • Access latest web APIs
    • Support dynamic content

The two are obvious compliments, as each supply features that the other lacks.

The two work well on their own, but they’re undeniably stronger together. That’s because they deliver what customers want: fast load times and seamless experiences.

If you’re considering using a PWA, you’ll want to make sure your initial loads as a quick as possible to reduce your bounce rate.

How to Integrate Progressive Web Apps and AMP

Now that we’ve covered the why, let’s move to the how.

There are three ways to combine PWA and AMP:

  1. AMP as PWA
  2. AMP to PWA
  3. AMP in PWA

AMP as PWA

For sites that have static activity and don’t have much interactivity, you can have an AMP that’s also a PWA.

For example, Mynet, a leading publisher in Turkey, used an AMP page as a PWA and saw the following results:

  • +25% higher revenue per article page view
  • 4x faster page load speed
  • +43% longer average time on site
  • +34% more page views per session
  • -24% lower bounce rates

But keep in mind, to use AMP as a PWA you’ll have to live within the boundaries of AMP. By using it as a PWA, you’ll still have Service Worker, which will allow users offline access, etc., and still prompt the “Add to Homescreen” banner.

When using AMP as PWA, a user will visit the AMP-supported site. As they click through the site, they will navigate away from the AMP cache to the origin, allowing your site to add a service worker and deliver added functionality, including:

  • Dynamic features that require Javascript
  • Components that are customized/only relevant to your site

To add PWA to your AMP site, you’ll need to add a Web App Manifest. This ensures that users can install your site on their home screen.

To do so, you’ll first create the manifest:

Then link to it from the head of your AMP page:

Next, you’ll install a Service Worker. To do that, you’ll need to include the service worker script on your page:

Then add the following code to the body of your page:

From there, you can modify the response via the Service Workers fetch to return any response you want.

AMP to PWA

Sometimes, AMP capabilities simply aren’t enough. If you’re looking for a different experience around your PWA, you can still AMP to get there.

Essentially, AMP to PWA uses AMP as an entry point for your site, then “warms up” the PWA behind the scenes so it can switch over. That way, when a user clicks on a site organically in the search results, they’ll be served a fast-loading AMP page. As they navigate the site, the service worker will kick in.

Progressive Web Apps and AMP
Progressive Web Apps and AMP

The process involves three steps:

  1. User discovers content
  2. Service worker installs in the background
  3. User is instantly upgraded to PWA

Using AMP to PWA allows:

  • All content “leaf” pages (those that have specific content, not overview pages) are published as AMPs for that nearly instant loading experience.
  • These AMPs use AMP’s special element <amp-install-serviceworker> to warm up a cache and the PWA shell while the user is enjoying your content.
  • When the user clicks another link on your website (for example, the call to action at the bottom for a more app-like experience), the service worker intercepts the request, takes over the page and loads the PWA shell instead.

To set it up, you’ll follow the same steps above to install the service worker on all of your AMPs.

Then, in the service workers installation step, you’ll cache any resources that the PWA will need:

With that in place, you’ll next want to make sure that all the links on your site lead to the PWA. There are two strategies for doing so:

  1. If you pair your canonical pages with AMP pages

This is the most common way AMP is used, and means that all the links on your page link to the canonical version of your site. If your canonical site is your PWA, your work is done.

  1. If your canonical site is AMP.

This happens when your canonical pages are your AMP pages, and means that the links on your site lead to other AMP pages.

If that’s the case, you’ll need to use your service worker to intercept the browser navigation when someone clicks on a link in your AMP page.

It will look like this:

Google does note that while this approach enables a progressive enhancement to go from AMP to PWA, it also means that browsers that don’t yet support service workers will never actually navigate to the PWA.

But AMP’s one step ahead, and combats the issue with something called a shell URL rewrite. Doing so instructs AMP to rewrite all matching links on a page to go to another legacy shell URL, ensuring that all clicks go to your PWA.

As an example, let’s look at recipe site Rakuten. Using this method, the company saw:

  • +50% time spent on site per user
  • 3.6x higher CTR within AMP page
  • Due to the add to home screen feature, they saw:
  • 1.7x more unique visits
  • 3.1x more page views

AMP in PWA

This last version uses your AMP pages as a data source to power your PWA.

Traditionally, Progressive Web App is a “single page application that connects to a JSON API via Ajax.”

But rather than use the JSON API, users can simplify the development by using their existing AMP Pages.

Why? Because AMP pages aren’t just web pages; they’re “ultra-portable, embeddable content units that can stand on their own.” Because of that, AMP HTML can power both the AMP and PWA experience.

To do so, Google recommends including a Shadow DOM in your PWA.

  1. In practice, the process looks like this:
  2. PWA hijacks navigation clicks
  3. Fetch the requested AMP page
  4. Put content into a new shadow root
  5. Call attachShadowDoc

The best part? If you already have AMP pages, you can insert a Shadow Dom in an hour.

The first step is including the Shadow Dom in the head of your page. It should look like this:

Then, once AMP has loaded, you’ll fetch the AMP doc via XMLHTTP request and return a response HTML.

To do that, you’ll render it using Shadow AMP, which means you will:

  1. Create a new shadow root
  2. Let AMP render the document
  3. Return a promise to notify when ready

Shadow AMP can be used to accomplish a number of objectives such as hiding unnecessary information like headers and footers when embedded.

For more information on how to use and set up Shadow AMP, check out these guides.

Or, see it in action with the AMP team’s demo, a fake travel magazine called the Scenic. You can view it on GitHub.

 

Wrapping Up AMP and PWA Integration

We’ve covered a lot of ground here, so let’s take a look at the highlights.

  • AMP/PWA is always fast – no matter what
  • It has great distribution built in
  • Progressively enhanced
  • One backend to rule them all
  • Less client complexity, fewer deploy targets

Remember, this is all still very new, and we’re only beginning to scrape the surface of what an AMP/PWA integration could mean for businesses.

But so far, all signs point towards success.

 

Related Posts

  • Core Web Vitals for SEO - Ignite Friday

    Updated: 3/17/2021 Remember the speed report in Google Search Console? It’s gone. Don’t worry, though.…

  • Hummingbird Update SEO Video

    The Hummingbird Update Changed SEO - In this video, John Lincoln, President of SEO and…

  • How Do New Trends in Mobile Web Design Affect SEO?

    In the current age of mobile device use, webmasters are having to adapt to the…

About John Lincoln

John Lincoln (MBA) is the CEO of Ignite Visibility, a top performance marketing agency backed by Mountaingate Capital. A digital marketing strategist and keynote speaker, Lincoln has managed over 1,000 marketing programs for brands like DoorDash, HBO, Tony Robbins, and Experian. Under his leadership, Ignite Visibility has been named a leading digital marketing agency in the U.S. and made the Inc. 5,000 list six times. Lincoln also spearheaded the development of CertaintyTech, a cutting-edge media mix modelling and forecasting platform. An award-winning marketer, Lincoln has authored three books, including Advolution (2022), and produced films such as SEO: The Movie. Recognized as a Top Business Leader, he has been featured in Forbes and The New York Times and spoken at global events like Web Summit and SMX. Lincoln's mission is to empower businesses through innovative digital strategies while reinvesting in clients, employees, and the community.

About Ignite

Ignite Visibility is a premier full-service digital marketing agency. We were founded in San Diego, CA but are now a 100% remote-first company with Igniters and clients around the globe.

Ignite Visibility is one of the highest awarded digital marketing agencies in the industry, works with some of the biggest brands in the world and is a 6x Inc. 5000 company.

noun-trading

Our Services

Ignite Visibility offers Award-Winning Services including comprehensive full-funnel digital marketing strategies. Learn more about our most popular service offerings below:

  • SEO Search Engine Optimization
  • PPC Pay Per Click
  • Email Marketing
  • Social Media
  • Creative
  • View All Services

Contact Us. Let’s Chat!

  • This field is hidden when viewing the form

Marketing Guides

SEO In 2020: How To Prepare For Major Disruption

"SEO: The Movie" - Have You Seen Our Film? Watch Now

"Social Media Marketing: The Movie" - Have You Seen Our Film? Watch Now

Amazon Seller Central vs Vendor Central

Listen To The Podcast Featuring The Best Minds In Marketing

John Lincoln Interviews Global Director of Digital Marketing & Strategy at Qualcomm, Jessica Jensen

Check Out 227 Free Online Marketing Classes

The 2020 Guide To Dominating SEO With Advanced Schema

Learn More About Our Digital Marketing Agency

Learn More About Our SEO Services

Learn More About Our Paid Media Services

SELECT CATEGORY

Become A Contributor

Interested in writing for Ignite Visibility?

APPLY NOW

noun-chat

Let's Chat

Ready to grow your online visibility and sales?

Request Your Free Proposal

Work With Us

NEWSLETTER // SIGN UP NOW










noun-strategy

Free Marketing Resources

  • Digital Marketing Resources
  • Marketing Strategy Videos
  • Weekly Marketing News Recaps
noun-strategy

Most Popular Blogs

  • How Long Does SEO Take?
  • Multi-Location SEO: Top Strategies
  • Google AI Overviews: Everything You Need to Know
  • Technical SEO 101
  • 18 Google Ad Extensions You Should Use
  • Complete Guide to Google Responsive Display Ads
  • Capitalizing on Local Service Ads
  • How SEO and PPC Work Together
  • Community Management Best Practices
  • B2B Social Media Marketing Guide
  • VIEW ALL BLOGS
noun-letter

Join Our Newsletter

CONNECT WITH US

  • facebook
  • twitter
  • instagram
  • youtube
  • linkedin

Services

  • Search Engine Optimization
  • Generative Engine Optimization
  • Pay Per Click Management
  • Social Media Marketing
  • Email Marketing
  • Conversion Rate Optimization
  • Website Design & Development
  • Creative Design
  • Content Marketing
  • Digital PR
  • Franchise Marketing
  • Digital Marketing Agency Services

About

  • Our Team
  • Our Values
  • Clients
  • Industry
  • Reviews
  • Careers
  • Marketing Resources
  • Privacy Policy & Service Terms
  • Advertising Disclosures
  • Sitemap

Contact

4370 La Jolla Village Drive
Suite 320
San Diego, California 92122

619.752.1955

Join The Newsletter

Sign up for our newsletter to get the latest from Ignite Visibility.











google parther logo

©2025 Ignite Visibility. All Rights Reserved. Privacy Policy and Terms of Service