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 SEO: Optimizing for the Future of the Web

2,118 views

Published on

What are PWAs and how you can optimize for them? In this presentation Aleyda goes through Progressive Web Apps fundamentals as well as best practices to make them SEO friendly.

Published in: Marketing
  • The "Magical" Transformation That Happens When Two Brain Technologies Combine! ■■■ http://scamcb.com/manifmagic/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • HOW TO UNLOCK HER LEGS! (SNEAK PEAK), learn more... ▲▲▲ http://t.cn/AiurDrZp
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The "Magical" Science Behind The Law of Attraction ■■■ https://tinyurl.com/y6pnne55
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

PWA SEO: Optimizing for the Future of the Web

  1. 1. #pwaseo by @aleyda from #orainti at @digitaleliteday! #pwaseo by @aleyda from #orainti at @digitaleliteday! PWA SEO Optimizing for the Future of the Web
  2. 2. #pwaseo by @aleyda from #orainti at @digitaleliteday! Mobile Apps are broken #pwaseo by @aleyda from #orainti at @digitaleliteday!
  3. 3. #pwaseo by @aleyda from #orainti at @digitaleliteday! They eat your mobile battery
  4. 4. #pwaseo by @aleyda from #orainti at @digitaleliteday! Take a lot of phone space
  5. 5. #pwaseo by @aleyda from #orainti at @digitaleliteday! Require constant updates
  6. 6. #pwaseo by @aleyda from #orainti at @digitaleliteday! App Store search is broken
  7. 7. #pwaseo by @aleyda from #orainti at @digitaleliteday! Provide a Fragmented and vertical specific app experience
  8. 8. #pwaseo by @aleyda from #orainti at @digitaleliteday! Can be expensive to develop https://www.consagous.com/blog/how-much-does-it-cost-to-build-an-app/
  9. 9. #pwaseo by @aleyda from #orainti at @digitaleliteday! #pwaseo by @aleyda from #orainti at @digitaleliteday! Sorry!
  10. 10. #pwaseo by @aleyda from #orainti at @digitaleliteday! And yet we end up installing a lot of apps Think With Google
  11. 11. #pwaseo by @aleyda from #orainti at @digitaleliteday! Why do we keep using apps then?
  12. 12. #pwaseo by @aleyda from #orainti at @digitaleliteday! It’s easier to access apps through the home screen
  13. 13. #pwaseo by @aleyda from #orainti at @digitaleliteday! Apps can use additional phone features
  14. 14. #pwaseo by @aleyda from #orainti at @digitaleliteday! Mobile Websites speed & usability is shitty https://developers.google.com/speed/pagespeed/insights/
  15. 15. #pwaseo by @aleyda from #orainti at @digitaleliteday! You need internet connection to access Web content
  16. 16. #pwaseo by @aleyda from #orainti at @digitaleliteday! Yeah. 
 The Mobile Web is broken too! #pwaseo by @aleyda from #orainti at @digitaleliteday!
  17. 17. #pwaseo by @aleyda from #orainti at @digitaleliteday! Sigh. #pwaseo by @aleyda from #orainti at @digitaleliteday!
  18. 18. #pwaseo by @aleyda from #orainti at @digitaleliteday! Because of this we’re also sometimes forced to download apps
  19. 19. #pwaseo by @aleyda from #orainti at @digitaleliteday! Again and again. Sigh.
  20. 20. #pwaseo by @aleyda from #orainti at @digitaleliteday! At the end, we only use 1/3 of the apps we install
  21. 21. #pwaseo by @aleyda from #orainti at @digitaleliteday! https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report Although we spent most of our mobile time in them
  22. 22. #pwaseo by @aleyda from #orainti at @digitaleliteday! There’s an obvious gap between 
 the mobile Web vs. apps https://www.slideshare.net/greenido/from-amp-to-pwa
  23. 23. #pwaseo by @aleyda from #orainti at @digitaleliteday! The whole App vs. Mobile Web status is broken #pwaseo by @aleyda from #orainti at @digitaleliteday!
  24. 24. #pwaseo by @aleyda from #orainti at @digitaleliteday! But their destruction it’s not really a reasonable solution… #pwaseo by @aleyda from #orainti at @digitaleliteday!
  25. 25. #pwaseo by @aleyda from #orainti at @digitaleliteday! It’s time to welcome PWAs! A web app that provides a native app experience to Web users https://developers.google.com/web/progressive-web-apps/
  26. 26. #pwaseo by @aleyda from #orainti at @digitaleliteday! https://www.appypie.com/progressive-web-apps-the-future-of-mobile-web-app-development PWAs provide the benefits of an app without abandoning the Web
  27. 27. #pwaseo by @aleyda from #orainti at @digitaleliteday! While providing an improved 
 Web user experience https://developers.google.com/web/progressive-web-apps/
  28. 28. #pwaseo by @aleyda from #orainti at @digitaleliteday! PWAs close the gap between 
 Websites and apps https://www.onenorth.com/blog/post/whats-next-in-mobile-progressive-web-apps
  29. 29. #pwaseo by @aleyda from #orainti at @digitaleliteday! This is possible thanks to 
 the use of 4 technologies https://dzone.com/articles/pwa-technology
  30. 30. #pwaseo by @aleyda from #orainti at @digitaleliteday! All modern browsers now support PWAs https://twitter.com/firt/status/1105840379117662209
  31. 31. #pwaseo by @aleyda from #orainti at @digitaleliteday! https://developers.google.com/web/progressive-web-apps/desktop Not only on mobile but also on desktop
  32. 32. #pwaseo by @aleyda from #orainti at @digitaleliteday! Which is why many top mobile focused services are releasing PWAs https://appsco.pe/
  33. 33. #pwaseo by @aleyda from #orainti at @digitaleliteday! Uber
  34. 34. #pwaseo by @aleyda from #orainti at @digitaleliteday! Twitter
  35. 35. #pwaseo by @aleyda from #orainti at @digitaleliteday! 9GAG
  36. 36. #pwaseo by @aleyda from #orainti at @digitaleliteday! Add them to your home screen now
  37. 37. #pwaseo by @aleyda from #orainti at @digitaleliteday! “The Web is going to be 
 the new app store”
  38. 38. #pwaseo by @aleyda from #orainti at @digitaleliteday! You can also feature PWAs in App Stores too, although with a bit of extra work https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b
  39. 39. #pwaseo by @aleyda from #orainti at @digitaleliteday! https://developers.google.com/web/updates/2019/02/using-twa Trusted Web Activities highly facilitate this for the Play Store now
  40. 40. #pwaseo by @aleyda from #orainti at @digitaleliteday! https://twitter.com/firt/status/1127971459434000385 Enjoying the same native apps benefits
  41. 41. #pwaseo by @aleyda from #orainti at @digitaleliteday! “PWAs are a natural evolution of how we distribute and consume software” https://www.awwwards.com/PWA-ebook/
  42. 42. #pwaseo by @aleyda from #orainti at @digitaleliteday! … and at some point they’ll be also the future of native apps! https://www.smashingmagazine.com/2018/12/pwa-native-mobile-apps/
  43. 43. #pwaseo by @aleyda from #orainti at @digitaleliteday! There’s this feeling going on… PWAs Native Apps Brands #pwaseo by @aleyda from #orainti at @digitaleliteday!
  44. 44. #pwaseo by @aleyda from #orainti at @digitaleliteday! However, there are still limitations https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7
  45. 45. #pwaseo by @aleyda from #orainti at @digitaleliteday! The evolution will also be progressive
  46. 46. #pwaseo by @aleyda from #orainti at @digitaleliteday! How can you create a PWA then? #pwaseo by @aleyda from #orainti at @digitaleliteday!
  47. 47. #pwaseo by @aleyda from #orainti at @digitaleliteday! #pwaseo by @aleyda from #orainti at @digitaleliteday! You’ll see is not that hard…
  48. 48. #pwaseo by @aleyda from #orainti at @digitaleliteday! In the case of existing Websites, 
 there are 3 main steps to follow Set up a Service Worker, a JS that runs in the background, defining what data to store or update and notifications 3 Create a web manifest, a JSON file that informs about the PWA to be installable 2 Use a responsive website (that can be AMP based too) that will be your application 1 https://www.awwwards.com/PWA-ebook/
  49. 49. #pwaseo by @aleyda from #orainti at @digitaleliteday! Check out this step by step guide to migrate your site to a PWA https://codelabs.developers.google.com/codelabs/migrate-to-progressive-web-apps/
  50. 50. #pwaseo by @aleyda from #orainti at @digitaleliteday! As well as to develop a PWA from scratch https://codelabs.developers.google.com/codelabs/workbox-indexeddb/
  51. 51. #pwaseo by @aleyda from #orainti at @digitaleliteday! Or build a Progressive Web AMP site https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/
  52. 52. #pwaseo by @aleyda from #orainti at @digitaleliteday! https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/ There’s a full training provided 
 by Google Developers https://codelabs.developers.google.com/dev-pwa-training/
  53. 53. #pwaseo by @aleyda from #orainti at @digitaleliteday! And video tutorials in the Google’s Chrome Developers YouTube Channel https://www.youtube.com/playlist?list=PLNYkxOF6rcIB2xHBZ7opgc2Mv009X87Hh
  54. 54. #pwaseo by @aleyda from #orainti at @digitaleliteday! You can also use the “ready to customize and use” PWA Builder files https://www.pwabuilder.com/publish
  55. 55. #pwaseo by @aleyda from #orainti at @digitaleliteday! Check “How PWAMP Works” which I created following the Codelabs guide for AMP based PWAs https://www.howpwampworks.com/
  56. 56. #pwaseo by @aleyda from #orainti at @digitaleliteday! You can also enable PWA features to your Wordpress sites with Plugins https://superpwa.com/
  57. 57. #pwaseo by @aleyda from #orainti at @digitaleliteday! Which is the one I’ve used with “Why my Web Traffic Dropped” https://www.whymywebtrafficdropped.com/
  58. 58. #pwaseo by @aleyda from #orainti at @digitaleliteday! Magento now also supports AMP with its PWA Studio https://magento.com/products/magento-commerce/pwa
  59. 59. #pwaseo by @aleyda from #orainti at @digitaleliteday! How can you validate your PWAs? #pwaseo by @aleyda from #orainti at @digitaleliteday!
  60. 60. #pwaseo by @aleyda from #orainti at @digitaleliteday! PWAs features should follow best practices specified in the PWA checklist https://developers.google.com/web/progressive-web-apps/checklist
  61. 61. #pwaseo by @aleyda from #orainti at @digitaleliteday! Served over HTTPS Responsive on Mobile & Tablets There are baseline PWA features 
 that you’ll need to enable URLs should load while offline Metadata provided to add to the home screen Time to interactive should be <10 sec in 3G Should work across different browsers Pages transitions shouldn’t be blocked Each page should have a URL https://developers.google.com/web/progressive-web-apps/checklist
  62. 62. #pwaseo by @aleyda from #orainti at @digitaleliteday! You can verify them with the Lighthouse PWA validation in Chrome https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool
  63. 63. #pwaseo by @aleyda from #orainti at @digitaleliteday! Like this
  64. 64. #pwaseo by @aleyda from #orainti at @digitaleliteday! You can also use Chrome DevTools Application panel to verify service workers https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/
  65. 65. #pwaseo by @aleyda from #orainti at @digitaleliteday! As well as the App Manifest https://developers.google.com/web/fundamentals/web-app-manifest/
  66. 66. #pwaseo by @aleyda from #orainti at @digitaleliteday! Or use the PWA Builder to validate too
 https://www.pwabuilder.com/
  67. 67. #pwaseo by @aleyda from #orainti at @digitaleliteday! Which also allows to revise and edit your app manifest and
 service worker https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool
  68. 68. #pwaseo by @aleyda from #orainti at @digitaleliteday! But, do PWAs help SEO? #pwaseo by @aleyda from #orainti at @digitaleliteday!
  69. 69. #pwaseo by @aleyda from #orainti at @digitaleliteday! #pwaseo by @aleyda from #orainti at @digitaleliteday! I knew that question was coming…
  70. 70. #pwaseo by @aleyda from #orainti at @digitaleliteday! Websites that adopt PWA see benefits due to the App like functionality https://www.pwastats.com/
  71. 71. #pwaseo by @aleyda from #orainti at @digitaleliteday! However, PWA usage won’t help SEO as it’s not a ranking factor though… https://www.seroundtable.com/google-pwas-seo-24956.html
  72. 72. #pwaseo by @aleyda from #orainti at @digitaleliteday! On the other hand, PWA shouldn’t hurt SEO, a PWA doesn’t need to be a SPA https://love2dev.com/blog/pwa-spa/
  73. 73. #pwaseo by @aleyda from #orainti at @digitaleliteday! Your Website Your Web App
 (SPA or MPA) PWA You can develop a PWA from scratch, or migrate your SPA, MPA or Website
  74. 74. #pwaseo by @aleyda from #orainti at @digitaleliteday! It’s then critical to make sure that all these types of PWAs are also search friendly SEO https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
  75. 75. #pwaseo by @aleyda from #orainti at @digitaleliteday! While configuring your Google Analytics tracking to effectively measure its usage https://builtvisible.com/google-analytics-for-pwas-tracking-offline-behaviour-and-more/
  76. 76. #pwaseo by @aleyda from #orainti at @digitaleliteday! How can you optimize PWAs for search? #pwaseo by @aleyda from #orainti at @digitaleliteday!
  77. 77. #pwaseo by @aleyda from #orainti at @digitaleliteday! The PWA checklist includes some 
 SEO related best practices too Each page has a URL Site’s content is indexed by Google Canonical URLs are provided when necessary Avoid usage of fragment identifiers schema.org metadata is included https://developers.google.com/web/progressive-web-apps/checklist
  78. 78. #pwaseo by @aleyda from #orainti at @digitaleliteday! Sorry, no SPAs! 
 Each page has a URL Site’s content is indexe day Google Canonical URLs are provided when necessary Avoid usage of fragment identifiers schema.org metadata is included https://developers.google.com/web/progressive-web-apps/checklist
  79. 79. #pwaseo by @aleyda from #orainti at @digitaleliteday! Lighthouse doesn’t validate them automatically at the moment though https://developers.google.com/web/progressive-web-apps/checklist
  80. 80. #pwaseo by @aleyda from #orainti at @digitaleliteday! It’s then necessary to also validate these SEO best practices along the ones provided by Google https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
  81. 81. #pwaseo by @aleyda from #orainti at @digitaleliteday! Which are mostly the same and common to any Website SEO validation Make Your Content Crawlable Design for multiple devices Provide Clean URLs Use progressive enhancement Specify Canonical URLs Page load speed should be fast Use schema.org structured data Cross- browser support https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
  82. 82. #pwaseo by @aleyda from #orainti at @digitaleliteday! It’s specially important to validate if the PWA is a Web app relying on JS John Mueller from Google “One common approach to creating PWAs is to use client-side- rendering (essentially a bare-bones HTML page with JavaScript that creates all of the content & functionality); these kinds of sites can be rendered and indexed by Google, but it's usually much trickier than a static HTML site.” https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
  83. 83. #pwaseo by @aleyda from #orainti at @digitaleliteday! You want the pizza delivered ready to be eaten, not cooked at home!
  84. 84. #pwaseo by @aleyda from #orainti at @digitaleliteday! #pwaseo by @aleyda from #orainti at @digitaleliteday! Unless the chef is Jon Snow!
  85. 85. #pwaseo by @aleyda from #orainti at @digitaleliteday! Like the Magento PWA Demo Store, which passes the PWA validation… https://inchoopwa.com/
  86. 86. #pwaseo by @aleyda from #orainti at @digitaleliteday! …but it looks like this when JS is disabled since it’s Client Side Rendering
  87. 87. #pwaseo by @aleyda from #orainti at @digitaleliteday! Which can cause content indexing and rendering issues https://search.google.com/test/mobile-friendly
  88. 88. #pwaseo by @aleyda from #orainti at @digitaleliteday! This happens because JS reliant 
 content is indexed in a second wave http://www.thesempost.com/google-indexes-ranks-javascript-pages-two-waves-days-apart/
  89. 89. #pwaseo by @aleyda from #orainti at @digitaleliteday! “Rendering is expensive and cannot 
 be done immediately” https://www.deepcrawl.com/blog/webinars/making-javascript-work-for-search-martin-splitt/
  90. 90. #pwaseo by @aleyda from #orainti at @digitaleliteday! Let’s better avoid Client Side Rendering
 https://www.deepcrawl.com/blog/webinars/making-javascript-work-for-search-martin-splitt/
  91. 91. #pwaseo by @aleyda from #orainti at @digitaleliteday! Server side rendering is also supported by Magento too, but is not the default https://twitter.com/i/web/status/1102906582961213441
  92. 92. #pwaseo by @aleyda from #orainti at @digitaleliteday! A full SEO audit by crawling both 
 with & without JS is necessary
  93. 93. #pwaseo by @aleyda from #orainti at @digitaleliteday! To identify, assess and close 
 the existing gaps
  94. 94. #pwaseo by @aleyda from #orainti at @digitaleliteday! Check out Google's examples of Indexable PWAs using server, client side and hybrid rendered sites https://github.com/google/indexable-pwa-samples
  95. 95. #pwaseo by @aleyda from #orainti at @digitaleliteday! https://www.youtube.com/watch?v=LXF8bM4g-J4 Google’s JavaScript SEO Series w/ Martin Splitt
  96. 96. #pwaseo by @aleyda from #orainti at @digitaleliteday! https://developers.google.com/search/docs/guides/fix-search-javascript As well as the JavaScript search issues & fixes documentation by Google
  97. 97. #pwaseo by @aleyda from #orainti at @digitaleliteday! https://twitter.com/firt And follow Maximiliano Firtman to keep updated on PWA evolution
  98. 98. #pwaseo by @aleyda from #orainti at @digitaleliteday! There’s no excuse to not enjoy of app features on an SEO friendly Website https://medium.com/progressive-web-apps/2018-state-of-progressive-web-apps-f7517d43ba70
  99. 99. #pwaseo by @aleyda from #orainti at @digitaleliteday! Let’s make the Web progressive! #pwaseo by @aleyda from #orainti at @digitaleliteday!
  100. 100. #pwaseo by @aleyda from #orainti at @digitaleliteday! I’m Aleyda Solis * SEO Consultant & Founder at Orainti
 * Crawling Mondays Host * SEO Speaker at +100 Events in +20 countries * Author “SEO. Las Claves Esenciales.” * Blogger in Search Engine Land & Search Engine Journal * Featured in Forbes, Entrepreneur, Huffington Post * European Search Personality of the Year in 2018 https://www.aleydasolis.com/
  101. 101. #pwaseo by @aleyda from #orainti at @digitaleliteday! If you liked it, you can watch me weekly by subscribing to Crawling Mondays https://youtube.com/c/crawlingmondaysbyaleyda

×