Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Max Prin
@maxxeight
PWA + AMP:
The Future of E-Commerce?
Slides:
maxpr.in/pwamp
2 Max Prin @maxxeight #
3 Max Prin @maxxeight #
Max Prin @maxxeight4 #
Max Prin @maxxeight5 #
AMP
English
m.
English
m.
French
Desktop
English
Desktop
French
rel="amphtml"
rel="amphtml"
rel="am...
6 Max Prin @maxxeight #
0.0
0.5
1.0
1.5
2.0
2.5
3.0
2010 2011 2012 2013 2014 2015 2016 2017 2018
Billions
Western Europe
N...
7 Max Prin @maxxeight #
However, mobile phones…
…have smaller screens
(less space for content)
…are slower
(less processin...
Max Prin @maxxeight8 #
Source: Soasta
Max Prin @maxxeight9 #
Source: Soasta
Max Prin @maxxeight10 #
Max Prin @maxxeight11 #
Max Prin @maxxeight12 #
AMP
English
m.
English
m.
French
Desktop
English
Desktop
French
rel="amphtml"
rel="amphtml"
rel="a...
Max Prin @maxxeight13 #
Website
English
Website
French
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
Max Prin @maxxeight | #brightonSEO
AMP
(for e-commerce)
15 Max Prin @maxxeight #
Why are AMPs so fast? (in a nutshell)
AMP HTML+JS AMP Cache (CDN) Prerendering
Max Prin @maxxeight | #brightonSEO
over 60%
of the clicks to AMP in Google search go to non-news sites
17 Max Prin @maxxeight #
89%
6%
5%
Websites without AMP
Websites with AMP errors
Websites without AMP errors
Out of ~1000 ...
Max Prin @maxxeight | #brightonSEO
Agenda
Max Prin @maxxeight | #brightonSEO
Category page
<amp-sidebar>
- Navigation
<amp...
Max Prin @maxxeight | #brightonSEO
Agenda
Max Prin @maxxeight | #brightonSEO
Product page
<amp-video>
<amp-accordion>
- Pr...
Max Prin @maxxeight | #brightonSEO
What about “SEO”?
AMP is not a ranking factor
A “really fast” site doesn’t rank better ...
21 Max Prin @maxxeight #
AMP documentation
https://www.ampproject.org/docs/reference/components https://www.ampbyexample.c...
22 Max Prin @maxxeight #
AMP tools
https://search.google.com/test/amp https://technicalseo.com/seo-tools/amp/
Max Prin @maxxeight | #brightonSEO
Max Prin @maxxeight | #brightonSEO
Agenda
Max Prin @maxxeight | #brightonSEO
Checkout
Payment Requests API
- Chrome only
<...
Max Prin @maxxeight | #brightonSEO
PWA
(progressive web app)
Max Prin @maxxeight26 #
Native apps
Web apps
Max Prin @maxxeight27 #
Native apps
Web apps
Reliable and Fast
Engaging
Max Prin @maxxeight28 #
Max Prin @maxxeight | #brightonSEO
Progressive Web Apps AMPs
(the ultimate configuration)
30 Max Prin @maxxeight #
AMP as entry point into your PWA
<amp-install-serviceworker>
31 Max Prin @maxxeight #
AMP as entry point into your PWA
32 Max Prin @maxxeight #
The service worker “hijacks” the click – The server handles the rest of the magic
if (event.reque...
Max Prin @maxxeight | #brightonSEO
Max Prin @maxxeight | #brightonSEO
What about “SEO”?
Bots only crawl/index the AMP version of your pages
No waste of resou...
35 Max Prin @maxxeight #
PWAMP examples and resources
https://pwamp.shop https://www.howpwampworks.com (by @aleyda)
Thank you!
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

8

Share

Download to read offline

PWA + AMP: The Future of E-Commerce? Max Prin - BrightonSEO - Sept. 2018

Download to read offline

PWA + AMP: The Future of E-Commerce?
Max Prin - BrightonSEO - Sept. 2018

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

PWA + AMP: The Future of E-Commerce? Max Prin - BrightonSEO - Sept. 2018

  1. 1. Max Prin @maxxeight PWA + AMP: The Future of E-Commerce? Slides: maxpr.in/pwamp
  2. 2. 2 Max Prin @maxxeight #
  3. 3. 3 Max Prin @maxxeight #
  4. 4. Max Prin @maxxeight4 #
  5. 5. Max Prin @maxxeight5 # 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
  6. 6. 6 Max Prin @maxxeight # 0.0 0.5 1.0 1.5 2.0 2.5 3.0 2010 2011 2012 2013 2014 2015 2016 2017 2018 Billions Western Europe North America Middle East & Africa Latin America Central & Eastern Europe Asia-Pacific Source: Mobile Internet Users, eMarketer, January 2018 Worldwide Mobile Internet Users
  7. 7. 7 Max Prin @maxxeight # However, mobile phones… …have smaller screens (less space for content) …are slower (less processing power, memory) …can have weak connections (3G, 4G < Cable, Fiber)
  8. 8. Max Prin @maxxeight8 # Source: Soasta
  9. 9. Max Prin @maxxeight9 # Source: Soasta
  10. 10. Max Prin @maxxeight10 #
  11. 11. Max Prin @maxxeight11 #
  12. 12. Max Prin @maxxeight12 # 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
  13. 13. Max Prin @maxxeight13 # Website English Website French rel="alternate" hreflang="en" rel="alternate" hreflang="fr"
  14. 14. Max Prin @maxxeight | #brightonSEO AMP (for e-commerce)
  15. 15. 15 Max Prin @maxxeight # Why are AMPs so fast? (in a nutshell) AMP HTML+JS AMP Cache (CDN) Prerendering
  16. 16. Max Prin @maxxeight | #brightonSEO over 60% of the clicks to AMP in Google search go to non-news sites
  17. 17. 17 Max Prin @maxxeight # 89% 6% 5% Websites without AMP Websites with AMP errors Websites without AMP errors Out of ~1000 online stores (picked globally, by traffic)
  18. 18. Max Prin @maxxeight | #brightonSEO Agenda Max Prin @maxxeight | #brightonSEO Category page <amp-sidebar> - Navigation <amp-carousel> <amp-list> - Product organization <amp-form> - Searching <amp-bind> - Filtering and sorting <amp-access> - Logged in/out
  19. 19. Max Prin @maxxeight | #brightonSEO Agenda Max Prin @maxxeight | #brightonSEO Product page <amp-video> <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
  20. 20. Max Prin @maxxeight | #brightonSEO What about “SEO”? AMP is not a ranking factor A “really fast” site doesn’t rank better than a “fast” site Faster is better (+ AMP cache/pre-loading) AMP = mobile-friendly SERP visibility
  21. 21. 21 Max Prin @maxxeight # AMP documentation https://www.ampproject.org/docs/reference/components https://www.ampbyexample.com
  22. 22. 22 Max Prin @maxxeight # AMP tools https://search.google.com/test/amp https://technicalseo.com/seo-tools/amp/
  23. 23. Max Prin @maxxeight | #brightonSEO
  24. 24. Max Prin @maxxeight | #brightonSEO Agenda Max Prin @maxxeight | #brightonSEO Checkout Payment Requests API - Chrome only <amp-form> - Checkout within AMP?
  25. 25. Max Prin @maxxeight | #brightonSEO PWA (progressive web app)
  26. 26. Max Prin @maxxeight26 # Native apps Web apps
  27. 27. Max Prin @maxxeight27 # Native apps Web apps Reliable and Fast Engaging
  28. 28. Max Prin @maxxeight28 #
  29. 29. Max Prin @maxxeight | #brightonSEO Progressive Web Apps AMPs (the ultimate configuration)
  30. 30. 30 Max Prin @maxxeight # AMP as entry point into your PWA <amp-install-serviceworker>
  31. 31. 31 Max Prin @maxxeight # AMP as entry point into your PWA
  32. 32. 32 Max Prin @maxxeight # The service worker “hijacks” the click – The server handles the rest of the magic if (event.request.mode === 'navigate') { event.respondWith( fetch(event.request.url + '?pwa=true') ); } RewriteEngine on RewriteCond %{QUERY_STRING} pwa=true RewriteRule (.*) /pwa.php [L]
  33. 33. Max Prin @maxxeight | #brightonSEO
  34. 34. Max Prin @maxxeight | #brightonSEO What about “SEO”? Bots only crawl/index the AMP version of your pages No waste of resources crawling multiple URLs for the same content Clear signaling (i.e. don’t worry about your canonical tags) Pages are fast and preloaded in the SERP (AMP viewer) Pages are mobile-friendly
  35. 35. 35 Max Prin @maxxeight # PWAMP examples and resources https://pwamp.shop https://www.howpwampworks.com (by @aleyda)
  36. 36. Thank you!
  • oylumofis

    Jun. 28, 2020
  • NicolasBarbCalon

    Aug. 20, 2019
  • kloeschen

    Feb. 13, 2019
  • ChrisDrury6

    Oct. 5, 2018
  • NormanHhne

    Oct. 4, 2018
  • BlakeAndrew

    Oct. 2, 2018
  • saraplus

    Sep. 30, 2018
  • suzukik

    Sep. 28, 2018

PWA + AMP: The Future of E-Commerce? Max Prin - BrightonSEO - Sept. 2018

Views

Total views

4,650

On Slideshare

0

From embeds

0

Number of embeds

1,367

Actions

Downloads

67

Shares

0

Comments

0

Likes

8

×