1.
JavaScript SEO: Looking Past the Hype
When the Dust Finally Settles.

2.
problems and solutions
case studies
best practices
JavaScript SEO

3.
With the great power of JavaScript
frameworks, comes great responsibility.

4.
It seems that most
webmasters aren’t
ready to handle it
yet.

5.
97.6%* of JavaScript powered websites have
no clue about JavaScript SEO
*not based on any calculations.

6.
Let’s go back in time to 2016
The giant panda is no longer
endangered
North Korea says it tested a
nuclear warhead
Britain votes to leave
the European Union
BREXIT

7.
Let’s go back in time to 2016
Donald Trump winspanda is no longer
ndangered
Hulu is losing 56% of their
visibility

8.
Statement
I am sick and tired of Hulu as an example but it’s hard
to find another website this bad. If you work @ Hulu,
please contact me, I’ll help you guys out for free! 

9.
Hulu.com

10.
Hulu.com

11.
Hulu.com

12.
Hulu.com

13.
Ctrl+C

14.
Ctrl+V

15.
Google mobile-friendly test
g.co/MobileFriendly

16.
Google mobile-friendly test
ele.ph/hulu-test

17.
Netflix vs. Hulu – JavaScript SEO battlefield

18.
The Source Code vs. DOM
Source code DOM

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

20.
How about
frameworks’
websites?

21.
noindex meta tag?

22.
https://angular.io/guide/language-service
https://angular.io/guide/security
https://angular.io/guide/architecture
https://angular.io/api/animations/group
https://angular.io/guide/quickstart

23.
https://angular.io/guide/language-service
https://angular.io/guide/security
https://angular.io/guide/architecture
https://angular.io/api/animations/group
https://angular.io/guide/quickstart
https://angular.io
https://angular.io/events
https://angular.io/api
https://angular.io/resources
https://angular.io/about?group=Angular

24.
https://angular.io/guide/language-service
https://angular.io/guide/security
https://angular.io/guide/architecture
https://angular.io/api/animations/group
https://angular.io/guide/quickstart
https://angular.io
https://angular.io/events
https://angular.io/api
https://angular.io/resources
https://angular.io/about?group=Angular
url / / url /

25.
UPSIDE DOWN
The only thing [those] pages (…)
have in common is the number of
path segments in the url.
Igor Minar

26.
http://yourdomain.com/category/shoes/
url / / url /
How much would that cost you?
http://yourdomain.com/category/

27.
View source:
<title>Meteor</title>
Rendered HTML:
<title>Build Apps with JavaScript | Meteor</title>

28.
Top Publishers?

29.
How about websites that specialize in
prerendering?

30.
Prerender.io – is partial indexing in Google possible?

31.
Cool San Francisco
based startups?

32.
1. Go to delivery.com & copy any content
from their homepage

33.
2. Find everything
BUT their homepage.

34.
World’s biggest
eCommerce
stores?

35.
Indexing JavaScript
seems to be the
problem of every
possible niche…

36.
Solutions How is Google
handling Client-
side JavaScript?

37.
Google Flights
ele.ph/fl

38.
ele.ph/fl
Google Flights

39.
Time for a very bad joke.

40.
You have to enable
JavaScript to
download flash
A JavaScript joke.

41.
(this is how I found Adobe’s page)
Even more
examples?
Search for:
"please enable
javascript in your
browser”

42.
Why is this happening to them?

43.
JavaScript is not a
geeky SEO option
anymore!

44.
S**t you have to know about JavaScript SEO

45.
THE REAL COST
of
JavaScript

46.
JavaScript vs. HTML

47.
HTML
JS

48.
JavaScript HTML

49.
Enter JavaScript
1 100

50.
~200 KB to process
4 seconds
0.065 seconds

51.
How about ~400KB?

52.
Indexing of modern JavaScript
websites is a challenge.
John Mueller

53.
USA TODAY Case Study

54.
Go to Chrome Dev Tools  Performance
CMD + OPT + I
CTRL + ALT + I

55.
11
seconds

56.
“The European Union Experience”

57.
0.5
second

58.
USA Today without JavaScript

59.
1.3
second

60.
JavaScript “lives”
in your CPU

61.
accuweather.com

62.
SECONDS TO FIRST
MEANINGFUL PAINT
(HIGH END CPU)

63.
6sec

64.
SECONDS TO FIRST
MEANINGFUL PAINT (Moto
G4’s CPU)

65.
13 SECOND DIFFERENCE
BETWEEN A HIGH END CPU
AND A SLOW CPU (!)

66.
CPUs 1-on-1

67.
Source: https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

68.
Why is JavaScript so expensive?

69.
JavaScript SEO

70.
JavaScript Frameworks grow exponentially

71.
artoszCoin
Barti
How to be cool in 2018

72.
The Big Three
Source: https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/

73.
Notable frameworks

74.
Rest of the pack

75.
JS frameworks vs. SEO

76.
JavaScript
dozens of different frameworks
their different configurations
transpiling
inline vs. external

77.
GSC
fetch
URL
Indexed?
Content
Indexed?
Test
URL
External Ajax callInline

78.
GSC
fetch
URL
Indexed?
Content
Indexed?
Test
URL
Inline External

79.
GSC
fetch
URL
Indexed?
Content
Indexed?
Test
URL
Inline External

80.
JavaScript SEO best practices

81.
A look behind the curtain

82.
Source: Google I/O 2018

83.
A quick guide to JavaScript rendering

84.
Client Side rendering
Source: Google I/O 2018

85.
Server-side rendering
Source: Google I/O 2018

86.
2
yet
Frameworks vs. Server Side Rendering

87.
Hybrid Rendering*
*Google’s Long-Term
recommendation
Source: Google I/O 2018

88.
Google’s policy change?

89.
Dynamic Rendering
(AKA prerendering)

90.
Is prerendering a silver bullet?

91.
Prerendering/Dynamic Rendering issues
1. Computing power – A LOT of servers
2. Prone to issues (often load related)
3. Downtime = ranking loss
4. More complex and difficult from an SEO perspective (crawls, 2 sets
of code, etc.)
5. Requires a lot of SEO knowledge
6. Requires a great dev team to make it run smoothly

92.
How about “JavaScript hacks”?

93.
Quick check

94.
JavaScript
Enabled

95.
Disabled
JavaScript

96.
React Native

97.
How about
their rankings?

98.
.com

99.
#1
for

100.
#1 for

101.
Troubleshooting JavaScript indexing

102.
Google Search
Console – fetch
and render

103.
Google Search
Console – fetch
and render

104.
Google mobile-friendly test
g.co/MobileFriendly

105.
Google mobile-friendly test
ele.ph/hulu-test

106.
Google mobile-friendly test
ele.ph/hulu-test
COPY THIS CODE

107.
Diff Checker

108.
Google mobile-friendly test

109.
Google mobile-
friendly test

110.
What is partial indexing?

111.
And this effectively means that if
your site is using a heavy amount of
client-side JavaScript for rendering,
you could be tripped up at times
when your content is being indexed
due to the nature of this two phase
indexing process.
…it’s possible some details might be
missed.
Tom Greenaway

112.
2 waves
WAVE 1 WAVE 2
• JS dependent
content only
• HTML content
• Canonicals
• Meta data
• HTTP Codes

113.
Partial Indexing

114.
Mobile Googlebot Chrome Screenshot

115.
Mobile Googlebot Chrome Screenshot

116.
Mobile Googlebot Chrome Screenshot

117.
Mobile Googlebot Chrome Screenshot

118.
First Mobile First SEO problems*
*spoiler alert – they are
often JavaScript related

119.
Chrome 41 check
ele.ph/chrome41check

120.
Chrome 41 - desktop Chrome 41 - mobile

121.
Mobile Chrome 41 Desktop Chrome 41

122.
Homework

123.
1. The Source Code vs. DOM
Source code DOM

124.
GSC
fetch
URL
Indexed?
Content
Indexed?
Test
URL
InlineInlineV2 Inline
2. Crawling - server log

125.
Make sure your content is indexed
ctrl+c
ctrl+v
hulu.com/casual

126.
Under the right URL
https://angular.io/features

127.
To Do:
1. Diff Check is your new best friend
2. Experiment and make sure to monitor
your server logs
3. Compare your setup with Chrome 41
4. Make sure that your content is indexed
in Google
5. Under the right URL

128.
Excited about JavaScript SEO already?
ele.ph/learn-js-seo

129.
Can’t you just ask
your dev team to
sort this out?

130.
Developers are confused af…

131.
…but proved to be the most
difficult question you can
ask your developer.
…it contained only 1
question…
…We’ve created what will be
remembered as the world’s
most confusing JavaScript
survey ever.

132.
Can client-side rendered JavaScript
websites rank high in Google?

133.
Node.js developers group
35
7

134.
ReactJS group
6
21

135.
Angular2+ group
4
9

136.
JavaScript group
2
34

137.
Is there hope for Client-side rendered
JavaScript?

138.
Let’s ask

139.
Enabled

140.
Disabled

141.
Is there hope for Client-side rendered
JavaScript?

142.
JAVASCRIPT = THE FUTURE

143.
Right now Google isn’t perfect with
client rendered Single Page Apps.
This means they will crawl and index
all JavaScript pages even better and faster.
According to Ilya Grigorik, this should happen
sometime in 2018 (most likely).
Google is working on a new WRS engine –
most likely headless Chrome 59.

144.
Word of advice

145.
ele.ph/learn-js-seo
Getting started with JavaScript SEO

146.
rtosz@Goralewicz.com
@bart_Goralewicz

147.
Enabled

148.
Disabled

149.
Mobile-Friendly Tool – word of caution -
timeouts

150.
It loads OK in Chrome 41
though...

151.
rtosz@Goralewicz.com
@bart_Goralewicz