Single Page Apps - Gerry White @ BrightonSEO

Single Page Apps
SPAs
Gerry White | Rise at Seven
SLIDESHARE.NET/DERGAL
@dergal

Single Page Apps
SPAs PWAs JavaScript and SEO

Gerry White
SEO Director Rise at Seven

Take It Offline
takeitoffline.co.uk
Check it out and come to the
next one!!

OK WTF isn’t a spa
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>A Heading</h1>
<p>Some test.</p>
<a href=“/NewURL/”> another page </a>
</body>
</html>
@dergal

A link goes to another page
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>A Heading</h1>
<p>Some test.</p>
<a href=“/anotherpage/”> another page
</a>
</body>
</html>
@dergal

Then … that loads up everything
<!DOCTYPE html>
<html>
<head>
<title>Page Title 2</title>
</head>
<body>
<h1>A new page </h1>
<p>New Content</p>
<a href=“/anotherpage/”> another page
</a>
</body>
</html>
@dergal

4k lines on
Vodafone for
instance
@dergal

4k lines on
Vodafone for
instance
Plus the 138 requests

Single Page Apps do this
better differently
@dergal

When you interact, just the
content you need is pulled
into the page.

Application
Shell Model.
developers.google.com/web/fundamentals/architecture/app-shell

examples - Gmail,
Google Maps,
YouTube, Netflix &
Tinder

examples - Gmail,
Google Maps,
YouTube, Netflix &
Tinder
(bad examples, as they
aren’t designed for
crawling)

Click to
menu and
the URL
changes

So why do so many SEO folks get a
cold sweat when someone says
“Single Page App”

So why do so many SEO folks get a
cold sweat when someone says
“Single Page App”
Especially if they say its in
React, Vue, Angular

“JavaScript is
Ruining the web”
Barry Adams at Search Leeds,
mentioned why JavaScript is one
of the evils in the digital world.
He had (several) good points.

Screw up SEO
and it costs £££

Developers are not
(often) SEO experts, they
can get it wrong …..

Just a single page!
URL doesn’t change, and it is a long single
page you scroll down.
It’s all about the Parallax
Example of a Pallax scrolling page -
https://codepen.io/StephenKoller/pen/LWBLNW

The URL doesn’t change
As you browse from page to page, the URL in the address bar doesn’t
update. Google needs unique URLs for landing pages.

Untracked
As you click around nothing goes into Analytics

Soft 404s
As apps are handled client side, broken links
will often return the wrong header

JavaScript Links
Google can only read one type of link, there is
a near infinite way of writing them in JavaScript

Heavy code on 1st load
That first load, takes ………… a while

No Opengraph
Facebook and Twitter can’t read JavaScript
rendered metadata

Spider Traps
It is easier than you’d think to create spider
traps in JS that only search engines & SEO
tools will spot

Duplicate Content
If URLs are dynamic, it is often easy to re-write
the URLs in different ways, and if the contents
in JS, it can be challenging for Google not to
de-dupe

Inconsistent URLs
Slashes, caPitalisaTion, dashes
aren’t consistent with html links,
canonical tags, xml sitemap

Tracking Parameters
Tracking parameters can cause a multitude of issues by either
breaking, or causing more spider traps

Fragments and Hashbangs
Google has deprecated the !# but so many developers will find
documentation on it. This is where URLs use # and !

No XML Sitemap
No XML sitemap, which in a JavaScript App is
more important

So we know the
problems …
What are the solutions

Just a single page!
We can use JavaScript on the links to change the URL –
& Google tells us the answer!
https://developers.google.com/search/docs/advanced/javascript/javascri
pt-seo-basics#use-history-api

Tracking
Spas
Tracking interactions on a page is ‘easy’ for a developer (assuming you are using Google
Analytics) there is just a set of decisions to be made by you and your analytics guy
- Is it a page view or an interaction
- Does the tracking need to match the display URL
(usually this is best)
GTM is slightly different – for GTM we recommend pushing events into the datalayer, it is
complicated the first time, but after this, far easier.

SPA URLs Quick Rant …..
• Consistent, human readable URLs

SPA URLs • Always consistent trailing slashes

SPA URLs • Always consistent CASE (I’d suggest
lower)

SPA URLs • Canonical Tags must match the URL

SPA URLs • Parameters in ‘indexable’ pages are
not great

SPA URLs
Quick Rant …..
• Consistent, human readable URLs
• Always consistent trailing slashes
• Always consistent CASE (I’d suggest
lower)
• Canonical Tags must match the URL
• Parameters in ‘indexable’ pages are
not great

Soft 404s
Soft 404s are one of the biggest
challenges of JavaScript apps – if the
processing is largely handled at a client
side level, but a 404 is a serverside
response.

Soft 404s
• Does it fall outside of a page pattern
• Does it fail to load any content in

Soft 404s
“…. In client-side rendered single-page apps, routing is
often implemented as client-side routing. In this case,
using meaningful HTTP status codes can be impossible or
impractical. To avoid soft 404 errors when using client-
side rendering and routing, use one of the following
strategies”
developers.google.com/search/docs/advanced/javascript/javascript-seo-basics#avoid-soft-404s

JavaScript Links
Google can only read one type of link, there is a near infinite way of
writing them in JavaScript

No Opengraph
Facebook and Twitter can’t read JS rendered metadata
This isn’t a quick win – you need to make sure that this metadata is pre-rendered.
When Facebook, Twitter, Slack and other tools fetch the page, it needs plain, HTML
metadata
<meta property="og:title" content="This needs to be in the HTML" >

Spider Traps
It is easier than you’d think to create spider traps in
JS that only search engines & SEO tools will spot.
TESTING is the only solution, faceted navigation and
inconsistent links is the curse here.
Test with and without JS in ScreamingFrog

Testing ongoing
I’d also recommend ContentKing, Oncrawl or
another tool that can render the page to regularly
check for issues! A number of cloud based crawlers do not
do JavaScript

Duplicate Content
If URLs are dynamic, it is often easy to re-
write the URLs in different ways, and if the
contents in JS, it can be challenging for
Google not to de-dupe incorrectly. We’ve
seen Google often get this wrong in
JavaScript rendered content

Tracking Parameters
Tracking parameters can cause a multitude of issues by either breaking,
or causing more spider traps

Internal links should always link to canonical versions and either to
absolute (starting with https) or relative to the root of the website so
starting with a / (like “/thisurl)
Just because utm_medium is on one page, it doesn’t need to be on the
next

Google has deprecated the #! in 2015! but so many developers will find
documentation on it…. Incredibly it still seems to work, today, but might
not tomorrow, so is it worth it!

IT MIGHT STILL WORK,
but then might fail tomorrow, so why not make it work correctly right now!!
This should be one of the things you don’t compromise on –

Fragments and SEO
Fragments do have a use in SEO – and that is for in page sections, not new /
different pages.

No XML Sitemap
No XML sitemap, which in a JavaScript App is more
important

1. XML Sitemaps do not need
to be completely
comprehensive

2. You can have multiple XML
Sitemaps

3. XML Sitemaps should be
reasonably up to date

Q. How often does it need to be
updated? You can manually create
multiple xml sitemaps

If you are manually creating them –
do not put in Frequency, Priority or
last updated.
But …. do put in images

XML sitemaps & internal links
& Canonical tags must match!
(see URLs rant!)

And that is it … for SPAs!
Follow me @dergal

Thankyou!
Gerry White
Tweet me @dergal
RiseatSeven.com

JS Frameworks
React, Angular, Vue,
it hardly matters what you use, All are largely
equal in terms of SEO.
Personally I am team React

Should I pre-render
It Depends – it is easier on
smaller sites, but more
necessary on larger sites, so
normally yes.

Should I pre-render
“Dynamic rendering is not cloaking”
https://developers.google.com/search/docs/advanced/javascript/dynamic-
rendering

A PWA
SEO and digital dev’s love a sexy TLA and when you’ve got
a SPA you can turn it into a PWA – a progressive web app.
A bit of extra JavaScript and a manifest file means you can
install your SPA, make it work offline and feel like a native
app. Want to see one ?

Service Workers
A service worker is a script that your browser runs in the
background, separate from a web page, opening the door
to features that don't need a web page or user interaction.
Being able to be installed on your phone (or computer) and
used offline means it is more reliable and quicker to find.

The Manifest
tells the browser about your
Progressive Web App and how it
should behave when installed on the
user's desktop or mobile device
web.dev/add-manifest/

Some additional thoughts
Single Page Apps, Progressive Web Apps are the future,
they are often done badly because the SEO Strategy is
missing. What happens when a page is removed? how
does google find all the pages? What are the key landing
pages?
Want to know more – ping me @dergal

Thankyou!
Gerry White
@dergal
RiseatSeven.com

Single Page Apps - Gerry White @ BrightonSEO

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

Similaire à Single Page Apps - Gerry White @ BrightonSEO

Similaire à Single Page Apps - Gerry White @ BrightonSEO (20)

Plus de Gerry White

Plus de Gerry White (8)

Dernier

Dernier (20)

Single Page Apps - Gerry White @ BrightonSEO