What are Progressive Web Apps, how do they work, how they will benefit your site and how you can optimize them? Get the answers to these questions here!

1. #pwaseo by @aleyda from #orainti at #searchy
PWAWhy you want one & how to optimize them

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

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

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

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

6. #pwaseo by @aleyda from #orainti at #searchy
App content
is non-
findable

7. #pwaseo by @aleyda from #orainti at #searchy
Fragmented
and vertical
specific app
experience

8. #pwaseo by @aleyda from #orainti at #searchy
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 #searchy

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

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

12. #pwaseo by @aleyda from #orainti at #searchy
Mobile
Websites
speed &
usability is
shitty

13. #pwaseo by @aleyda from #orainti at #searchy
You need
internet
connection to
access Web
content

14. #pwaseo by @aleyda from #orainti at #searchy
Easier app
access for
frequent
use

15. #pwaseo by @aleyda from #orainti at #searchy
App usage
of additional
phone
features

16. #pwaseo by @aleyda from #orainti at #searchy
Many times
we’re also
just forced to
download
them

17. #pwaseo by @aleyda from #orainti at #searchy
Again and again.
Sigh.

18. #pwaseo by @aleyda from #orainti at #searchy
Realistically,
we only use
1/3 of the
apps we
install

19. #pwaseo by @aleyda from #orainti at #searchy
Yeah.
It’s
broken.

20. #pwaseo by @aleyda from #orainti at #searchy
There’s a gap to close between
mobile Webs vs. apps
https://www.slideshare.net/greenido/from-amp-to-pwa

21. #pwaseo by @aleyda from #orainti at #searchy
This gap is closed by PWAs

22. #pwaseo by @aleyda from #orainti at #searchy
A Progressive Web App (PWA) is a
web app that provides a native app
experience to Web users.

23. #pwaseo by @aleyda from #orainti at #searchy
PWAs provide the benefits of an
app without abandoning the Web
https://developers.google.com/web/progressive-web-apps/

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

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

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

27. #pwaseo by @aleyda from #orainti at #searchyhttps://dzone.com/articles/pwa-technology
All modern
browsers
now support
PWAs

28. #pwaseo by @aleyda from #orainti at #searchyhttps://developers.google.com/web/progressive-web-apps/desktop
And not only on mobile,
but also on desktop

29. #pwaseo by @aleyda from #orainti at #searchy
Although
there’s some
resistance
from the main
app players
https://medium.com/@firt/is-there-a-cold-war-between-android-and-chrome-because-of-pwas-e50a7471056c

30. #pwaseo by @aleyda from #orainti at #searchy
So feature
them in the
app stores is
still difficult
https://debuggerdotbreak.judahgabriel.com/2018/04/13/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned/

31. #pwaseo by @aleyda from #orainti at #searchyhttps://www.awwwards.com/PWA-ebook/
PWAs are the future of the Web

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

33. #pwaseo by @aleyda from #orainti at #searchy
Websites
that adopt
PWA usually
see benefits
due to the
App like
functionality
https://www.awwwards.com/PWA-ebook/

34. #pwaseo by @aleyda from #orainti at #searchyhttps://www.seroundtable.com/google-pwas-seo-24956.html
However, PWA
usage is not a
ranking factor,
they don’t offer
any advantage
over responsive
Websites from a
searchability
perspective

35. #pwaseo by @aleyda from #orainti at #searchy
But aren’t PWAs
Single Page
Applications
that will
challenge SEO?
Not necessarily.
https://love2dev.com/blog/pwa-spa/

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

37. #pwaseo by @aleyda from #orainti at #searchyhttps://www.ampproject.org/docs/integration/pwa-amp
Even AMP
based sites
can be also
combined with
PWAs in
different ways

38. #pwaseo by @aleyda from #orainti at #searchyhttps://www.awwwards.com/PWA-ebook/
In the case of 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
Build a
responsive
website (that can
be AMP based too)
that will be your
application.
1

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

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

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

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

43. #pwaseo by @aleyda from #orainti at #searchyhttps://developers.google.com/web/progressive-web-apps/checklist
Served over
HTTPS
Responsive
on Mobile &
Tablets
These are the baseline PWA features
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

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

45. #pwaseo by @aleyda from #orainti at #searchy
Which are validated like this

46. #pwaseo by @aleyda from #orainti at #searchy
And shown
like this in
the audits
panel of
Chrome Dev
Tools

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

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

49. #pwaseo by @aleyda from #orainti at #searchy
For example, the
Starbucks Web
app that is a
PWA, parallel to
their main site
https://developers.google.com/web/tools/lighthouse/

50. #pwaseo by @aleyda from #orainti at #searchy
Or How
PWAMP Works
which I created
following the
Codelabs guide
for AMP based
PWAs
https://www.howpwampworks.com/

51. #pwaseo by @aleyda from #orainti at #searchy
Yes, this is an AMP based PWA

52. #pwaseo by @aleyda from #orainti at #searchyhttps://www.whymywebtrafficdropped.com/
Or Why my Web
Traffic Dropped
which is a WP
based site for
which I enabled
PWA features
with a plugin

53. #pwaseo by @aleyda from #orainti at #searchyhttps://superpwa.com/
I used the Super PWA plugin

54. #pwaseo by @aleyda from #orainti at #searchyhttps://magento.com/blog/magento-news/magento-announces-availability-pwa-studio
PWA support will come to Magento to
facilitate adoption by online stores too

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

56. #pwaseo by @aleyda from #orainti at #searchy
The PWA checklist includes some
SEO related best practices too
https://developers.google.com/web/progressive-web-apps/checklist
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

57. #pwaseo by @aleyda from #orainti at #searchy
Sorry, no SPAs!
https://developers.google.com/web/progressive-web-apps/checklist
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

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

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

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

61. #pwaseo by @aleyda from #orainti at #searchy
However, it’s specially important if
the PWA is a Web app relying on JS
https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
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.”

62. #pwaseo by @aleyda from #orainti at #searchy
Like this one, relying on client side JS
rendering to show much of its content

63. #pwaseo by @aleyda from #orainti at #searchy
And looks like this when JS is
disabled from the browser

64. #pwaseo by @aleyda from #orainti at #searchyhttps://search.google.com/test/mobile-friendly
Which is why is critical to see if the
page is rendered by Google

65. #pwaseo by @aleyda from #orainti at #searchy
And the content is indexed too

66. #pwaseo by @aleyda from #orainti at #searchy
If possible this should be avoided tho
due to the way Google treats JS
http://www.thesempost.com/google-indexes-ranks-javascript-pages-two-waves-days-apart/

67. #pwaseo by @aleyda from #orainti at #searchy
Without overlooking fundamental
SEO configuration validation

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

69. #pwaseo by @aleyda from #orainti at #searchy
Funnily, when validating the client
rendered version this what I got

70. #pwaseo by @aleyda from #orainti at #searchy
However, this happened because the
resources were not available in HTTPS

71. #pwaseo by @aleyda from #orainti at #searchy
So when I checked it again in HTTP
it worked, but PWAs should use HTTPS

72. #pwaseo by @aleyda from #orainti at #searchy
This is why a full crawl and analysis
both with and without JS is necessary

73. #pwaseo by @aleyda from #orainti at #searchy
Validating all SEO related
configurations, comparing them

74. #pwaseo by @aleyda from #orainti at #searchy
These are all
SEO validations
we should be
always doing, in
fact most PWAs
at the moment
are also SEO
friendly
https://medium.com/progressive-web-apps/2018-state-of-progressive-web-apps-f7517d43ba70

75. #pwaseo by @aleyda from #orainti at #searchy
There’s no excuse to not enjoy of
PWAs functionalities on your sites
https://medium.com/progressive-web-apps/2018-state-of-progressive-web-apps-f7517d43ba70

76. #pwaseo by @aleyda from #orainti at #searchy
It’s time go progressive
#pwaseo by @aleyda from #orainti at #searchy

77. #pwaseo by @aleyda from #orainti at #searchy
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, Huffington Post
* European Search Personality of the Year in 2018

78. #pwaseo by @aleyda from #orainti at #searchy
If you liked
it, you can
watch me
weekly by
subscribing
to Crawling
Mondays
bit.ly/crawlingmondays