What are progressive Web apps (PWAs) and how to optimize them for organic search results? In this session I'll share what they are, how to enable/develop them, how to validate them, and make sure they're SEO friendly, including tools and criteria.

1. #pwaseo by @aleyda from #orainti at #pubcon
SEO for PWAs
#pwaseo by @aleyda from #orainti at #pubcon

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

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

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

5. #pwaseo by @aleyda from #orainti at #pubcon
Which you don’t need to develop from
scratch, you can enable them to your site
https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool

6. #pwaseo by @aleyda from #orainti at #pubcon
Check “How
PWAMP Works”
which I created
following the
Google Codelabs
guide for AMP
based PWAs
https://www.howpwampworks.com/ and https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/

7. #pwaseo by @aleyda from #orainti at #pubcon
Or “Why my Web
Traffic Dropped”
that is based on
Wordpress using
the Super PWA
Plugin
https://www.whymywebtrafficdropped.com/ and https://wordpress.org/plugins/super-progressive-web-apps/

8. #pwaseo by @aleyda from #orainti at #pubconhttps://codelabs.developers.google.com/dev-pwa-training/ & https://www.pwabuilder.com
There a many other resources to migrate
or enable PWA features to your site

9. #pwaseo by @aleyda from #orainti at #pubcon
By following 3 core steps
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

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

11. #pwaseo by @aleyda from #orainti at #pubcon
Which is why
many of the top
Websites have
now PWA
features
http://progressivewebapproom.com/

12. #pwaseo by @aleyda from #orainti at #pubconhttps://builtvisible.com/google-analytics-for-pwas-tracking-offline-behaviour-and-more/
That can be
tracked by
configuring your
Google Analytics
to measure them

13. #pwaseo by @aleyda from #orainti at #pubcon
I’m ready to say bye to app install requests!

14. #pwaseo by @aleyda from #orainti at #pubcon#pwaseo by @aleyda from #orainti at #pubcon
How can
you know if
a site is a
valid PWA?

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

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

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

18. #pwaseo by @aleyda from #orainti at #pubcon
Like this

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

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

21. #pwaseo by @aleyda from #orainti at #pubconhttps://webhint.io/
You can use Webhint

22. #pwaseo by @aleyda from #orainti at #pubcon
Or use the PWA Builder to validate it too
https://www.pwabuilder.com/

23. #pwaseo by @aleyda from #orainti at #pubconhttps://www.pwabuilder.com/
Which also
allows to
revise and
edit your app
manifest and
service
worker

24. #pwaseo by @aleyda from #orainti at #pubcon#pwaseo by @aleyda from #orainti at #pubcon
But, do
PWAs help
SEO?

25. #pwaseo by @aleyda from #orainti at #pubcon
Sites that adopt PWA see user experience
benefits due to the App like functionality
https://www.pwastats.com/

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

27. #pwaseo by @aleyda from #orainti at #pubcon
On the other
hand, PWA
shouldn’t hurt
SEO since a PWA
doesn’t need to
be a SPA and can
follow SEO best
practices too…
https://love2dev.com/blog/pwa-spa/

28. #pwaseo by @aleyda from #orainti at #pubconhttps://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
It’s then
fundamental to
make sure that
your PWA is
also SEO
friendly
SEO

29. #pwaseo by @aleyda from #orainti at #pubcon#pwaseo by @aleyda from #orainti at #pubcon
How can
you
optimize
PWAs for
search?

30. #pwaseo by @aleyda from #orainti at #pubcon
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
indexed by
Google
Canonical
URLs are
provided when
necessary
Avoid usage
of fragment
identifiers
schema.org
metadata is
included

31. #pwaseo by @aleyda from #orainti at #pubcon
Sorry, no Single Page Applications (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

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

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

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

35. #pwaseo by @aleyda from #orainti at #pubcon
Which can be followed like the Alibaba
mobile site, -that is a PWA-, is doing here
m.alibaba.com

36. #pwaseo by @aleyda from #orainti at #pubcon
However is important to validate if the
PWA is relying on JS client side rendering
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

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

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

39. #pwaseo by @aleyda from #orainti at #pubconhttps://search.google.com/test/mobile-friendly
Before After
Thanks to the evergreen Googlebot their
existing rendering issues are now gone

40. #pwaseo by @aleyda from #orainti at #pubcon
However we should be mindful of the
still existing two indexing waves
http://www.thesempost.com/google-indexes-ranks-javascript-pages-two-waves-days-apart/

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

42. #pwaseo by @aleyda from #orainti at #pubconhttps://www.notprovided.eu/rendering-on-the-web-the-seo-version/
It’s better to avoid Client Side Rendering

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

44. #pwaseo by @aleyda from #orainti at #pubconhttps://twitter.com/i/web/status/1102906582961213441
Especially if server
side rendering is
also a viable and
straight-forward
alternative in your
platform
development or
configuration

45. #pwaseo by @aleyda from #orainti at #pubconhttps://app.starbucks.com/
There are other scenarios too, like with the
Starbucks valid PWA that can be rendered…

46. #pwaseo by @aleyda from #orainti at #pubcon
But lacks of
fundamental
content
optimization in
its main pages

47. #pwaseo by @aleyda from #orainti at #pubconhttps://github.com/google/indexable-pwa-samples
Or Google's example of Indexable PWA w/
resources not found via HTTPS (only HTTP)

48. #pwaseo by @aleyda from #orainti at #pubcon
A full SEO audit by crawling both
with & without JS is necessary then
Screaming Frog, Sitebulb, Deepcrawl, Ryte

49. #pwaseo by @aleyda from #orainti at #pubcon
To identify,
assess and
minimize
crawlability,
indexability and
relevance issues
while making
sure there are no
gaps between
the crawls
Sitebulb, Deepcrawl, Ryte

50. #pwaseo by @aleyda from #orainti at #pubcon
Like this
Sitebulb, Deepcrawl, Ryte

51. #pwaseo by @aleyda from #orainti at #pubconhttps://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob
You can also use
the "View
Rendered
Source”
extension to
compare the raw
HTML vs. the
rendered one in
Chrome

52. #pwaseo by @aleyda from #orainti at #pubconhttps://en.ryte.com/magazine/javascript-and-seo-best-practice-guide
Avoiding these common JS Client Side
Rendering optimization issues
Non-
unique
static URLs
per page/
PushState
errors
Non-
optimized
metadata
Non-<a href>
links
Raw HTML
vs. Rendered
DOM
differences
Robots.txt JS
blockage

53. #pwaseo by @aleyda from #orainti at #pubconhttps://developers.google.com/search/docs/guides/fix-search-javascript
Check out the
updated
JavaScript search
issues & fixes
documentation
by Google to
avoid common
problems

54. #pwaseo by @aleyda from #orainti at #pubcon
https://www.deepcrawl.com/knowledge/white-papers/javascript-seo-guide/
https://en.ryte.com/magazine/javascript-and-seo-best-practice-guide
As well as the complete JavaScript SEO
guides from Deepcrawl and Ryte

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

56. #pwaseo by @aleyda from #orainti at #pubcon#pwaseo by @aleyda from #orainti at #pubcon
It’s time to go progressive

57. #pwaseo by @aleyda from #orainti at #pubconhttps://youtube.com/c/crawlingmondaysbyaleyda
Thank you!
Questions?