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.

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

1,959 views

Published on

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

Published in: Internet
  • Be the first to comment

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!

×