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.

Cindy Krum Krum Cindy "What SEOs Need To Know About Progressive Web Apps" SMX West 2017

Google change to Mobile-First Indexing and its effects on SEO! Learn about the future of Native and Progressive Web Apps.

  • Be the first to comment

Cindy Krum Krum Cindy "What SEOs Need To Know About Progressive Web Apps" SMX West 2017

  1. 1. #SMX #22A1 @Suzzicks What SEOs Need To Know About PWAs (Progressive Web Apps) What SEOs Need To Know About PWAs (Progressive Web Apps) Cindy Krum MobileMoxie Cindy Krum MobileMoxie
  2. 2. #SMX #22A1 @Suzzicks MOBILE STATEGY: AKA: The Debate that Lasted for Freak’N Ever! 1
  3. 3. #SMX #22A1 @Suzzicks US Time Spent in App VS Web Mobile Web 14% Apps 86% Top 3 Apps 80% Facebook YouTube Facebook Messenger
  4. 4. #SMX #22A1 @Suzzicks US Time Spent in App VS Web Mobile Web 14% Apps 86% Top 3 Apps 80%
  5. 5. #SMX #22A1 @Suzzicks US Time Spent in App VS Web Mobile Web 14% Apps 86% A Couple Other Apps 20% Top 3 Apps 80%66% of All Digital Purchases Happen Here Facebook YouTube Facebook Messenger
  6. 6. #SMX #22A1 @Suzzicks US Time Spent in App VS Web Mobile Web 14% Apps 86% A Couple Other Apps 20% Top 3 Apps 80%66% of All Digital Purchases Happen Here Facebook YouTube Facebook Messenger
  7. 7. #SMX #22A1 @Suzzicks Mobile Web Reach is 2.5x App Reach (Based on Unique Visitors Per Month) Apps Mobile Web 8.9 3.3
  8. 8. #SMX #22A1 @Suzzicks Mobile Web Reach is 2.5x App Reach (Based on Unique Visitors Per Month) Apps Mobile Web 8.9 3.3
  9. 9. #SMX #22A1 @Suzzicks Native App VS WEB vs. Native Apps
  10. 10. #SMX #22A1 @Suzzicks Words for Web Apps: Single Page App (SPA) Web App HTML5 App Dynamic Website JavaScript Web App
  11. 11. #SMX #22A1 @Suzzicks Progressive Web Apps (PWA’s) Is Basically Native App Online Choices About Address Bar No Install Required Enables Home Screen Icon Offline Content Works Web Works on All Devices – Most Browsers Enables Push Messaging & Deep Linking Custom Splash Screen Adapts to Slow Connections Fast Because of Service Workers
  12. 12. #SMX #22A1 @Suzzicks -Alex Russell
  13. 13. #SMX #22A1 @Suzzicks Users Apparently Love PWAs 3x More Time Spent on Site 70% Higher Conversion Rate (For those who Add to Home Screen) 40% Higher Engagement Rate 3x Less Data Necessary to Render the Website
  14. 14. #SMX #22A1 @Suzzicks Progressive Web Apps are Fast: Server ServiceWorker
  15. 15. #SMX #22A1 @Suzzicks PWA ServiceWorkers Seem Very Similar to the AMP JavaScript Runtime PWA ServiceWorker AMP JS Runtime =
  16. 16. #SMX #22A1 @Suzzicks PWA ServiceWorkers Seem Very Similar to the AMP JavaScript Runtime PWA ServiceWorker AMP JS Runtime =
  17. 17. #SMX #22A1 @Suzzicks HTTPS Mobile Friendly Website Service Worker Web App Manifest Progressive Web App =+
  18. 18. #SMX #22A1 @Suzzicks Web App Manifest
  19. 19. #SMX #22A1 @Suzzicks Web App Manifest App Titles App Icons App Shell
  20. 20. #SMX #22A1 @Suzzicks Web App Manifest <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="manifest" href="/manifest.json"/> <meta name="robots" content="follow, index" /> <link rel="canonical" href="https://website.com/" /> <meta name="description" content="This is a great website/> <meta name="keywords" content=“keyword, keyword, keyword, keyword, keyword" /> </head>
  21. 21. #SMX #22A1 @Suzzicks Web App Manifest <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="manifest" href="/manifest.json"/> <meta name="robots" content="follow, index" /> <link rel="canonical" href="https://website.com/" /> <meta name="description" content="This is a great website/> <meta name="keywords" content=“keyword, keyword, keyword, keyword, keyword" /> </head>
  22. 22. #SMX #22A1 @Suzzicks App Shell Development Browser Stand Alone Full Screen HTTPS ONLY
  23. 23. #SMX #22A1 @Suzzicks Push Notifications
  24. 24. #SMX #22A1 @Suzzicks Loading the Website Twice Triggers an ‘Add to Home Screen’ Dialogue PWA Icon is Customizable & Looks Just Like a Native App Icon
  25. 25. #SMX #22A1 @Suzzicks While Loading, it Shows a Customizable Splash Screen PWA’s Can Open Outside of a Browser Window in it’s Own Window
  26. 26. #SMX #22A1 @Suzzicks Local Phone Cache = App Shell + Viewed Content Works Offline PWA ServiceWorker
  27. 27. #SMX #22A1 @Suzzicks26
  28. 28. #SMX #22A1 @Suzzicks `
  29. 29. #SMX #22A1 @Suzzicks Check Out Cool PWAs While I Talk: 1. ride.Lyft.com 2. Hotels Tonight 3. m.AirBerlin.com/en/pwa 4. FlipBoard 5. AirHorner 6. m.Forbes.com 7. HomeDepot.ca 7. FT.com 8. (Financial Times) 9. AliExpress 10.code.NASA.com 11.ProgressiveWebFlap.com 12.PWA.rocks 13.pwa-Directory.appspot.com 14.Formula1.com
  30. 30. #SMX #22A1 @Suzzicks Don’t Let Fancy Dev Kill Your SEO!
  31. 31. #SMX #22A1 @Suzzicks Most PWA’s Have Ignored SEO
  32. 32. #SMX #22A1 @Suzzicks Most PWA’s Have Ignored SEO
  33. 33. #SMX #22A1 @Suzzicks Most PWA’s Have Ignored SEO Duplicate Title Tags Duplicate Description Tags Un-optimized URLs
  34. 34. #SMX #22A1 @Suzzicks To Get a Progressive Web App Indexed, You Must Work Harder
  35. 35. #SMX #22A1 @Suzzicks Here is the Good News: Google Wants to Crawl JavaScript!
  36. 36. #SMX #22A1 @Suzzicks Indexing Web Apps (Even Non-PWA Dynamic Sites) HTML Snapshots XML Sitemaps Fetch & RenderHTML5 PushState
  37. 37. #SMX #22A1 @Suzzicks Here’s the Other Problem: 36 So Far, Safari Refuses to Support ServiceWorkers
  38. 38. #SMX #22A1 @Suzzicks37
  39. 39. #SMX #22A1 @Suzzicks38
  40. 40. #SMX #22A1 @Suzzicks Google Already Has a Work-Around! 39
  41. 41. #SMX #22A1 @Suzzicks Google Already Has a Work-Around! 40
  42. 42. #SMX #22A1 @Suzzicks41
  43. 43. #SMX #22A1 @Suzzicks How Do We Index The World Without URLs? So How will Things Get Indexed?
  44. 44. #SMX #22A1 @Suzzicks How Do We Index The World Without URLs? Firebase Dynamic Links are links that work the way you want, on multiple platforms, and whether or not your app is already installed. With Dynamic Links, your users get the best available experience for the platform they open your link on. Jan 25, 2017 So How will Things Get Indexed?
  45. 45. #SMX #22A1 @Suzzicks Dynamic Links in the Wild: •Business Locations GoogleMyBizLocations Images KnowledgeGraph
  46. 46. #SMX #22A1 @Suzzicks Preparing for Mobile-First Indexing: Google Hosted Content
  47. 47. #SMX #22A1 @Suzzicks Preparing for Mobile-First Indexing: Google Hosted Content
  48. 48. #SMX #22A1 @Suzzicks ServiceWorker Resources -- Update Your Site to PWA: 1. Service Worker Toolbox: https://github.com/GoogleChrome/sw-toolbox 2. Service Worker Instructions: http://deanhume.com/home/blogpost/getting-started-with- the-service-worker-toolbox/10134 3. LightHouse: Chrome Plugin for PWA Auditing: https://chrome.google.com/webstore/detail/lighthouse/blip mdconlkpinefehnmjammfjpmpbjk?hl=en
  49. 49. #SMX #22A1 @Suzzicks App Manifest Resources -- Update Your Site to PWA: 1. Inspect PWA Manifest: Chrome Dev Tools – Application Panel/Manifest 2. App Manifest Wizard: https://brucelawson.github.io/manifest/ 3. App Manifest Validator: https://manifest- validator.appspot.com/
  50. 50. #SMX #22A1 @Suzzicks49
  51. 51. #SMX #22A1 @Suzzicks50
  52. 52. #SMX #22A1 @Suzzicks51
  53. 53. #SMX #22A1 @Suzzicks Thanks!!! @suzzicks @mobilemoxie facebook.com/mobilemoxie www.mobilemoxie.com AND api.mobilemoxie.com

    Be the first to comment

    Login to see the comments

  • kimgeralds

    Jun. 21, 2017
  • ykontani

    Jun. 30, 2017

Google change to Mobile-First Indexing and its effects on SEO! Learn about the future of Native and Progressive Web Apps.

Views

Total views

603

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

8

Shares

0

Comments

0

Likes

2

×