What SEOs Need to Know About PWAs By Cindy Krum

53
#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

Transcript of What SEOs Need to Know About PWAs By Cindy Krum

Presentation Title

What SEOs Need To KnowAboutPWAs(Progressive Web Apps)

What SEOs Need To KnowAboutPWAs(Progressive Web Apps)

Cindy KrumMobileMoxieCindy KrumMobileMoxie

#SMX #22A1@Suzzickshttp://rockhillcc.org/wp-content/uploads/2015/03/o-ESCALATOR-facebook.jpg0

MOBILESTATEGY:

AKA: The Debate that Lasted for FreakNEver!1

#SMX #22A1@SuzzicksUS Time Spent in App VS Web

Mobile Web14%Apps 86%Top 3 Apps 80%

FacebookYouTubeFacebook Messenger

#SMX #22A1@SuzzicksWe also have to think about user behavior with Native Apps. App developers love to tell you that 86% of time spent on a mobile phone is spent in apps and only 14% is spent in mobile web. What they forget to mention is that 80% of the time spent in apps can all be accredited to the top 3 apps Facebook, YouTube and Facebook Messenger.

2

US Time Spent in App VS Web

Mobile Web14%Apps 86%Top 3 Apps 80%

#SMX #22A1@SuzzicksOnly the remaining 20% is represented by other apps, and you can bet that most of that is represented by apps with long-form content like Netflix and Hulu, or that actively engage with offline behavior, like Google Maps or run trackers.

3

US Time Spent in App VS Web

Mobile Web14%Apps 86%A Couple Other Apps20%Top 3 Apps 80%66% of All Digital Purchases Happen Here

FacebookYouTubeFacebook Messenger

#SMX #22A1@SuzzicksHere is the conundrum. If you are looking at the mobile world with your financial glasses on, it doesnt even matter that people are spending all that time in apps. They are still spending their money on mobile web. 66% of all digital purchases now happen on mobile web, and a majority of the rest happen on desktop web. Very few transactions happen in mobile apps. 4

US Time Spent in App VS Web

Mobile Web14%Apps 86%A Couple Other Apps20%Top 3 Apps 80%66% of All Digital Purchases Happen Here

FacebookYouTubeFacebook Messenger$$$$

#SMX #22A1@SuzzicksThis means the cost per native app acquisition is 8-10x web. So do you invest where people are spending all their time, or do you invest where people are spending all your money? It is hard to decide. 5

Mobile Web Reach is 2.5x App Reach (Based on Unique Visitors Per Month)

AppsMobile Web8.93.3

#SMX #22A1@SuzzicksMobile web has 2.5x better reach than mobile apps.

https://www.geekmj.org/insights/progressive-web-app-introduction-599/6

Mobile Web Reach is 2.5x App Reach (Based on Unique Visitors Per Month)

AppsMobile Web8.93.3$$$$

#SMX #22A1@SuzzicksSo if you are investing all your money creating mobile apps, rather than maintaining or upgrading the mobile web, your ROI numbers for the two channels are both are going to look pretty bad.

https://www.geekmj.org/insights/progressive-web-app-introduction-599/7

NativeAppVSWEB vs. Native Apps

#SMX #22A1@SuzzicksSo now that we are out of the Dark Ages of indexing, lets talk about things, and how they are now. We are going to be talking about app indexing today, but it is more than what you think. I want to enlighten you, to the wide world of Apps and app indexing. There are two basic groupings for apps. Web apps and native apps. Web apps live on the web and can be used on any device. Native apps live in app stores, and can only be used by the devices that they are made for either iOS or Android.

Great PWAs start with Dynamic, JS-loaded Content: AngularJS, Ember, Jquery, ReactJS, etc.

http://programmerguru.com/ajax-tutorial/wp-content/uploads/sites/8/2013/04/ajax-logo.jpg

https://openclipart.org/image/2400px/svg_to_png/171697/thinking-caveman.png

8

Words for Web Apps:Single PageApp (SPA)Web AppHTML5 AppDynamicWebsiteJavaScript Web App

#SMX #22A1@SuzzicksPeople use the term web app somewhat loosely, but they generally mean a mobile-friendly website that uses JavaScript to make a smoother and engaging app-like experience. Sometimes they use names like HTML 5 app or, single page app or JavaScript web app, or even just dynamic mobile site.

The newest kind of web app is the Progressive Web App, or PWA, and this is the one that Google really wants you to know about, and well talk more about this later.

Great PWAs start with Dynamic, JS-loaded Content: AngularJS, Ember, Jquery, ReactJS, etc.

http://programmerguru.com/ajax-tutorial/wp-content/uploads/sites/8/2013/04/ajax-logo.jpg

https://s-media-cache-ak0.pinimg.com/236x/fb/e8/c7/fbe8c7d39028ae26d4191790033940b7.jpg9

Progressive Web Apps (PWAs)

Is Basically Native App Online

Choices About Address Bar

No InstallRequired

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

#SMX #22A1@SuzzicksSo a PWA is basically a native app that lives online.or maybe it is a web app that lives offline? Here is a summary of the components you get: Fast and accessible offline because of ServiceWorkers. It actually adapts to the context based on the connection speed.Works quickly with or without the installHome screen icons just like a native app, and a customizable app screen and app shell, and choices about the presentation of the address bar and shell. Easy deep linking because it is actually a websiteMost importantly it works on all devices, regardless of their OS, and you dont have to go to an app store to download it.

10

-Alex Russell

#SMX #22A1@SuzzicksThis is Alex Russell, the lead of the PWA team at Google. Lots of people have different explanation of the phrase Progressive Web App, but this is his explanation: These apps arent packaged and deployed through stores, theyre just websites that took all the right vitamins. They progressively become apps.

http://nolanlawson.github.io/pwas-2016-05/img/alex_russell.png11

Users Apparently Love PWAs3x More Time Spent on Site

70% Higher Conversion Rate (For those who Add to HomeScreen)

40% Higher Engagement Rate

3x Less Data Necessary to Render the Website

#SMX #22A1@SuzzicksSo this is all cool, wiz-bang stuff, but maybe you are just a caveman or cave woman why should you care? Well, they are actually great for users, and even if you dont care about that,

Google does. They reported that 3x more time spent on site than other Responsive mobile sites, 40% higher engagement rates, 70% higher conversion rate for those that add it to their home screen and 3x LESS data used when compared to the same activity on the regular website version of the content.

Progressive Web Apps are Fast:Cached App Shell & Style InstructionsService Workers Pre-Load & Pre-Render As NeededNew Pageloads are Never Required

ServerServiceWorker

#SMX #22A1@SuzzicksSo with that in mind, lets talk about Progressive Web Apps. As I said, this is the newest kind of web app, and it is the one that Google is supporting. Like other web apps, it relies heavily on JavaScript and on-going communication from the website to the server to manage the experience and make it better. The difference here is that some of the JavaScript is included not on the page itself, but in a middle layer between the server and the website, called a ServiceWorker.

13

PWA Service Worker

AMP JS Runtime

Android InstantAppsPWA ServiceWorkers Seem Very Similar to the AMP JavaScript RuntimePWA ServiceWorkerAMP JS Runtime=

#SMX #22A1@SuzzicksIf you are familiar with the new AMP HTML protocells, AMP uses a similar layer that they call an AMP JavaScript Runtime. PWA ServiceWorkers and the AMP JavaScript Runtime are primarily there to intelligently control the pre-fetching, loading and caching of content from the server, before it is actually requested. When these are in place, they make page loads feel instant, because most of the content has already been loaded in the cache, immediately ready to display once it is requested.

PWA Service Worker

AMP JS Runtime

Android InstantAppsPWA ServiceWorkers Seem Very Similar to the AMP JavaScript RuntimePWA ServiceWorkerAMP JS Runtime=

RequiresHTTPS

#SMX #22A1@SuzzicksThe additional malware risk created by this extra layer of JavaScript is mitigated because both AMP and Progressive Web Apps require HTTPS. The secure connection makes situations that otherwise would be highly vulnerable to a man in the middle attack, much more protected.

HTTPS Mobile Friendly WebsiteService WorkerWeb App ManifestProgressive Web App=+

#SMX #22A1@SuzzicksIn addition to a ServiceWorker, PWAs require an app manifest. An app manifest is a simple organizational file that outlines a basic framework for the app. If you think about a plane manifest that lists all the people on board, an app manifest lists all the vital and primary elements of the app.

http://cdn.arstechnica.net/wp-content/uploads/2015/03/add-to-home-screen-9f848df296e9e17100d68ef9aea43d69-640x556.jpg16

Web App Manifest

#SMX #22A1@SuzzicksIt generally looks something like this.

https://greenido.files.wordpress.com/2016/02/screen-shot-2016-02-28-at-9-14-36-am.png17

Web App Manifest

App TitlesApp IconsApp Shell

#SMX #22A1@SuzzicksAnd you can see in here, that there is a Long and Short title listed, locations for the app icon, and the color of the app shell the housing for all the app behavior.

https://greenido.files.wordpress.com/2016/02/screen-shot-2016-02-28-at-9-14-36-am.png18

Web App Manifest

#SMX #22A1@SuzzicksOnce you have created this simple app manifest, all you have to do is upload it to the server as Manifest.json, and link to it from the of the PWA pages on the website with rel=manifest.

https://greenido.files.wordpress.com/2016/02/screen-shot-2016-02-28-at-9-14-36-am.png19

Web App Manifest

#SMX #22A1@SuzzicksIt looks like this.

https://greenido.files.wordpress.com/2016/02/screen-shot-2016-02-28-at-9-14-36-am.png20

App Shell DevelopmentBrowserStand AloneFull Screen

HTTPS ONLY

#SMX #22A1@SuzzicksPWAs are different from other web apps, because they give you a LOT more options and functionality. The most meaningful difference between a PWA and any other kind of web app is that it can be loaded in its own window, outside of the browser. It can be presented to the users with or without the browser address bar, and even in full-screen mode, without the app-shell border, like most game apps that you might have downloaded. So it looks and behaves just like an app.

https://articles.tbscg.com/killing-the-natives-apps-for-good/https://cdn-images-1.medium.com/max/800/1*nX2TI26LHU9rCxW8MUWIbQ.gif21

Push Notifications

#SMX #22A1@SuzzicksYou can also do push notifications, which regular websites cant do.

https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/permissions-subscriptions?hl=en22

Loading the Website Twice Triggers an Add to Home Screen Dialogue

PWA Icon is Customizable & Looks Just Like a Native App Icon

#SMX #22A1@SuzzicksThe app install process looks like this. After accessing the site multiple times on the same device, users are prompted to add it to their home screen, and then it gets an icon (the one listed in the App Manifest), and it looks just like any other app that you might have downloaded from Google Play or the App Store.

Unlike a native app download, a PWA download is nearly instant, because all it is downloading is the app manifest, icon, app shell info and start screen. Much less data than a native app download.

https://addyosmani.com/assets/getting-started-pwa/[email protected]

23

While Loading, it Shows a CustomizableSplash Screen

PWAs Can Open Outside of a Browser Windowin its Own Window

#SMX #22A1@SuzzicksPWAs also get a customizable splash screen that looks like a native app. It is controlled by the app icon and the app shell color that is designated in the Manifest, and you can see on the right that this PWA, once it is downloaded, is opening outside of the browser, in its own window, and the app shell window is the color that is designated in the app manifest. The long title is presented at the top of the app shell and the short title is shown under the icon on the home screen.

https://d1pet9gxylz2tx.cloudfront.net/uploads/2016/05/google-progressive-web-app-Flipkart-graphic-468x288.png

24

Local Phone Cache = App Shell + Viewed Content Works OfflinePWA ServiceWorker

#SMX #22A1@SuzzicksThe other amazing thing about PWAs is that they work offline. Since the ServiceWork is in charge of caching and pre-fetching content from the server, that content is maintained in the browser cache, and accessible even if you are have a slow or intermittent data connection. Content and sections of the app that have never been accessed will not work, but anything that has been previously viewed, will work, even in flight mode.

https://d1pet9gxylz2tx.cloudfront.net/uploads/2016/05/google-progressive-web-app-Flipkart-graphic-468x288.png

25

26

#SMX #22A1@Suzzicks

`

#SMX #22A1@SuzzicksMind Blown! Now unfortunately, as luck would have it, the night before I was flying to MozCon, WAPO took this amazing PWA demo down, so you cant look at it on your phone, but I have just Tweeted out some other ones that you can test out on your phone.

http://media.giphy.com/media/rPU8u6vzUGGZ2/giphy.gif27

Check Out Cool PWAs While I Talk:ride.Lyft.comHotels Tonightm.AirBerlin.com/en/pwaFlipBoardAirHornerm.Forbes.comHomeDepot.ca

FT.com (Financial Times)AliExpresscode.NASA.comProgressiveWebFlap.comPWA.rockspwaDirectory.appspot.comFormula1.com

#SMX #22A1@SuzzicksBut you dont have to do all that fancy stuff to make your existing responsive site a PWA. If it is already on HTTPS, you just need to spend a few minutes creating the Manifest and the ServiceWorker. Lucky for you, there are wizards, validators and toolsets that make it super easy, for developers, but not too hard, even for non-developers. (Especially the App Manifest that is a cinch!)

Dont Let Fancy Dev Kill Your SEO!

#SMX #22A1@SuzzicksSo weather you are doing a PWA or just making your existing mobile or desktop site more dynamic, dont let it kill your SEO.29

Most PWAs Have Ignored SEO

#SMX #22A1@SuzzicksUnfortunately, most PWA developers, forget about SEO. Below is a site: for the Washington Post PWA we saw in the video. You can see that even though it looked like it had multiple pages, only one was indexed in Google.

30

Most PWAs Have Ignored SEO

#SMX #22A1@SuzzicksEven the PWA developers at Google forget about SEO. Google has a whole conference series dedicated to PWAs and they have launched a few sample PWAs, so that they could share the code, and allow developers to understand how they worked. One of their sample apps was meant to be a competitor to Instagram, and it was called Friendly-Pix. 31

Most PWAs Have Ignored SEODuplicate Title TagsDuplicateDescription TagsUn-optimized URLs

#SMX #22A1@SuzzicksIt fared a bit better, because it had uniquely indexiable content at least more than one pages worth, but they still have lots of duplicate titles and meta descriptions and under-optimized dynamic url structure.

32

To Get a Progressive Web App Indexed, You Must Work Harder

#SMX #22A1@SuzzicksBUT, there is a problem. Google still struggles to index JavaScript, and that means that PWA indexing is just as hard as any other web app, dynamic app or AJAX indexing. It is a pain, mostly because the content that is presented on a page can vary based on what the user does and does not click. Lots of different content can potentially be associated with one page or url.

https://moviewriternyu.files.wordpress.com/2015/06/captain_caveman.jpg

http://www.codemag.com/article/130109133

Here is the Good News:Google Wants to Crawl JavaScript!

#SMX #22A1@SuzzicksBut there are direct and indirect signals that Google wants to crawl JavaScript. With little fan-fare, Google updated its mobile webmaster instructions to allow developers to use JavaScript redirects to recognize and redirect mobile users to the appropriate page or version of content.

This is a screen shot of the current guidelines that say that as long as you use a rel=alternate tag to identify the different versions of the content, they are fine with it. The instructions actually dont even seem to require a use of a rel=canonical across the various versions of a piece of content. This is a BIG DEAL because for many years, SEOs were warned that JavaScript redirects were forbidden and could not be crawled. Now, they are endorsed.

https://developers.google.com/webmasters/mobile-sites/mobile-seo/separate-urls

https://c8859befb3f181b271f3-9499a632d82ae750b4b793e070f6eee5.ssl.cf1.rackcdn.com/275121-R27TZGFAH3MDX8C0-cavewoman_with_axe.png34

Indexing Web Apps(Even Non-PWA Dynamic Sites)HTML SnapshotsXML SitemapsFetch & RenderHTML5 PushState

#SMX #22A1@SuzzicksProper indexing of a dynamic website basically involves a delicate combination of HTML snapshots, XML sitemaps, HTML5 PushState (to update the address bar to a new url, whenever new content is loaded) and testing and/or verification in Search Console with Fetch & Render as Google. It may also involve server software to help like preRender.io or PhantomJS, both of which can help with that process. It gets harder, based on how much of the content is dynamic, so some sites are definitely easier than others. It is quite complicated, and could fill an entire day of presentations.

35

Heres the Other Problem:NO36

So Far, Safari Refuses to Support ServiceWorkers

#SMX #22A1@SuzzicksAliExpress saw an 82% increase conversion rate even on iOS. Total increase in conversion rate of 104%. 2x more pages viewed per session on all browsers. 74% increase in time spent on site for all browsers36

37

#SMX #22A1@Suzzickshttp://i247.photobucket.com/albums/gg158/rasselas/escalator.jpg37

38

#SMX #22A1@Suzzickshttp://i247.photobucket.com/albums/gg158/rasselas/escalator.jpg38

Google Already Has a Work-Around!39

#SMX #22A1@Suzzicks

Google Already Has a Work-Around!40

#SMX #22A1@Suzzicks

41

#SMX #22A1@SuzzicksHow Do We Index The World Without URLs?

So How will Things Get Indexed?

#SMX #22A1@SuzzicksHow Do We Index The World Without URLs?

FirebaseDynamic Linksarelinksthat work the way you want, on multiple platforms, and whether or not your app is already installed. WithDynamic Links, your users get the best available experience for the platform they open yourlinkon.Jan 25, 2017So How will Things Get Indexed?

#SMX #22A1@SuzzicksDynamic Links in the Wild:

Business Locations

Google My Biz LocationsImagesKnowledge Graph

#SMX #22A1@SuzzicksPreparing for Mobile-First Indexing:Google Hosted Content

#SMX #22A1@Suzzickshttp://2.bp.blogspot.com/-9fa3STzWL-o/VesK6PikIjI/AAAAAAABMk8/uH1eeGZEvFI/s1600/google%2Bcloud%2Bplatorm.jpg45

Preparing for Mobile-First Indexing:Google Hosted Content

#SMX #22A1@Suzzickshttp://2.bp.blogspot.com/-9fa3STzWL-o/VesK6PikIjI/AAAAAAABMk8/uH1eeGZEvFI/s1600/google%2Bcloud%2Bplatorm.jpghttps://lh3.googleusercontent.com/you5Qm6B9GhkBvQ-A25p2p3iDsRCzwbqupJ-H4wJWAnkl2O0jOgar4zhY31e0RUAw40P47jkfDg24T3KHDRFSFFRGUXn6a8=s88846

ServiceWorker Resources -- Update Your Site to PWA:Service Worker Toolbox: https://github.com/GoogleChrome/sw-toolbox Service Worker Instructions: http://deanhume.com/home/blogpost/getting-started-with-the-service-worker-toolbox/10134 LightHouse: Chrome Plugin for PWA Auditing:https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en

#SMX #22A1@SuzzicksBut you dont have to do all that fancy stuff to make your existing responsive site a PWA. If it is already on HTTPS, you just need to spend a few minutes creating the Manifest and the ServiceWorker. Lucky for you, there are wizards, validators and toolsets that make it super easy, for developers, but not too hard, even for non-developers. (Especially the App Manifest that is a cinch!)

App Manifest Resources -- Update Your Site to PWA:Inspect PWA Manifest:Chrome Dev Tools Application Panel/ManifestApp Manifest Wizard: https://brucelawson.github.io/manifest/App Manifest Validator: https://manifest-validator.appspot.com/

#SMX #22A1@SuzzicksBut you dont have to do all that fancy stuff to make your existing responsive site a PWA. If it is already on HTTPS, you just need to spend a few minutes creating the Manifest and the ServiceWorker. Lucky for you, there are wizards, validators and toolsets that make it super easy, for developers, but not too hard, even for non-developers. (Especially the App Manifest that is a cinch!)

49

#SMX #22A1@Suzzicks

50

#SMX #22A1@Suzzicks

51

#SMX #22A1@Suzzicks

Thanks!!!

@suzzicks@mobilemoxie

facebook.com/mobilemoxie

www.mobilemoxie.comANDapi.mobilemoxie.com

#SMX #22A1@Suzzicks