JavaScript Tips & Tricks 2018 - SMX East

#SMX #XXA @BartoszGoralewicz
With Bartosz Goralewicz
JavaScript
SEOTips&Tricks

Best
Small SEO Agency
Best
SEO Campaign

History of
JavaScript

The last time we checked,
almost 70% of the websites
we know about use JavaScript
in some form or another.
2009
https://webmasters.googleblog.com/2009/10/proposal-for-making-ajax-crawlable.html

We are pretty good
in executing
JavaScript.
Matt
Cutts
2014
ele.ph/js2014

CSS&JS
Your
Block
Don’t

May 2014
„In 1998 when our servers were running
inSusanWojcicki’sgarage,wedidn'treally
have to worry about JavaScript or CSS.
They weren’t used much, or, JavaScript
was Used to make page elements...
A lot has changed since then...”
blink!

„We decided to try to understand pages
by executing JavaScript.
HTML
PHP
CSS
MySQL
May 2014
It’s hard to do that at the scale of the
current web, but we decided that it’s worth it.
We have been gradually improving
how we do this for some time...”

May 2014
„... In the past few months, our indexing
system has been rendering a substantial
number of web pages more like an average
user’s browser with JavaScript turned on."

ele.ph/angularU
Also…Regardless of what your developers say,
Angular 2 always has to be server rendered…
according to the Angular JS 2 community.

ele.ph/angularU
If you search for any competitive keyword terms,
it’s always going to be server rendered sites.
And the reason is because although Google does
index client-side rendered HTML
it’s not perfect yet and other search
engines don’t do it as well.
So if you care about SEO, you still
need to have server-rendered content.
Jeff Whelpley “Angular 2 Server Rendering”
Angular U conference, June 22-25, 2015,

12 October 2015 - Eric Wu’s presentation about JavaScript @ Pubcon

2015
THE FIRST
PIONEER
ele.ph/ajax
Eric Wu, the first SEO to notice JS
as an SEO challenge.

14 October 2015
Deprecating
AJAX crawling
Scheme
ele.ph/ajax

… but I think Eric was
too early to the game.
The interest around the JavaScript SEO topic almost disappeared

Let’s call this time:
THE DARK AGES

May 8th 2017
OUR JS SEO
EXPERIMENT
is presented
for the 1st time
v.2
GSC
fetch
URL
indexed ?
Content
indexed ?
Test
URL

Googleacknowledged the problem quickly
and replied within a few days

May 12th 2017
Google’s
JS group

2017
JavaScript SEO
Golden Age

Fast forward
to 2018

JavaScript
Hype

May 2018 Google IO
Deliver search-friendly
JavaScript-powered
websites (Google I/O ‚18)
Google allows everyone
to peak behind the curtain
and explains the 2 waves
of indexing.

Where
are we
now with
JS SEO?

Almost all large websites
deal pretty well with
JavaScript SEO!
IT IS
2018

JavaScript
madness

Alibaba.com
Yet Alibaba & AliExpress were one
of the leaders regarding client side
rendered JavaScript websites.
Amazon’s
biggest threat

"I'm not a tech guy, I'm looking
at theTECHNOLOGY with the
eyes of my CUSTOMERS
Normal People's Eye.”
Aliababa’s founder Jack Ma
Alibaba.com
Amazon’s
biggest threat

Alibaba.com

Aliexpress.com

SEOs be like:
JS complicated?

Creative
towards
approach
JS SEO

Flipkart

Flipkart
With JavaScript
turned OFF

Myntra
One of the biggest
ecommerce stores in India
#72
most popular
website in India

And
Myntra.com
is ranking like
crazy*
*However only for short tail keywords

But it gets
much easier
once you start learning
from the best. E.g. Google!

April 2018 – the new version
of Google Flights

20,000+ visibility down to 48 (!)

Is it
indexed ?

Only
1 page
indexed in
Google

Let’s
analyze
this
complex
issue

Fun fact
works fine in Chrome 41

Fun fact
You can also see
the footer content
with JavaScript disabled

THE
PROBLEM

Angular
conference
2015

v.2
Not indexed

HTML
JS
+
=
=

This is exactly why
we have 2 waves of
JavaScript indexing

Source: Google I/O 2018

Isomorphic,
universal, dynamic, hybrid,
hydrating with JavaScript, etc.
Latest nomenclature and solution
to make JavaScript SEO friendly.

Client Side Rendering

Prerendering
Aka Dynamic
Rendering
an elephant (Elephate) in the room

prerendering
(the 8th step will shock you)
How
works in 7 steps

Prerendering

prerender
static
JÄVASCRIPT
HTML

BLACK
FRIDAY
SCENARIO

JÄVASCRIPT
JÄVASCRIPTJÄVASCRIPTJÄVASCRIPTJÄVASCRIPT
JÄVJÄVASCRIPTJÄVASCRIPTJÄVASCRIPTCRIPT
JÄVASCRIPTJÄVASCRIPTJÄVASCRIPTJÄVASCRIPT

What are
your options?

JÄVASCRIPT
On-the-fly rendering
Outdated
HTML

Serve stale/outdated HTML1.
Serve JavaScript and let
Google (try to) handle it
2.
Prerender on the fly3.

What if you HAVE TO do
prerendering

What if you HAVE TO do
prerendering
Plan your updates and deployments1.
Make sure that your prerendering setup is efficient2.
Remember that you need to crawl and optimize
both HTML and JavaScript versions of your website
3.

Most popular
Prerendering solutions
Chrome Headless/Phantom JS
Chrome Headless
Chrome Headless
Prerender.io
Puppeteer
Rendertron
Service/Free
Free
Free

Failed prerendering
case study

The Source Code vs. DOM
Source code DOM

Source Code
(before JavaScript):
Disqus -The #1 way
to build your audience
Rendered website:
(before JavaScript):
Disqus -The #1 way to build an
audience on your website

Enter prerendering

What went
WRONG?

(better)Alternatives
to prerendering

Server site
rendering
All of the rendering work
is done by your servers.
Google gets HTML.
SEO = OK

Alternatives
to prerendering

Server Side Rendering
You push JavaScript to bots and users
and they need to render JavaScript
to HTML to see the content

https://www.searchenginejournal.com/javascript-seo-
like-peanut-butter-and-jelly-thanks-to-isomorphic-
js/183337/
https://www.searchenginejournal.com/javascript-seo-like-peanut-
butter-and-jelly-thanks-to-isomorphic-js/183337/

HYBRID
rendering
Pre-rendered HTML is sent
to users and the search engine.
Then, the server adds
JavaScript on top of that.

Hybrid Rendering

Which brands use
HYBRID
rendering?

All the HTML files are built with data
BEFORE they are uploaded to a server
Static Sites
Source: https://www.youtube.com/watch?v=3jeznGJHenI
GatsbyJS
NextJS

Pros of
Source: https://www.youtube.com/watch?v=3jeznGJHenI
static sites
1.Very fast (even during traffic surge)
2. Increased security
3.Version control
4. Cheap to host

Limitations

What if we just keep
CSR JavaScript ?
*Client Side Rendered
*

Is
No, it is way worse.
JavaScript
Evil?It is complex ☺

JavaScript SEO best practices

JavaScript
taming the beast in
3 easy steps

Step 1.
V.2
Choosing the right framework

Step 2.
Rendering JavaScript
Prerendering
Server Side Rendering
Universal/Isomorphic
Static site generators (Gatsby.js)

Step 3.
Enjoy your traffic!

Extra Tip
Resist your urge to publish Client Side
Rendered JavaScript

ele.ph/smxeast
Download
my deck

THANK YOU!
SEE YOU AT THE NEXT #SMX
bartosz@goralewicz.com @bart_Goralewicz

Bizarre SEO s**t
caused by
the 2 waves

Partial
Indexing

#SMX #XXA @BartoszGoralewiczSource: Google I/O 2018

MobileGooglebot
ChromeScreenshot

Mobile Googlebot Chrome Screenshot

JavaScript Tips & Tricks 2018 - SMX East

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie JavaScript Tips & Tricks 2018 - SMX East

Ähnlich wie JavaScript Tips & Tricks 2018 - SMX East (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

JavaScript Tips & Tricks 2018 - SMX East