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

2. #SMX #XXA @BartoszGoralewicz
Best
Small SEO Agency
Best
SEO Campaign

3. #SMX #XXA @BartoszGoralewicz
History of
JavaScript

4. #SMX #XXA @BartoszGoralewicz
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

5. #SMX #XXA @BartoszGoralewicz
We are pretty good
in executing
JavaScript.
Matt
Cutts
2014
ele.ph/js2014

6. #SMX #XXA @BartoszGoralewicz
CSS&JS
Your
Block
Don’t

7. #SMX #XXA @BartoszGoralewicz
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!

8. #SMX #XXA @BartoszGoralewicz
„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...”

9. #SMX #XXA @BartoszGoralewicz
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."

10. #SMX #XXA @BartoszGoralewicz
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.

11. #SMX #XXA @BartoszGoralewicz
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. #SMX #XXA @BartoszGoralewicz
12 October 2015 - Eric Wu’s presentation about JavaScript @ Pubcon

13. #SMX #XXA @BartoszGoralewicz
2015
THE FIRST
PIONEER
ele.ph/ajax
Eric Wu, the first SEO to notice JS
as an SEO challenge.

14. #SMX #XXA @BartoszGoralewicz
14 October 2015
Deprecating
AJAX crawling
Scheme
ele.ph/ajax

15. #SMX #XXA @BartoszGoralewicz
… but I think Eric was
too early to the game.
The interest around the JavaScript SEO topic almost disappeared

16. #SMX #XXA @BartoszGoralewicz
Let’s call this time:
THE DARK AGES

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

18. #SMX #XXA @BartoszGoralewicz
Googleacknowledged the problem quickly
and replied within a few days

19. #SMX #XXA @BartoszGoralewicz
May 12th 2017
Google’s
JS group

20. #SMX #XXA @BartoszGoralewicz
2017
JavaScript SEO
Golden Age

21. #SMX #XXA @BartoszGoralewicz
Fast forward
to 2018

22. #SMX #XXA @BartoszGoralewicz
JavaScript
Hype

23. #SMX #XXA @BartoszGoralewicz
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.

24. #SMX #XXA @BartoszGoralewicz
Where
are we
now with
JS SEO?

25. #SMX #XXA @BartoszGoralewicz
Almost all large websites
deal pretty well with
JavaScript SEO!
IT IS
2018

26. #SMX #XXA @BartoszGoralewicz
JavaScript
madness

27. #SMX #XXA @BartoszGoralewicz

28. #SMX #XXA @BartoszGoralewicz

29. #SMX #XXA @BartoszGoralewicz
Alibaba.com
Yet Alibaba & AliExpress were one
of the leaders regarding client side
rendered JavaScript websites.
Amazon’s
biggest threat

30. #SMX #XXA @BartoszGoralewicz
"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

31. #SMX #XXA @BartoszGoralewicz

32. #SMX #XXA @BartoszGoralewicz
Alibaba.com

33. #SMX #XXA @BartoszGoralewicz
Aliexpress.com

34. #SMX #XXA @BartoszGoralewicz
SEOs be like:
JS complicated?

35. #SMX #XXA @BartoszGoralewicz
Creative
towards
approach
JS SEO

36. #SMX #XXA @BartoszGoralewicz
Flipkart

37. #SMX #XXA @BartoszGoralewicz
Flipkart
With JavaScript
turned OFF

38. #SMX #XXA @BartoszGoralewicz
Myntra
One of the biggest
ecommerce stores in India
#72
most popular
website in India

39. #SMX #XXA @BartoszGoralewicz
Myntra
One of the biggest
ecommerce stores in India
#72
most popular
website in India

40. #SMX #XXA @BartoszGoralewicz
And
Myntra.com
is ranking like
crazy*
*However only for short tail keywords

41. #SMX #XXA @BartoszGoralewicz
But it gets
much easier
once you start learning
from the best. E.g. Google!

42. #SMX #XXA @BartoszGoralewicz

43. #SMX #XXA @BartoszGoralewicz

44. #SMX #XXA @BartoszGoralewicz
April 2018 – the new version
of Google Flights

45. #SMX #XXA @BartoszGoralewicz
20,000+ visibility down to 48 (!)

46. #SMX #XXA @BartoszGoralewicz
Is it
indexed ?

47. #SMX #XXA @BartoszGoralewicz
Only
1 page
indexed in
Google

48. #SMX #XXA @BartoszGoralewicz
Let’s
analyze
this
complex
issue

49. #SMX #XXA @BartoszGoralewicz
Let’s
analyze
this
complex
issue

50. #SMX #XXA @BartoszGoralewicz

51. #SMX #XXA @BartoszGoralewicz

52. #SMX #XXA @BartoszGoralewicz
Fun fact
works fine in Chrome 41

53. #SMX #XXA @BartoszGoralewicz
Fun fact
You can also see
the footer content
with JavaScript disabled

54. #SMX #XXA @BartoszGoralewicz
THE
PROBLEM

55. #SMX #XXA @BartoszGoralewicz
Angular
conference
2015

56. #SMX #XXA @BartoszGoralewicz
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,

57. #SMX #XXA @BartoszGoralewicz
v.2
Not indexed

58. #SMX #XXA @BartoszGoralewicz
HTML
JS
+
=
=

59. #SMX #XXA @BartoszGoralewicz
This is exactly why
we have 2 waves of
JavaScript indexing

60. #SMX #XXA @BartoszGoralewicz

61. #SMX #XXA @BartoszGoralewicz
Source: Google I/O 2018

62. #SMX #XXA @BartoszGoralewicz

63. #SMX #XXA @BartoszGoralewicz
Isomorphic,
universal, dynamic, hybrid,
hydrating with JavaScript, etc.
Latest nomenclature and solution
to make JavaScript SEO friendly.

64. #SMX #XXA @BartoszGoralewicz
Client Side Rendering

65. #SMX #XXA @BartoszGoralewicz
Prerendering
Aka Dynamic
Rendering
an elephant (Elephate) in the room

66. #SMX #XXA @BartoszGoralewicz
prerendering
(the 8th step will shock you)
How
works in 7 steps

67. #SMX #XXA @BartoszGoralewicz
Prerendering

68. #SMX #XXA @BartoszGoralewicz

69. #SMX #XXA @BartoszGoralewicz
prerender
static
JÄVASCRIPT
HTML

70. #SMX #XXA @BartoszGoralewicz
BLACK
FRIDAY
SCENARIO

71. #SMX #XXA @BartoszGoralewicz
JÄVASCRIPT
JÄVASCRIPTJÄVASCRIPTJÄVASCRIPTJÄVASCRIPT
JÄVJÄVASCRIPTJÄVASCRIPTJÄVASCRIPTCRIPT
JÄVASCRIPTJÄVASCRIPTJÄVASCRIPTJÄVASCRIPT

72. #SMX #XXA @BartoszGoralewicz

73. #SMX #XXA @BartoszGoralewicz

74. #SMX #XXA @BartoszGoralewicz
What are
your options?

75. #SMX #XXA @BartoszGoralewicz
JÄVASCRIPT
On-the-fly rendering
Outdated
HTML

76. #SMX #XXA @BartoszGoralewicz
Serve stale/outdated HTML1.
Serve JavaScript and let
Google (try to) handle it
2.
Prerender on the fly3.

77. #SMX #XXA @BartoszGoralewicz
What if you HAVE TO do
prerendering

78. #SMX #XXA @BartoszGoralewicz
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.

79. #SMX #XXA @BartoszGoralewicz
Most popular
Prerendering solutions
Chrome Headless/Phantom JS
Chrome Headless
Chrome Headless
Prerender.io
Puppeteer
Rendertron
Service/Free
Free
Free

80. #SMX #XXA @BartoszGoralewicz
Failed prerendering
case study

81. #SMX #XXA @BartoszGoralewicz
The Source Code vs. DOM
Source code DOM

82. #SMX #XXA @BartoszGoralewicz
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

83. #SMX #XXA @BartoszGoralewicz
Enter prerendering

84. #SMX #XXA @BartoszGoralewicz
What went
WRONG?

85. #SMX #XXA @BartoszGoralewicz
<html>
</head>
<body>
</body>
</html>
<head>

86. #SMX #XXA @BartoszGoralewicz
(better)Alternatives
to prerendering

87. #SMX #XXA @BartoszGoralewicz
Server site
rendering
All of the rendering work
is done by your servers.
Google gets HTML.
SEO = OK

88. #SMX #XXA @BartoszGoralewicz
Alternatives
to prerendering

89. #SMX #XXA @BartoszGoralewicz
Server Side Rendering
You push JavaScript to bots and users
and they need to render JavaScript
to HTML to see the content

90. #SMX #XXA @BartoszGoralewicz
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/

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

92. #SMX #XXA @BartoszGoralewicz
Hybrid Rendering

93. #SMX #XXA @BartoszGoralewicz
Which brands use
HYBRID
rendering?

94. #SMX #XXA @BartoszGoralewicz
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

95. #SMX #XXA @BartoszGoralewicz
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

96. #SMX #XXA @BartoszGoralewicz
Limitations

97. #SMX #XXA @BartoszGoralewicz

98. #SMX #XXA @BartoszGoralewicz
What if we just keep
CSR JavaScript ?
*Client Side Rendered
*

99. #SMX #XXA @BartoszGoralewicz

100. #SMX #XXA @BartoszGoralewicz
Is
No, it is way worse.
JavaScript
Evil?It is complex ☺

101. #SMX #XXA @BartoszGoralewicz
JavaScript SEO best practices

102. #SMX #XXA @BartoszGoralewicz
JavaScript
taming the beast in
3 easy steps

103. #SMX #XXA @BartoszGoralewicz
Step 1.
V.2
Choosing the right framework

104. #SMX #XXA @BartoszGoralewicz
Step 2.
Rendering JavaScript
Prerendering
Server Side Rendering
Universal/Isomorphic
Static site generators (Gatsby.js)

105. #SMX #XXA @BartoszGoralewicz
Step 3.
Enjoy your traffic!

106. #SMX #XXA @BartoszGoralewicz
Extra Tip
Resist your urge to publish Client Side
Rendered JavaScript

107. #SMX #XXA @BartoszGoralewicz
ele.ph/smxeast
Download
my deck

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

109. #SMX #XXA @BartoszGoralewicz
Bizarre SEO s**t
caused by
the 2 waves

110. #SMX #XXA @BartoszGoralewicz
Partial
Indexing

111. #SMX #XXA @BartoszGoralewicz

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

113. #SMX #XXA @BartoszGoralewicz

114. #SMX #XXA @BartoszGoralewicz
MobileGooglebot
ChromeScreenshot

115. #SMX #XXA @BartoszGoralewicz
Mobile Googlebot Chrome Screenshot

116. #SMX #XXA @BartoszGoralewicz
Mobile Googlebot Chrome Screenshot

117. #SMX #XXA @BartoszGoralewicz
Mobile Googlebot Chrome Screenshot