The document discusses Progressive Web Apps (PWAs) and how they can help address issues with mobile apps like battery drain, storage usage, and need for constant updates. PWAs provide an app-like experience to users through a web browser by making use of service workers, web app manifests, and other modern web technologies. The document outlines how to develop and optimize PWAs, including ensuring they are search engine friendly through best practices like providing unique URLs for content and using schema.org structured data. It emphasizes that PWAs can provide app-like functionality without compromising the benefits of the web.

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
Chrome 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 functionalties 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