O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Progressive Web Apps: Why you want one & how to optimize them #SMSSYD19

294 visualizações

Publicada em

Learn what are PWAs, what are their benefits, functionalities, how you can develop one, and the criteria and validation to take into consideration to optimize them from a search perspective.

Publicada em: Marketing
  • Seja o primeiro a comentar

Progressive Web Apps: Why you want one & how to optimize them #SMSSYD19

  1. 1. #pwaseo by @aleyda from #orainti at #smssyd19 Why you want one & how to optimize them Progressive Web Apps
  2. 2. #pwaseo by @aleyda from #orainti at #smssyd19 Why you want one & how to optimize them Progressive Web Apps
  3. 3. #pwaseo by @aleyda from #orainti at #smssyd19 Mobile Apps are broken #pwaseo by @aleyda from #orainti at #smssyd19
  4. 4. #pwaseo by @aleyda from #orainti at #smssyd19 They eat your mobile battery
  5. 5. #pwaseo by @aleyda from #orainti at #smssyd19 Take a lot of phone space
  6. 6. #pwaseo by @aleyda from #orainti at #smssyd19 Require constant updates
  7. 7. #pwaseo by @aleyda from #orainti at #smssyd19 App content is non- findable
  8. 8. #pwaseo by @aleyda from #orainti at #smssyd19 Fragmented and vertical specific app experience
  9. 9. #pwaseo by @aleyda from #orainti at #smssyd19 Can be expensive to develop https://www.consagous.com/blog/how-much-does-it-cost-to-build-an-app/
  10. 10. #pwaseo by @aleyda from #orainti at #smssyd19#pwaseo by @aleyda from #orainti at #smssyd19
  11. 11. #pwaseo by @aleyda from #orainti at #smssyd19 And yet we end up installing a lot of apps Think With Google
  12. 12. #pwaseo by @aleyda from #orainti at #smssyd19 Why do we keep using apps then?
  13. 13. #pwaseo by @aleyda from #orainti at #smssyd19 Mobile Websites speed & usability is shitty #pwaseo by @aleyda from #orainti at #smssyd19
  14. 14. #pwaseo by @aleyda from #orainti at #smssyd19 You need internet connection to access Web content #pwaseo by @aleyda from #orainti at #smssyd19
  15. 15. #pwaseo by @aleyda from #orainti at #smssyd19 Easier app access for frequent use #pwaseo by @aleyda from #orainti at #smssyd19
  16. 16. #pwaseo by @aleyda from #orainti at #smssyd19 App usage of additional phone features
  17. 17. #pwaseo by @aleyda from #orainti at #smssyd19 Many times we’re also just forced to download them
  18. 18. #pwaseo by @aleyda from #orainti at #smssyd19 Again and again. Sigh.
  19. 19. #pwaseo by @aleyda from #orainti at #smssyd19 Realistically, we only use 1/3 of the apps we install
  20. 20. #pwaseo by @aleyda from #orainti at #smssyd19 Yeah. 
 It’s broken. #pwaseo by @aleyda from #orainti at #smssyd19
  21. 21. #pwaseo by @aleyda from #orainti at #smssyd19 There’s a gap to close between mobile Webs vs. apps https://www.slideshare.net/greenido/from-amp-to-pwa
  22. 22. #pwaseo by @aleyda from #orainti at #smssyd19 This gap is closed by PWAs #pwaseo by @aleyda from #orainti at #smssyd19
  23. 23. #pwaseo by @aleyda from #orainti at #smssyd19 A Progressive Web App (PWA) is a web app that provides a native app experience to Web users.
  24. 24. #pwaseo by @aleyda from #orainti at #smssyd19 PWAs provide the benefits of an app without abandoning the Web https://developers.google.com/web/progressive-web-apps/
  25. 25. #pwaseo by @aleyda from #orainti at #smssyd19https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/ Through their main functionalities https://www.appypie.com/progressive-web-apps-the-future-of-mobile-web-app-development
  26. 26. #pwaseo by @aleyda from #orainti at #smssyd19https://www.onenorth.com/blog/post/whats-next-in-mobile-progressive-web-apps Closing the gap between the Websites and apps
  27. 27. #pwaseo by @aleyda from #orainti at #smssyd19https://dzone.com/articles/pwa-technology This is possible thanks to 
 the use of 4 technologies
  28. 28. #pwaseo by @aleyda from #orainti at #smssyd19https://twitter.com/firt/status/1105840379117662209 All modern browsers now support PWAs
  29. 29. #pwaseo by @aleyda from #orainti at #smssyd19 Not only on mobile but also on desktop https://developers.google.com/web/progressive-web-apps/desktop
  30. 30. #pwaseo by @aleyda from #orainti at #smssyd19 Which is why many top mobile focused services have released PWAs https://appsco.pe/
  31. 31. #pwaseo by @aleyda from #orainti at #smssyd19 Uber
  32. 32. #pwaseo by @aleyda from #orainti at #smssyd19 Twitter
  33. 33. #pwaseo by @aleyda from #orainti at #smssyd19 9GAG
  34. 34. #pwaseo by @aleyda from #orainti at #smssyd19 You can add them to your home screen
  35. 35. #pwaseo by @aleyda from #orainti at #smssyd19 “The Web is going to be 
 the new app store”
  36. 36. #pwaseo by @aleyda from #orainti at #smssyd19 In fact, you can actually now also feature PWAs in App Stores too https://medium.com/@firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc
  37. 37. #pwaseo by @aleyda from #orainti at #smssyd19https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b Although it does require a bit of more work
  38. 38. #pwaseo by @aleyda from #orainti at #smssyd19https://www.awwwards.com/PWA-ebook/ “PWAs are a natural evolution of how we distribute and consume software”
 
PWA Ebook by Microsoft & Google
  39. 39. #pwaseo by @aleyda from #orainti at #smssyd19https://www.awwwards.com/PWA-ebook/
  40. 40. #pwaseo by @aleyda from #orainti at #smssyd19 How can you create a PWA then? #pwaseo by @aleyda from #orainti at #smssyd19
  41. 41. #pwaseo by @aleyda from #orainti at #smssyd19https://www.awwwards.com/PWA-ebook/ 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
  42. 42. #pwaseo by @aleyda from #orainti at #smssyd19https://codelabs.developers.google.com/codelabs/migrate-to-progressive-web-apps/ Check out this step by step guide to migrate your site to a PWA
  43. 43. #pwaseo by @aleyda from #orainti at #smssyd19https://codelabs.developers.google.com/codelabs/workbox-indexeddb/ As well as to develop a PWA from scratch
  44. 44. #pwaseo by @aleyda from #orainti at #smssyd19https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/ Or build a Progressive Web AMP site
  45. 45. #pwaseo by @aleyda from #orainti at #smssyd19https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/https://codelabs.developers.google.com/dev-pwa-training/ There’s a full training provided 
 by Google Developers
  46. 46. #pwaseo by @aleyda from #orainti at #smssyd19https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/https://www.youtube.com/playlist?list=PLNYkxOF6rcIB2xHBZ7opgc2Mv009X87Hh And video tutorials in the Google’s Chrome Developers YouTube Channel
  47. 47. #pwaseo by @aleyda from #orainti at #smssyd19https://www.pwabuilder.com/publish You can also use the “ready to customize and use” PWA Builder files
  48. 48. #pwaseo by @aleyda from #orainti at #smssyd19 Check “How PWAMP Works” which I created following the Codelabs guide for AMP based PWAs https://www.howpwampworks.com/
  49. 49. #pwaseo by @aleyda from #orainti at #smssyd19https://superpwa.com/ You can also enable PWA features to your Wordpress sites with Plugins
  50. 50. #pwaseo by @aleyda from #orainti at #smssyd19https://www.whymywebtrafficdropped.com/ Which is the one I’ve used with “Why my Web Traffic Dropped”
  51. 51. #pwaseo by @aleyda from #orainti at #smssyd19https://magento.com/products/magento-commerce/pwa Magento now also supports AMP with its PWA Studio
  52. 52. #pwaseo by @aleyda from #orainti at #smssyd19 How can you validate your PWAs? #pwaseo by @aleyda from #orainti at #smssyd19
  53. 53. #pwaseo by @aleyda from #orainti at #smssyd19 PWAs features should follow best practices specified in the PWA checklist https://developers.google.com/web/progressive-web-apps/checklist
  54. 54. #pwaseo by @aleyda from #orainti at #smssyd19 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
  55. 55. #pwaseo by @aleyda from #orainti at #smssyd19https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool You can verify them with the Lighthouse PWA validation in Chrome
  56. 56. #pwaseo by @aleyda from #orainti at #smssyd19 Like this
  57. 57. #pwaseo by @aleyda from #orainti at #smssyd19https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/ You can also use Chrome DevTools Application panel to verify service workers
  58. 58. #pwaseo by @aleyda from #orainti at #smssyd19 As well as the App Manifest https://developers.google.com/web/fundamentals/web-app-manifest/
  59. 59. #pwaseo by @aleyda from #orainti at #smssyd19https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool Or use the PWA Builder to validate too

  60. 60. #pwaseo by @aleyda from #orainti at #smssyd19https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool Which also allows to revise and edit your app manifest and
 service worker
  61. 61. #pwaseo by @aleyda from #orainti at #smssyd19 But, do PWAs help SEO? #pwaseo by @aleyda from #orainti at #smssyd19
  62. 62. #pwaseo by @aleyda from #orainti at #smssyd19 Websites that adopt PWA see benefits due to the App like functionality https://www.pwastats.com/
  63. 63. #pwaseo by @aleyda from #orainti at #smssyd19https://www.seroundtable.com/google-pwas-seo-24956.html However, PWA usage won’t help SEO as it’s not a ranking factor though…
  64. 64. #pwaseo by @aleyda from #orainti at #smssyd19 On the other hand, PWA shouldn’t hurt SEO since a PWA doesn’t need to be a SPA https://love2dev.com/blog/pwa-spa/
  65. 65. #pwaseo by @aleyda from #orainti at #smssyd19 Your Website Your Web App
 (SPA or MPA) PWA You can develop a PWA from scratch, or migrate your SPA, MPA or Website
  66. 66. #pwaseo by @aleyda from #orainti at #smssyd19https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html It’s then critical to make sure that all these types of PWAs are also search friendly SEO
  67. 67. #pwaseo by @aleyda from #orainti at #smssyd19https://builtvisible.com/google-analytics-for-pwas-tracking-offline-behaviour-and-more/ While configuring your Google Analytics tracking to effectively measure its usage
  68. 68. #pwaseo by @aleyda from #orainti at #smssyd19 How can you optimize PWAs for search? #pwaseo by @aleyda from #orainti at #smssyd19
  69. 69. #pwaseo by @aleyda from #orainti at #smssyd19 The PWA checklist includes some 
 SEO related best practices too https://developers.google.com/web/progressive-web-apps/checklist 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
  70. 70. #pwaseo by @aleyda from #orainti at #smssyd19 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
  71. 71. #pwaseo by @aleyda from #orainti at #smssyd19 Lighthouse doesn’t validate them automatically at the moment though https://developers.google.com/web/progressive-web-apps/checklist
  72. 72. #pwaseo by @aleyda from #orainti at #smssyd19https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html It’s then necessary to also validate these SEO best practices along the ones provided by Google
  73. 73. #pwaseo by @aleyda from #orainti at #smssyd19 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
  74. 74. #pwaseo by @aleyda from #orainti at #smssyd19 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
  75. 75. #pwaseo by @aleyda from #orainti at #smssyd19 Like the Magento PWA Demo Store, which passes the PWA validation… https://inchoopwa.com/
  76. 76. #pwaseo by @aleyda from #orainti at #smssyd19 …but it looks like this when JS is disabled since it’s Client Side Rendering #pwaseo by @aleyda from #orainti at #smssyd19
  77. 77. #pwaseo by @aleyda from #orainti at #smssyd19https://search.google.com/test/mobile-friendly Which can cause content indexing and rendering issues
  78. 78. #pwaseo by @aleyda from #orainti at #smssyd19 It should be avoided due to the way Google index JS reliant content http://www.thesempost.com/google-indexes-ranks-javascript-pages-two-waves-days-apart/
  79. 79. #pwaseo by @aleyda from #orainti at #smssyd19 This is why server side rendering it’s recommended instead, which is also known by Magento, and supported too https://twitter.com/i/web/status/1102906582961213441
  80. 80. #pwaseo by @aleyda from #orainti at #smssyd19 A full SEO audit by crawling both 
 with & without JS is necessary
  81. 81. #pwaseo by @aleyda from #orainti at #smssyd19https://github.com/google/indexable-pwa-samples To facilitate this Google provides examples of Indexable PWAs using server, client side and hybrid sites
  82. 82. #pwaseo by @aleyda from #orainti at #smssyd19 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
  83. 83. #pwaseo by @aleyda from #orainti at #smssyd19 It’s time go progressive #pwaseo by @aleyda from #orainti at #smssyd19
  84. 84. #pwaseo by @aleyda from #orainti at #smssyd19 I’m Daenerys 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
  85. 85. #pwaseo by @aleyda from #orainti at #smssyd19 If you liked it, you can watch me weekly by subscribing to Crawling Mondays https://youtube.com/c/crawlingmondaysbyaleyda

×