What SEOs Need to Know About PWAs By Cindy Krum
•Download as PPTX, PDF•
3 likes•2,079 views
From the SMX West Conference in San Jose, California, March 21-23, 2017. SESSION: What SEOs Need To Know About Progressive Web Apps. PRESENTATION: What SEOs Need To Know About PWAs - Given by Cindy Krum, @suzzicks - MobileMoxie, CEO. #SMX #22A1
Recommended
Recommended
More Related Content
More from Search Marketing Expo - SMX
More from Search Marketing Expo - SMX (20)
Recently uploaded
Recently uploaded (20)
What SEOs Need to Know About PWAs By Cindy Krum
- 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. #SMX #22A1 @Suzzicks MOBILE STATEGY: AKA: The Debate that Lasted for Freak’N Ever! 1
- 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. #SMX #22A1 @Suzzicks US Time Spent in App VS Web Mobile Web 14% Apps 86% Top 3 Apps 80%
- 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. #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. #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. #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. #SMX #22A1 @Suzzicks Native App VS WEB vs. Native Apps
- 10. #SMX #22A1 @Suzzicks Words for Web Apps: Single Page App (SPA) Web App HTML5 App Dynamic Website JavaScript Web App
- 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. #SMX #22A1 @Suzzicks -Alex Russell
- 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. #SMX #22A1 @Suzzicks Progressive Web Apps are Fast: Server ServiceWorker
- 15. #SMX #22A1 @Suzzicks PWA ServiceWorkers Seem Very Similar to the AMP JavaScript Runtime PWA ServiceWorker AMP JS Runtime =
- 16. #SMX #22A1 @Suzzicks PWA ServiceWorkers Seem Very Similar to the AMP JavaScript Runtime PWA ServiceWorker AMP JS Runtime =
- 17. #SMX #22A1 @Suzzicks HTTPS Mobile Friendly Website Service Worker Web App Manifest Progressive Web App =+
- 18. #SMX #22A1 @Suzzicks Web App Manifest
- 19. #SMX #22A1 @Suzzicks Web App Manifest App Titles App Icons App Shell
- 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. #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. #SMX #22A1 @Suzzicks App Shell Development Browser Stand Alone Full Screen HTTPS ONLY
- 23. #SMX #22A1 @Suzzicks Push Notifications
- 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. #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. #SMX #22A1 @Suzzicks Local Phone Cache = App Shell + Viewed Content Works Offline PWA ServiceWorker
- 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.pwaDirectory.appspot.com 14.Formula1.com
- 30. #SMX #22A1 @Suzzicks Don’t Let Fancy Dev Kill Your SEO!
- 31. #SMX #22A1 @Suzzicks Most PWA’s Have Ignored SEO
- 32. #SMX #22A1 @Suzzicks Most PWA’s Have Ignored SEO
- 33. #SMX #22A1 @Suzzicks Most PWA’s Have Ignored SEO Duplicate Title Tags Duplicate Description Tags Un-optimized URLs
- 34. #SMX #22A1 @Suzzicks To Get a Progressive Web App Indexed, You Must Work Harder
- 35. #SMX #22A1 @Suzzicks Here is the Good News: Google Wants to Crawl JavaScript!
- 36. #SMX #22A1 @Suzzicks Indexing Web Apps (Even Non-PWA Dynamic Sites) HTML Snapshots XML Sitemaps Fetch & RenderHTML5 PushState
- 37. #SMX #22A1 @Suzzicks Here’s the Other Problem: 36 So Far, Safari Refuses to Support ServiceWorkers
- 40. #SMX #22A1 @Suzzicks Google Already Has a Work-Around! 39
- 41. #SMX #22A1 @Suzzicks Google Already Has a Work-Around! 40
- 43. #SMX #22A1 @Suzzicks How Do We Index The World Without URLs? So How will Things Get Indexed?
- 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. #SMX #22A1 @Suzzicks Dynamic Links in the Wild: •Business Locations GoogleMyBizLocations Images KnowledgeGraph
- 46. #SMX #22A1 @Suzzicks Preparing for Mobile-First Indexing: Google Hosted Content
- 47. #SMX #22A1 @Suzzicks Preparing for Mobile-First Indexing: Google Hosted Content
- 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. #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/
- 53. #SMX #22A1 @Suzzicks Thanks!!! @suzzicks @mobilemoxie facebook.com/mobilemoxie www.mobilemoxie.com AND api.mobilemoxie.com