Progressive Web Apps: Why you want one & how to optimize them #SMSSYD19

#pwaseo by @aleyda from #orainti at #smssyd19
Why you want one & how to optimize them
Progressive Web Apps

Mobile
Apps are
broken

They eat
your
mobile
battery

Take a lot
of phone
space

Require
constant
updates

App content
is non-
findable

Fragmented
and vertical
specific app
experience

Can be expensive to develop
https://www.consagous.com/blog/how-much-does-it-cost-to-build-an-app/

#pwaseo by @aleyda from #orainti at #smssyd19#pwaseo by @aleyda from #orainti at #smssyd19

And yet we
end up
installing a lot
of apps
Think With Google

Why do we keep using apps then?

Mobile
Websites
speed &
usability is
shitty

You need
internet
connection to
access Web
content

Easier app
access for
frequent use

App usage
of additional
phone
features

Many times
we’re also
just forced to
download
them

Again and again.
Sigh.

Realistically,
we only use
1/3 of the
apps we
install

Yeah.  
It’s
broken.

There’s a gap to close between
mobile Webs vs. apps
https://www.slideshare.net/greenido/from-amp-to-pwa

This gap is closed by PWAs

A Progressive Web App (PWA) is a
web app that provides a native app
experience to Web users.

PWAs provide the benefits of an
app without abandoning the Web
https://developers.google.com/web/progressive-web-apps/

#pwaseo by @aleyda from #orainti at #smssyd19https://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

#pwaseo by @aleyda from #orainti at #smssyd19https://www.onenorth.com/blog/post/whats-next-in-mobile-progressive-web-apps
Closing the gap between the
Websites and apps

#pwaseo by @aleyda from #orainti at #smssyd19https://dzone.com/articles/pwa-technology
This is possible thanks to  
the use of 4 technologies

#pwaseo by @aleyda from #orainti at #smssyd19https://twitter.com/firt/status/1105840379117662209
All modern
browsers
now support
PWAs

Not only on mobile but also on
desktop
https://developers.google.com/web/progressive-web-apps/desktop

Which is why many top mobile
focused services have released PWAs
https://appsco.pe/

Uber

Twitter

9GAG

You can add them to your home screen

“The Web is going to be  
the new app store”

In fact, you can
actually now
also feature
PWAs in App
Stores too
https://medium.com/@firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc

#pwaseo by @aleyda from #orainti at #smssyd19https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b
Although it
does require
a bit of
more work

#pwaseo by @aleyda from #orainti at #smssyd19https://www.awwwards.com/PWA-ebook/
“PWAs are a natural evolution of
how we distribute and consume
software” 
 PWA Ebook by Microsoft & Google

How can
you create
a PWA
then?

In the case of existing 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
Use a responsive
website (that can be
AMP based too) that
will be your
application
1

#pwaseo by @aleyda from #orainti at #smssyd19https://codelabs.developers.google.com/codelabs/migrate-to-progressive-web-apps/
Check out
this step by
step guide
to migrate
your site to
a PWA

#pwaseo by @aleyda from #orainti at #smssyd19https://codelabs.developers.google.com/codelabs/workbox-indexeddb/
As well as
to develop
a PWA
from
scratch

#pwaseo by @aleyda from #orainti at #smssyd19https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/
Or build a
Progressive
Web AMP
site

#pwaseo by @aleyda from #orainti at #smssyd19https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/https://codelabs.developers.google.com/dev-pwa-training/
There’s a full training provided  
by Google Developers

#pwaseo by @aleyda from #orainti at #smssyd19https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/https://www.youtube.com/playlist?list=PLNYkxOF6rcIB2xHBZ7opgc2Mv009X87Hh
And video tutorials in the Google’s
Chrome Developers YouTube Channel

#pwaseo by @aleyda from #orainti at #smssyd19https://www.pwabuilder.com/publish
You can also use the “ready to
customize and use” PWA Builder files

Check “How
PWAMP Works”
which I created
following the
Codelabs guide
for AMP based
PWAs
https://www.howpwampworks.com/

#pwaseo by @aleyda from #orainti at #smssyd19https://superpwa.com/
You can also enable PWA features to
your Wordpress sites with Plugins

#pwaseo by @aleyda from #orainti at #smssyd19https://www.whymywebtrafficdropped.com/
Which is the one
I’ve used with
“Why my Web
Traffic Dropped”

#pwaseo by @aleyda from #orainti at #smssyd19https://magento.com/products/magento-commerce/pwa
Magento
now also
supports
AMP with
its PWA
Studio

How can
you
validate
your
PWAs?

PWAs features
should follow
best practices
specified in the
PWA checklist
https://developers.google.com/web/progressive-web-apps/checklist

Served over
HTTPS
Responsive
on Mobile &
Tablets
There are baseline PWA features  
that you’ll need to enable
URLs should
load while
ofﬂine
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

#pwaseo by @aleyda from #orainti at #smssyd19https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool
You can verify them with the
Lighthouse PWA validation in Chrome

Like this

#pwaseo by @aleyda from #orainti at #smssyd19https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/
You can also
use Chrome
DevTools
Application
panel to
verify service
workers

As well as
the App
Manifest
https://developers.google.com/web/fundamentals/web-app-manifest/

Or use the PWA Builder to validate too

Which also
allows to
revise and
edit your app
manifest and 
service
worker

But, do
PWAs
help
SEO?

Websites that adopt PWA see benefits
due to the App like functionality
https://www.pwastats.com/

#pwaseo by @aleyda from #orainti at #smssyd19https://www.seroundtable.com/google-pwas-seo-24956.html
However, PWA
usage won’t help
SEO as it’s not a
ranking factor
though…

On the other
hand, PWA
shouldn’t hurt
SEO since a
PWA doesn’t
need to be a
SPA
https://love2dev.com/blog/pwa-spa/

Your Website
Your Web App 
(SPA or MPA)
PWA
You can develop a PWA from scratch,
or migrate your SPA, MPA or Website

#pwaseo by @aleyda from #orainti at #smssyd19https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
It’s then critical
to make sure
that all these
types of PWAs
are also search
friendly
SEO

#pwaseo by @aleyda from #orainti at #smssyd19https://builtvisible.com/google-analytics-for-pwas-tracking-offline-behaviour-and-more/
While
configuring
your Google
Analytics
tracking to
effectively
measure its
usage

How can
you
optimize
PWAs for
search?

The PWA checklist includes some  
SEO related best practices too
Each page has
a URL
Site’s
content is
indexed by
Google
Canonical
URLs are
provided when
necessary
Avoid usage
of fragment
identiﬁers
schema.org
metadata is
included

Sorry, no SPAs!  
Each page has
a URL
Site’s
content is
indexe day
Google
Canonical
URLs are
provided when
necessary
Avoid usage
of fragment
identiﬁers
schema.org
metadata is
included

Lighthouse doesn’t validate them
automatically at the moment though

#pwaseo by @aleyda from #orainti at #smssyd19https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
It’s then
necessary to
also validate
these SEO best
practices along
the ones
provided by
Google

Which are mostly the same and
common to any Website SEO validation
Make Your
Content
Crawlable
Design for
multiple
devices
Provide Clean
URLs
Use
progressive
enhancement
Specify
Canonical
URLs
Page load
speed should
be fast
Use
schema.org
structured
data
Cross-
browser
support
https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html

It’s specially important to validate if
the PWA is a Web app relying on JS
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.”
https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html

Like the Magento PWA Demo Store,
which passes the PWA validation…
https://inchoopwa.com/

…but it looks like this when JS is
disabled since it’s Client Side Rendering

#pwaseo by @aleyda from #orainti at #smssyd19https://search.google.com/test/mobile-friendly
Which can
cause
content
indexing
and
rendering
issues

It should be avoided due to the way
Google index JS reliant content
http://www.thesempost.com/google-indexes-ranks-javascript-pages-two-waves-days-apart/

This is why server
side rendering it’s
recommended
instead, which is
also known by
Magento, and
supported too
https://twitter.com/i/web/status/1102906582961213441

A full SEO audit by crawling both  
with & without JS is necessary

#pwaseo by @aleyda from #orainti at #smssyd19https://github.com/google/indexable-pwa-samples
To facilitate this
Google provides
examples of
Indexable PWAs
using server,
client side and
hybrid sites

There’s no excuse to not enjoy of app
features on an SEO friendly Website
https://medium.com/progressive-web-apps/2018-state-of-progressive-web-apps-f7517d43ba70

It’s time go progressive

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, Hufﬁngton Post
* European Search Personality of the Year in 2018

If you liked
it, you can
watch me
weekly by
subscribing
to Crawling
Mondays
https://youtube.com/c/crawlingmondaysbyaleyda

Progressive Web Apps: Why you want one & how to optimize them #SMSSYD19

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Progressive Web Apps: Why you want one & how to optimize them #SMSSYD19

Similaire à Progressive Web Apps: Why you want one & how to optimize them #SMSSYD19 (20)

Plus de Aleyda Solís

Plus de Aleyda Solís (20)

Dernier

Dernier (20)

Progressive Web Apps: Why you want one & how to optimize them #SMSSYD19