1.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
#pwaseo by @aleyda from #orainti at @digitaleliteday!
PWA SEO
Optimizing
for the Future
of the Web

2.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Mobile
Apps are
broken
#pwaseo by @aleyda from #orainti at @digitaleliteday!

3.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
They eat
your
mobile
battery

4.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Take a lot
of phone
space

5.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Require
constant
updates

6.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
App Store
search is
broken

7.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Provide a
Fragmented
and vertical
specific app
experience

8.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Can be expensive to develop
https://www.consagous.com/blog/how-much-does-it-cost-to-build-an-app/

9.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Sorry!

10.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
And yet we
end up
installing a lot
of apps
Think With Google

11.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Why do we keep using apps then?

12.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
It’s easier to
access apps
through the
home screen

13.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Apps can
use
additional
phone
features

14.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Mobile
Websites
speed &
usability is
shitty
https://developers.google.com/speed/pagespeed/insights/

15.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
You need
internet
connection to
access Web
content

16.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Yeah.
The Mobile
Web is
broken
too!
#pwaseo by @aleyda from #orainti at @digitaleliteday!

17.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Sigh.
#pwaseo by @aleyda from #orainti at @digitaleliteday!

18.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Because of
this we’re
also
sometimes
forced to
download
apps

19.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Again and again.
Sigh.

20.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
At the end,
we only use
1/3 of the
apps we
install

21.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report
Although we
spent most of
our mobile
time in them

22.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
There’s an obvious gap between
the mobile Web vs. apps
https://www.slideshare.net/greenido/from-amp-to-pwa

23.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
The whole
App vs.
Mobile
Web status
is broken
#pwaseo by @aleyda from #orainti at @digitaleliteday!

24.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
But their
destruction
it’s not really
a reasonable
solution…
#pwaseo by @aleyda from #orainti at @digitaleliteday!

25.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
It’s time to
welcome PWAs!
A web app that
provides a
native app
experience to
Web users
https://developers.google.com/web/progressive-web-apps/

26.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
https://www.appypie.com/progressive-web-apps-the-future-of-mobile-web-app-development
PWAs provide
the benefits of
an app without
abandoning
the Web

27.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
While providing an improved
Web user experience
https://developers.google.com/web/progressive-web-apps/

28.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
PWAs close the gap between
Websites and apps
https://www.onenorth.com/blog/post/whats-next-in-mobile-progressive-web-apps

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

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

31.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
https://developers.google.com/web/progressive-web-apps/desktop
Not only on
mobile but
also on
desktop

32.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Which is why many top mobile
focused services are releasing PWAs
https://appsco.pe/

33.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Uber

34.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Twitter

35.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
9GAG

36.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Add them to your home screen now

37.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
“The Web is
going to be
the new app
store”

38.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
You can also
feature
PWAs in App
Stores too,
although
with a bit of
extra work
https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b

39.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
https://developers.google.com/web/updates/2019/02/using-twa
Trusted Web
Activities
highly
facilitate this
for the Play
Store now

40.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
https://twitter.com/firt/status/1127971459434000385
Enjoying the
same native
apps benefits

41.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
“PWAs are a
natural
evolution of
how we
distribute and
consume
software”
https://www.awwwards.com/PWA-ebook/

42.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
… and at some
point they’ll be
also the future
of native apps!
https://www.smashingmagazine.com/2018/12/pwa-native-mobile-apps/

43.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
There’s this feeling going on…
PWAs Native Apps
Brands
#pwaseo by @aleyda from #orainti at @digitaleliteday!

44.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
However, there are still limitations
https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7

45.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
The evolution will also be progressive

46.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
How can
you create
a PWA
then?
#pwaseo by @aleyda from #orainti at @digitaleliteday!

47.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
#pwaseo by @aleyda from #orainti at @digitaleliteday!
You’ll see
is not that
hard…

48.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
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
https://www.awwwards.com/PWA-ebook/

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

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

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

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

53.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
And video tutorials in the Google’s
Chrome Developers YouTube Channel
https://www.youtube.com/playlist?list=PLNYkxOF6rcIB2xHBZ7opgc2Mv009X87Hh

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

55.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Check “How
PWAMP Works”
which I created
following the
Codelabs guide
for AMP based
PWAs
https://www.howpwampworks.com/

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

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

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

59.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
How can
you
validate
your
PWAs?
#pwaseo by @aleyda from #orainti at @digitaleliteday!

60.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
PWAs features
should follow
best practices
specified in the
PWA checklist
https://developers.google.com/web/progressive-web-apps/checklist

61.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Served over
HTTPS
Responsive
on Mobile &
Tablets
There are baseline PWA features
that you’ll need to enable
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
https://developers.google.com/web/progressive-web-apps/checklist

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

63.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Like this

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

65.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
As well as
the App
Manifest
https://developers.google.com/web/fundamentals/web-app-manifest/

66.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Or use the PWA Builder to validate too
https://www.pwabuilder.com/

67.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Which also
allows to
revise and
edit your app
manifest and
service
worker
https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool

68.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
But, do
PWAs
help
SEO?
#pwaseo by @aleyda from #orainti at @digitaleliteday!

69.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
#pwaseo by @aleyda from #orainti at @digitaleliteday!
I knew that
question
was
coming…

70.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Websites that adopt PWA see benefits
due to the App like functionality
https://www.pwastats.com/

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

72.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
On the other
hand, PWA
shouldn’t hurt
SEO, a PWA
doesn’t need to
be a SPA
https://love2dev.com/blog/pwa-spa/

73.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Your Website
Your Web App
(SPA or MPA)
PWA
You can develop a PWA from scratch,
or migrate your SPA, MPA or Website

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

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

76.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
How can
you
optimize
PWAs for
search?
#pwaseo by @aleyda from #orainti at @digitaleliteday!

77.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
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
identifiers
schema.org
metadata is
included
https://developers.google.com/web/progressive-web-apps/checklist

78.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
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
identifiers
schema.org
metadata is
included
https://developers.google.com/web/progressive-web-apps/checklist

79.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Lighthouse doesn’t validate them
automatically at the moment though
https://developers.google.com/web/progressive-web-apps/checklist

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

81.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
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

82.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
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

83.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
You want the pizza delivered ready
to be eaten, not cooked at home!

84.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Unless the chef
is Jon Snow!

85.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Like the Magento PWA Demo Store,
which passes the PWA validation…
https://inchoopwa.com/

86.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
…but it looks like this when JS is
disabled since it’s Client Side Rendering

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

88.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
This happens because JS reliant
content is indexed in a second wave
http://www.thesempost.com/google-indexes-ranks-javascript-pages-two-waves-days-apart/

89.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
“Rendering is expensive and cannot
be done immediately”
https://www.deepcrawl.com/blog/webinars/making-javascript-work-for-search-martin-splitt/

90.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Let’s better avoid Client Side Rendering
https://www.deepcrawl.com/blog/webinars/making-javascript-work-for-search-martin-splitt/

91.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Server side
rendering is also
supported by
Magento too, but
is not the default
https://twitter.com/i/web/status/1102906582961213441

92.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
A full SEO audit by crawling both
with & without JS is necessary

93.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
To identify,
assess and
close
the existing
gaps

94.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Check out
Google's
examples of
Indexable PWAs
using server,
client side and
hybrid rendered
sites
https://github.com/google/indexable-pwa-samples

95.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
https://www.youtube.com/watch?v=LXF8bM4g-J4
Google’s
JavaScript
SEO Series
w/ Martin
Splitt

96.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
https://developers.google.com/search/docs/guides/fix-search-javascript
As well as the
JavaScript
search issues
& fixes
documentation
by Google

97.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
https://twitter.com/firt
And follow
Maximiliano
Firtman to
keep
updated on
PWA
evolution

98.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
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

99.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
Let’s make the Web progressive!
#pwaseo by @aleyda from #orainti at @digitaleliteday!

100.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
I’m 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
https://www.aleydasolis.com/

101.
#pwaseo by @aleyda from #orainti at @digitaleliteday!
If you liked
it, you can
watch me
weekly by
subscribing
to Crawling
Mondays
https://youtube.com/c/crawlingmondaysbyaleyda