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.

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

1.851 visualizações

Publicada em

What are Progressive Web Apps, how do they work, how they will benefit your site and how you can optimize them? Get the answers to these questions here!

Publicada em: Marketing

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

×