How can Progressive Web Apps (PWA) and Accelerated Mobile Pages (AMP) work together to create an optimal user experience, from search to conversion? Find out this and more in our next webinar! Having both frameworks sharing a unique set of URLs makes search engines’ crawling and indexing much easier and straightforward. No need to deal with canonical tags, alternate tags and other signals to establish relationships between similar documents: only one document per piece of content. In this webinar, Max will talk about getting the best out of both worlds: the speed of AMP from the search results and the functionalities of PWA for UX, engagement and conversion. As well as how to integrate AMP with PWA on the same URLs.

1. @maxxeight
Making the Bot Experience as Good
as the User Experience
PWA & AMP

2. @maxxeight
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Max Prin",
"url": "https://maxprin.com",
"jobTitle": "Head of Technical SEO",
"worksFor": "Merkle",
"sameAs": [
"https://twitter.com/maxxeight",
"https://www.linkedin.com/in/maxprin"
]
}
</script>

3. @maxxeight
A great user experience… search engines can understand.
• Relevant
• Mobile-Friendly
• Fast
• Secure
• Popular
Organic Search Performance is Based on:
• Content
• Web Design
• Site Speed
• SSL/HTTPS
• Links

4. @maxxeight
A great user experience… search engines can understand.
• Relevant
• Mobile-Friendly
• Fast
• Secure
• Popular
Organic Search Performance is Based on:
• Content
• Web Design
• Site Speed
• SSL/HTTPS
• Links

5. @maxxeight

6. @maxxeight

7. @maxxeight

8. @maxxeight

9. @maxxeight
“hidden” content <picture> and srcset
Tabs
Accordions
Click-to-expand
When loaded automatically
(vs. user click)
Mobile-Friendly-Optimized Design
<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png" alt="large PNG image...">
</picture>
<img srcset="example-320w.jpg 320w,
example-480w.jpg 480w,
example-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="example-800w.jpg" alt="responsive web!">

10. @maxxeight
Native apps
Web apps

11. @maxxeight
Reliable and Fast Engaging
• Mobile-Friendly
• Fast*
• Secure (HTTPS)
Progressive Web Apps
• Home Icon
• Push Notifications

12. @maxxeight
Crawling and Rendering
• Evergreen Googlebot
• Lazy Loading
• User-triggered Content
• + links (mega menu, etc.)
Progressive Web Apps

13. @maxxeight
Lazy Loading (Images)

14. @maxxeight
Accelerated Mobile Pages
AMP HTML+JS AMP Cache (CDN) Pre-loading

15. @maxxeight
AMP “Real” URL with Signed Exchanges

16. @maxxeight
Custom JavaScript in AMP with <amp-script>
Restrictions
• Maximum of 10,000 bytes per amp-script
• Maximum total of 150,000 bytes for all amp-
script elements on the page

17. @maxxeight
AMP for E-Commerce
<amp-sidebar>
- Navigation
<amp-carousel>
<amp-list>
- Product organization
<amp-form>
- Searching
<amp-bind>
- Filtering and sorting
<amp-access>
- Logged in/out
<amp-accordion>
- Product images/details
<amp-form>
<amp-carousel>
- Comments/reviews
<amp-selector>
- Tabs/Thumbnails
<amp-bind>
- Color/size selection
<amp-state>
- Add to cart

18. @maxxeight
Checkout/Payments in AMP
PaymentRequest API
- Chrome only
<amp-form>
- Checkout flow in AMP pages
- No completion in AMP
Redirect users to website

19. @maxxeight
AMP
English
m.
English
m.
French
Desktop
English
Desktop
French
rel="amphtml"
rel="amphtml"
rel="amphtml"
rel="canonical"
rel="amphtml"
rel="canonical"
rel="canonical"
rel="alternate"
rel="canonical"
rel="alternate"
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
AMP
French

20. @maxxeight
Desktop
English
Desktop
French
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"

21. @maxxeight
AMP: Initial User Acquisition PWA: Interactivity/Engagement
• Optimized discovery
• Instant delivery
• Limited features
How to Get the Best of Both Worlds?
• Advanced features
• Highly dynamic
• Slower first delivery

22. @maxxeight
Combine AMP and PWA
AMP pages
with PWA
features
AMP
as entry
point into
your PWA
AMP
as data
source for
your PWA

23. @maxxeight
AMP as Entry Point into your PWA
<amp-install-serviceworker>

24. @maxxeight

25. @maxxeight
AMP and PWA on the same URL(s)?

26. @maxxeight
AMP
English
m.
English
m.
French
rel="amphtml"
rel="amphtml"
rel="amphtml"
rel="canonical"
rel="amphtml"
rel="canonical"
rel="canonical"
rel="alternate"
rel="canonical"
rel="alternate"
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
AMP
French
Desktop
English
Desktop
French
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"

27. @maxxeight
self.addEventListener('fetch', event => {
if (event.request.mode === 'navigate') {
event.respondWith(
fetch(event.request.url + '?pwa=true')
);
} else {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
}
});
service-worker.js

28. @maxxeight
RewriteEngine on
RewriteCond %{QUERY_STRING} pwa=true [OR]
RewriteCond %{HTTP_REFERER} ^https://pwamp.site/.* [OR]
RewriteCond %{HTTP_REFERER} ^https://pwamp-site.cdn.ampproject.org/.*
RewriteRule (.*) /pwa.php [L]
.htaccess

29. @maxxeight

30. @maxxeight
AMPs are not rendered
• Bots only see <amp-img> (vs. <img>)
• They don’t crawl/index the “src” URL
•
• Use <noscript>
AMP images are not indexable (even above-the-fold)

31. @maxxeight
“What about SEO?”
Bots only crawl/index the AMP version of the site
No waste of crawling resources over multiple URLs for the same content
Clear signaling (i.e. don’t worry about all of those canonical/alternate tags)
Pages are fast and pre-loaded in the SERP (AMP viewer or “Real URL”)
Pages are mobile-friendly

32. @maxxeight
PWAMP Examples and Resources
https://pwamp.site https://www.howpwampworks.com (by @aleyda)

33. @maxxeight
Thank You!