Successfully reported this slideshow.
Your SlideShare is downloading. ×

PWAs: Why you want one and how to optimize them #SearchY

More Related Content

More from Aleyda Solís

PWAs: Why you want one and how to optimize them #SearchY

  1. 1. #pwaseo by @aleyda from #orainti at #searchy PWAWhy you want one & 
how to optimize them
  2. 2. #pwaseo by @aleyda from #orainti at #searchy Mobile Apps are broken
  3. 3. #pwaseo by @aleyda from #orainti at #searchy They eat your mobile battery
  4. 4. #pwaseo by @aleyda from #orainti at #searchy Take a lot of phone space
  5. 5. #pwaseo by @aleyda from #orainti at #searchy Require constant updates
  6. 6. #pwaseo by @aleyda from #orainti at #searchy App content is non- findable
  7. 7. #pwaseo by @aleyda from #orainti at #searchy Fragmented and vertical specific app experience
  8. 8. #pwaseo by @aleyda from #orainti at #searchy 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 #searchy
  10. 10. #pwaseo by @aleyda from #orainti at #searchy And yet we end up installing a lot of apps Think With Google
  11. 11. #pwaseo by @aleyda from #orainti at #searchy Why do we keep using apps then?
  12. 12. #pwaseo by @aleyda from #orainti at #searchy Mobile Websites speed & usability is shitty
  13. 13. #pwaseo by @aleyda from #orainti at #searchy You need internet connection to access Web content
  14. 14. #pwaseo by @aleyda from #orainti at #searchy Easier app access for frequent use
  15. 15. #pwaseo by @aleyda from #orainti at #searchy App usage of additional phone features
  16. 16. #pwaseo by @aleyda from #orainti at #searchy Many times we’re also just forced to download them
  17. 17. #pwaseo by @aleyda from #orainti at #searchy Again and again. Sigh.
  18. 18. #pwaseo by @aleyda from #orainti at #searchy Realistically, we only use 1/3 of the apps we install
  19. 19. #pwaseo by @aleyda from #orainti at #searchy Yeah. 
 It’s broken.
  20. 20. #pwaseo by @aleyda from #orainti at #searchy There’s a gap to close between mobile Webs vs. apps https://www.slideshare.net/greenido/from-amp-to-pwa
  21. 21. #pwaseo by @aleyda from #orainti at #searchy This gap is closed by PWAs
  22. 22. #pwaseo by @aleyda from #orainti at #searchy A Progressive Web App (PWA) is a web app that provides a native app experience to Web users.
  23. 23. #pwaseo by @aleyda from #orainti at #searchy PWAs provide the benefits of an app without abandoning the Web https://developers.google.com/web/progressive-web-apps/
  24. 24. #pwaseo by @aleyda from #orainti at #searchyhttps://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
  25. 25. #pwaseo by @aleyda from #orainti at #searchyhttps://www.onenorth.com/blog/post/whats-next-in-mobile-progressive-web-apps Closing the gap between the Websites and apps
  26. 26. #pwaseo by @aleyda from #orainti at #searchyhttps://dzone.com/articles/pwa-technology This is possible thanks to 
 the use of 4 technologies
  27. 27. #pwaseo by @aleyda from #orainti at #searchyhttps://dzone.com/articles/pwa-technology All modern browsers now support PWAs
  28. 28. #pwaseo by @aleyda from #orainti at #searchyhttps://developers.google.com/web/progressive-web-apps/desktop And not only on mobile, 
 but also on desktop
  29. 29. #pwaseo by @aleyda from #orainti at #searchy Although there’s some resistance from the main app players https://medium.com/@firt/is-there-a-cold-war-between-android-and-chrome-because-of-pwas-e50a7471056c
  30. 30. #pwaseo by @aleyda from #orainti at #searchy So feature them in the app stores is still difficult https://debuggerdotbreak.judahgabriel.com/2018/04/13/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned/
  31. 31. #pwaseo by @aleyda from #orainti at #searchyhttps://www.awwwards.com/PWA-ebook/ PWAs are the future of the Web
  32. 32. #pwaseo by @aleyda from #orainti at #searchyhttps://www.awwwards.com/PWA-ebook/ “PWAs are a natural evolution of how we distribute and consume software”
 
PWA Ebook by Microsoft & Google
  33. 33. #pwaseo by @aleyda from #orainti at #searchy Websites that adopt PWA usually see benefits due to the App like functionality https://www.awwwards.com/PWA-ebook/
  34. 34. #pwaseo by @aleyda from #orainti at #searchyhttps://www.seroundtable.com/google-pwas-seo-24956.html However, PWA usage is not a ranking factor, they don’t offer any advantage over responsive Websites from a searchability perspective
  35. 35. #pwaseo by @aleyda from #orainti at #searchy But aren’t PWAs Single Page Applications that will challenge SEO? Not necessarily. https://love2dev.com/blog/pwa-spa/
  36. 36. #pwaseo by @aleyda from #orainti at #searchy Your Website Your Web App
 (SPA or MPA) PWA You can develop a PWA from scratch, or migrate your SPA, MPA or site
  37. 37. #pwaseo by @aleyda from #orainti at #searchyhttps://www.ampproject.org/docs/integration/pwa-amp Even AMP based sites can be also combined with PWAs in different ways
  38. 38. #pwaseo by @aleyda from #orainti at #searchyhttps://www.awwwards.com/PWA-ebook/ In the case of 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 Build a responsive website (that can be AMP based too) that will be your application. 1
  39. 39. #pwaseo by @aleyda from #orainti at #searchyhttps://codelabs.developers.google.com/codelabs/migrate-to-progressive-web-apps/ Check out this step by step guide to migrate your site to a PWA
  40. 40. #pwaseo by @aleyda from #orainti at #searchyhttps://codelabs.developers.google.com/codelabs/workbox-indexeddb/ As well as to develop a PWA from scratch
  41. 41. #pwaseo by @aleyda from #orainti at #searchyhttps://codelabs.developers.google.com/codelabs/amp-pwa-workbox/ Or build a Progressive Web AMP site
  42. 42. #pwaseo by @aleyda from #orainti at #searchy PWAs features should follow best practices specified in the PWA checklist https://developers.google.com/web/progressive-web-apps/checklist
  43. 43. #pwaseo by @aleyda from #orainti at #searchyhttps://developers.google.com/web/progressive-web-apps/checklist Served over HTTPS Responsive on Mobile & Tablets These are the baseline PWA features 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
  44. 44. #pwaseo by @aleyda from #orainti at #searchyhttps://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool You can verify them with the Lighthouse PWA validation in Chrome
  45. 45. #pwaseo by @aleyda from #orainti at #searchy Which are validated like this
  46. 46. #pwaseo by @aleyda from #orainti at #searchy And shown like this in the audits panel of Chrome Dev Tools
  47. 47. #pwaseo by @aleyda from #orainti at #searchyhttps://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/ You can also use Chrome DevTools Application panel to verify service workers
  48. 48. #pwaseo by @aleyda from #orainti at #searchy As well as the App Manifest https://developers.google.com/web/fundamentals/web-app-manifest/
  49. 49. #pwaseo by @aleyda from #orainti at #searchy For example, the Starbucks Web app that is a PWA, parallel to their main site https://developers.google.com/web/tools/lighthouse/
  50. 50. #pwaseo by @aleyda from #orainti at #searchy Or How PWAMP Works which I created following the Codelabs guide for AMP based PWAs https://www.howpwampworks.com/
  51. 51. #pwaseo by @aleyda from #orainti at #searchy Yes, this is an AMP based PWA
  52. 52. #pwaseo by @aleyda from #orainti at #searchyhttps://www.whymywebtrafficdropped.com/ Or Why my Web Traffic Dropped which is a WP based site for which I enabled PWA features with a plugin
  53. 53. #pwaseo by @aleyda from #orainti at #searchyhttps://superpwa.com/ I used the Super PWA plugin
  54. 54. #pwaseo by @aleyda from #orainti at #searchyhttps://magento.com/blog/magento-news/magento-announces-availability-pwa-studio PWA support will come to Magento to facilitate adoption by online stores too
  55. 55. #pwaseo by @aleyda from #orainti at #searchyhttps://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html However, it’s also critical to make sure that all these types of PWAs are also search friendly SEO
  56. 56. #pwaseo by @aleyda from #orainti at #searchy 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 indexe day Google Canonical URLs are provided when necessary Avoid usage of fragment identifiers schema.org metadata is included
  57. 57. #pwaseo by @aleyda from #orainti at #searchy Sorry, no SPAs! 
 https://developers.google.com/web/progressive-web-apps/checklist 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
  58. 58. #pwaseo by @aleyda from #orainti at #searchy Lighthouse doesn’t validate them automatically at the moment though https://developers.google.com/web/progressive-web-apps/checklist
  59. 59. #pwaseo by @aleyda from #orainti at #searchyhttps://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html It’s then necessary to additionally validate these SEO best practices as well as the ones provided by Google
  60. 60. #pwaseo by @aleyda from #orainti at #searchy Which are mostly the same and common to any Website really Make Your Content Crawlable Design for multiple devices Provide Clean URLs Use progressive enhancement Specify Canonical URLs https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html Page load speed should be fast Use schema.org structured data Cross- browser support
  61. 61. #pwaseo by @aleyda from #orainti at #searchy However, it’s specially important if the PWA is a Web app relying on JS https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html 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.”
  62. 62. #pwaseo by @aleyda from #orainti at #searchy Like this one, relying on client side JS rendering to show much of its content
  63. 63. #pwaseo by @aleyda from #orainti at #searchy And looks like this when JS is 
 disabled from the browser
  64. 64. #pwaseo by @aleyda from #orainti at #searchyhttps://search.google.com/test/mobile-friendly Which is why is critical to see if the page is rendered by Google
  65. 65. #pwaseo by @aleyda from #orainti at #searchy And the content is indexed too
  66. 66. #pwaseo by @aleyda from #orainti at #searchy If possible this should be avoided tho due to the way Google treats JS http://www.thesempost.com/google-indexes-ranks-javascript-pages-two-waves-days-apart/
  67. 67. #pwaseo by @aleyda from #orainti at #searchy Without overlooking fundamental 
 SEO configuration validation
  68. 68. #pwaseo by @aleyda from #orainti at #searchyhttps://github.com/google/indexable-pwa-samples To facilitate this Google provides examples of Indexable PWAs using server, client side and hybrid rendered sites
  69. 69. #pwaseo by @aleyda from #orainti at #searchy Funnily, when validating the client rendered version this what I got
  70. 70. #pwaseo by @aleyda from #orainti at #searchy However, this happened because the resources were not available in HTTPS
  71. 71. #pwaseo by @aleyda from #orainti at #searchy So when I checked it again in HTTP 
 it worked, but PWAs should use HTTPS
  72. 72. #pwaseo by @aleyda from #orainti at #searchy This is why a full crawl and analysis both with and without JS is necessary
  73. 73. #pwaseo by @aleyda from #orainti at #searchy Validating all SEO related configurations, comparing them
  74. 74. #pwaseo by @aleyda from #orainti at #searchy These are all SEO validations we should be always doing, in fact most PWAs at the moment are also SEO friendly https://medium.com/progressive-web-apps/2018-state-of-progressive-web-apps-f7517d43ba70
  75. 75. #pwaseo by @aleyda from #orainti at #searchy There’s no excuse to not enjoy of PWAs functionalities on your sites https://medium.com/progressive-web-apps/2018-state-of-progressive-web-apps-f7517d43ba70
  76. 76. #pwaseo by @aleyda from #orainti at #searchy It’s time go progressive #pwaseo by @aleyda from #orainti at #searchy
  77. 77. #pwaseo by @aleyda from #orainti at #searchy 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
  78. 78. #pwaseo by @aleyda from #orainti at #searchy If you liked it, you can watch me weekly by subscribing to Crawling Mondays bit.ly/crawlingmondays

×