This document discusses JavaScript SEO and provides best practices. It begins by noting many websites are not ready to handle the responsibilities that come with powerful JavaScript frameworks. It then discusses issues like partial indexing for sites relying heavily on client-side JavaScript rendering. The document provides tips on troubleshooting JavaScript indexing issues using the Google Search Console. It also emphasizes the importance of server-side rendering and principles like progressive enhancement. Overall, the key message is that while challenges remain, there is hope for properly optimized client-side rendered JavaScript sites to rank well in Google with continued improvements to crawler and rendering capabilities.

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

9. 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! 

10. Hulu.com

11. Hulu.com

12. Hulu.com

13. Hulu.com

15. Ctrl+C

16. Ctrl+V

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

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

21. Netflix vs. Hulu – JavaScript SEO battlefield

23. The Source Code vs. DOM
Source code DOM

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

25. How about
frameworks’
websites?

29. noindex meta tag?

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

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

33. 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 /

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

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

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

40. Top Publishers?

45. How about websites that specialize in
prerendering?

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

49. Cool San Francisco
based startups?

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

53. 2. Find everything
BUT their homepage.

55. World’s biggest
eCommerce
stores?

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

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

70. Google Flights
ele.ph/fl

71. ele.ph/fl
Google Flights

72. Time for a very bad joke.

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

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

75. Why is this happening to them?

76. JavaScript is not a
geeky SEO option
anymore!

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

78. THE REAL COST
of
JavaScript

79. JavaScript vs. HTML

80. HTML
JS

81. JavaScript HTML

82. Enter JavaScript
1 100

83. ~200 KB to process
4 seconds
0.065 seconds

84. How about ~400KB?

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

86. USA TODAY Case Study

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

90. 11
seconds

91. “The European Union Experience”

93. 0.5
second

94. USA Today without JavaScript

95. 1.3
second

96. JavaScript “lives”
in your CPU

97. accuweather.com

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

99. 6sec

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

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

104. CPUs 1-on-1

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

109. Why is JavaScript so expensive?

110. JavaScript SEO

111. JavaScript Frameworks grow exponentially

112. artoszCoin
Barti
How to be cool in 2018

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

115. Notable frameworks

116. Rest of the pack

117. JS frameworks vs. SEO

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

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

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

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

123. JavaScript SEO best practices

124. A look behind the curtain

126. Source: Google I/O 2018

128. A quick guide to JavaScript rendering

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

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

131. 2
yet
Frameworks vs. Server Side Rendering

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

133. Google’s policy change?

134. Dynamic Rendering
(AKA prerendering)

136. Is prerendering a silver bullet?

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

138. How about “JavaScript hacks”?

140. Quick check

141. JavaScript
Enabled

142. Disabled
JavaScript

143. React Native

144. How about
their rankings?

145. .com

146. #1
for

147. #1 for

152. Troubleshooting JavaScript indexing

153. Google Search
Console – fetch
and render

154. Google Search
Console – fetch
and render

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

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

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

158. Diff Checker

159. Google mobile-friendly test

160. Google mobile-
friendly test

161. What is partial indexing?

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

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

164. Partial Indexing

167. Mobile Googlebot Chrome Screenshot

168. Mobile Googlebot Chrome Screenshot

169. Mobile Googlebot Chrome Screenshot

170. Mobile Googlebot Chrome Screenshot

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

172. Chrome 41 check
ele.ph/chrome41check

173. Chrome 41 - desktop Chrome 41 - mobile

175. Mobile Chrome 41 Desktop Chrome 41

176. Homework

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

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

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

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

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

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

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

187. Developers are confused af…

188. …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.

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

190. Node.js developers group
35
7

191. ReactJS group
6
21

192. Angular2+ group
4
9

193. JavaScript group
2
34

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

195. Let’s ask

196. Enabled

197. Disabled

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

201. JAVASCRIPT = THE FUTURE

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

203. Word of advice

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

206. rtosz@Goralewicz.com
@bart_Goralewicz

208. Enabled

209. Disabled

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

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

216. rtosz@Goralewicz.com
@bart_Goralewicz