PWA SEO: Optimizing for the Future of the Web

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

Mobile
Apps are
broken

They eat
your
mobile
battery

Take a lot
of phone
space

Require
constant
updates

App Store
search is
broken

Provide a
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/

Sorry!

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

Why do we keep using apps then?

It’s easier to
access apps
through the
home screen

Apps can
use
additional
phone
features

Mobile
Websites
speed &
usability is
shitty
https://developers.google.com/speed/pagespeed/insights/

You need
internet
connection to
access Web
content

Yeah.  
The Mobile
Web is
broken
too!

Sigh.

Because of
this we’re
also
sometimes
forced to
download
apps

Again and again.
Sigh.

At the end,
we only use
1/3 of the
apps we
install

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

There’s an obvious gap between  
the mobile Web vs. apps
https://www.slideshare.net/greenido/from-amp-to-pwa

The whole
App vs.
Mobile
Web status
is broken

But their
destruction
it’s not really
a reasonable
solution…

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/

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

While providing an improved  
Web user experience
https://developers.google.com/web/progressive-web-apps/

PWAs close the gap between  
Websites and apps
https://www.onenorth.com/blog/post/whats-next-in-mobile-progressive-web-apps

This is possible thanks to  
the use of 4 technologies
https://dzone.com/articles/pwa-technology

All modern
browsers
now support
PWAs
https://twitter.com/firt/status/1105840379117662209

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

Which is why many top mobile
focused services are releasing PWAs
https://appsco.pe/

Uber

Twitter

9GAG

Add them to your home screen now

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

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

https://developers.google.com/web/updates/2019/02/using-twa
Trusted Web
Activities
highly
facilitate this
for the Play
Store now

https://twitter.com/firt/status/1127971459434000385
Enjoying the
same native
apps benefits

“PWAs are a
natural
evolution of
how we
distribute and
consume
software”
https://www.awwwards.com/PWA-ebook/

… and at some
point they’ll be
also the future
of native apps!
https://www.smashingmagazine.com/2018/12/pwa-native-mobile-apps/

There’s this feeling going on…
PWAs Native Apps
Brands

However, there are still limitations
https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7

The evolution will also be progressive

How can
you create
a PWA
then?

You’ll see
is not that
hard…

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/

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/

As well as
to develop
a PWA
from
scratch
https://codelabs.developers.google.com/codelabs/workbox-indexeddb/

Or build a
Progressive
Web AMP
site
https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/

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/

And video tutorials in the Google’s
Chrome Developers YouTube Channel
https://www.youtube.com/playlist?list=PLNYkxOF6rcIB2xHBZ7opgc2Mv009X87Hh

You can also use the “ready to
customize and use” PWA Builder files
https://www.pwabuilder.com/publish

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

You can also enable PWA features to
your Wordpress sites with Plugins
https://superpwa.com/

Which is the one
I’ve used with
“Why my Web
Traffic Dropped”
https://www.whymywebtrafficdropped.com/

Magento
now also
supports
AMP with
its PWA
Studio
https://magento.com/products/magento-commerce/pwa

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

You can verify them with the
Lighthouse PWA validation in Chrome
https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool

Like this

You can also
use Chrome
DevTools
Application
panel to
verify service
workers
https://developers.google.com/web/fundamentals/codelabs/debugging-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 
https://www.pwabuilder.com/

Which also
allows to
revise and
edit your app
manifest and 
service
worker
https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool

But, do
PWAs
help
SEO?

I knew that
question
was
coming…

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

However, PWA
usage won’t help
SEO as it’s not a
ranking factor
though…
https://www.seroundtable.com/google-pwas-seo-24956.html

On the other
hand, PWA
shouldn’t hurt
SEO, 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

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

While
configuring
your Google
Analytics
tracking to
effectively
measure its
usage
https://builtvisible.com/google-analytics-for-pwas-tracking-offline-behaviour-and-more/

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

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

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.”

You want the pizza delivered ready
to be eaten, not cooked at home!

Unless the chef
is Jon Snow!

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

Which can
cause
content
indexing
and
rendering
issues
https://search.google.com/test/mobile-friendly

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/

“Rendering is expensive and cannot  
be done immediately”
https://www.deepcrawl.com/blog/webinars/making-javascript-work-for-search-martin-splitt/

Let’s better avoid Client Side Rendering 
https://www.deepcrawl.com/blog/webinars/making-javascript-work-for-search-martin-splitt/

Server side
rendering is also
supported by
Magento too, but
is not the default
https://twitter.com/i/web/status/1102906582961213441

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

To identify,
assess and
close  
the existing
gaps

Check out
Google's
examples of
Indexable PWAs
using server,
client side and
hybrid rendered
sites
https://github.com/google/indexable-pwa-samples

https://www.youtube.com/watch?v=LXF8bM4g-J4
Google’s
JavaScript
SEO Series
w/ Martin
Splitt

https://developers.google.com/search/docs/guides/fix-search-javascript
As well as the
JavaScript
search issues
& fixes
documentation
by Google

https://twitter.com/firt
And follow
Maximiliano
Firtman to
keep
updated on
PWA
evolution

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

Let’s make the Web progressive!

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, Hufﬁngton Post
* European Search Personality of the Year in 2018
https://www.aleydasolis.com/

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

PWA SEO: Optimizing for the Future of the Web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à PWA SEO: Optimizing for the Future of the Web

Similaire à PWA SEO: Optimizing for the Future of the Web (20)

Plus de Aleyda Solís

Plus de Aleyda Solís (20)

Dernier

Dernier (20)

PWA SEO: Optimizing for the Future of the Web