JavaScript SEO & prerendering best practices.

1. #SMX @Bart_Goralewicz
With Bartosz Goralewicz
Dynamic Rendering
Is this really an
SEO silver bullet?
Experiences from setting up
the world's biggest
prerendering engine.

2. #SMX @Bart_Goralewicz
JavaScript
madness

3. #SMX @Bart_Goralewicz
…however
JavaScript SEO
is still massively
misunderstood
in 2019

4. #SMX @Bart_Goralewicz

5. #SMX @Bart_Goralewicz

6. #SMX @Bart_Goralewicz

7. #SMX @Bart_Goralewicz
But it gets
much easieronce you start learning
from the best. E.g. Google!
#SMX @Bart_Goralewicz

8. #SMX @Bart_Goralewicz

9. #SMX @Bart_Goralewicz

10. #SMX @Bart_Goralewicz

11. #SMX @Bart_Goralewicz
Let’s see
if they practice
what they preach

12. #SMX @Bart_Goralewicz
April 2018 – the new version
of Google Flights
#SMX @BartGoralewicz#SMX @Bart_Goralewicz

13. #SMX @Bart_Goralewicz
20,000+ visibility down to 48 (!)

14. #SMX @Bart_Goralewicz
Is it
indexed ?

15. #SMX @Bart_Goralewicz
Only
1 page
indexed in
Google

16. #SMX @Bart_Goralewicz
THE
PROBLEM
#SMX @Bart_Goralewicz

17. #SMX @Bart_Goralewicz
Angular
Connect
conference
2015

18. #SMX @Bart_Goralewicz
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,

19. #SMX @Bart_Goralewicz
v.2
Not indexed

20. #SMX @Bart_Goralewicz
HTML
JS
#SMX @Bart_Goralewicz

21. #SMX @Bart_Goralewicz
HTML
JS
#SMX @Bart_Goralewicz

22. #SMX @Bart_Goralewicz
HTML
JS
#SMX @Bart_Goralewicz

23. #SMX @Bart_Goralewicz
This is exactly why
we have 2 waves of
JavaScript indexing

24. #SMX @Bart_Goralewicz

25. #SMX @Bart_Goralewicz
Source: Google I/O 2018
#SMX @Bart_Goralewicz

26. #SMX @Bart_Goralewicz
New links
to be crawled
Second wave
of indexing

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

28. #SMX @Bart_Goralewicz
Client-side Rendering
#SMX @Bart_Goralewicz

29. #SMX @Bart_Goralewicz
Prerendering
Aka Dynamic
Rendering
an elephant in the room

30. #SMX @Bart_Goralewicz

31. #SMX @Bart_Goralewicz
Google
is recommending
Dynamic Rendering
"Currently, it's difficult to process JavaScript (…)
in the meantime, we recommend dynamic rendering
as a workaround solution to this problem."

32. #SMX @Bart_Goralewicz
Google
is recommending
Dynamic Rendering
Dynamic Rendering
= WORKAROUND
#SMX @Bart_Goralewicz

33. #SMX @Bart_Goralewicz

34. #SMX @Bart_Goralewicz
prerendering
Key problems with
explained

35. #SMX @Bart_Goralewicz
Prerendering

36. #SMX @Bart_Goralewicz

37. #SMX @Bart_Goralewicz
queue
JavaScript
prerender
static
HTML

38. #SMX @Bart_Goralewicz
BLACK
FRIDAY
SCENARIO

39. #SMX @Bart_Goralewicz

40. #SMX @Bart_Goralewicz
New
product

41. #SMX @Bart_Goralewicz

42. #SMX @Bart_Goralewicz
What are
your options?

43. #SMX @Bart_Goralewicz
JÄVASCRIPT
On-the-fly rendering
Outdated
HTML

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

45. #SMX @Bart_Goralewicz
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.

46. #SMX @Bart_Goralewicz
Most popular
Prerendering solutions
Chrome Headless/Phantom JS
Chrome Headless
Chrome Headless
Prerender.io
Puppeteer
Rendertron

47. #SMX @Bart_Goralewicz
Most popular
Prerendering solutions
Prerender.io
Puppeteer
Rendertron
Service/Free
Free
Free

48. #SMX @Bart_Goralewicz
Failed prerendering
case study

49. #SMX @Bart_Goralewicz
The Source Code vs. DOM
Source code DOM
#SMX @Bart_Goralewicz

50. #SMX @Bart_Goralewicz
Source Code
(before JavaScript):
Disqus -The #1 way
to build your audience
Rendered website:
(after JavaScript):
Disqus -The #1 way to build an
audience on your website

51. #SMX @Bart_Goralewicz
Enter prerendering

52. #SMX @Bart_Goralewicz
What went
WRONG?

53. #SMX @Bart_Goralewicz
<html>
</head>
<body>
</body>
</html>
<head>

54. #SMX @Bart_Goralewicz
Why prerendering may not be
the best solution for your business?

55. #SMX @Bart_Goralewicz
It’s difficult to use
dynamic rendering
on websites using
geolocation

56. #SMX @Bart_Goralewicz
Not too dynamic (pun intended)
Creates two separate structures instead of one
Doesn’t improve UX.
Adds an extra layer of complexity
May work well BUT rarely does. Requires a very good SEO team maintaining it.
WORKAROUND!
Dynamic Rendering - summary

57. #SMX @Bart_Goralewicz
My personal beef
with dynamic rendering
It is only made for the sake of SEO.
It doesn’t improve anything for users…

58. #SMX @Bart_Goralewicz
… just like SEO ”containers” in some of the ecommerce stores.

59. #SMX @Bart_Goralewicz
(better)Alternatives
to prerendering

60. #SMX @Bart_Goralewicz
Server side
rendering
All of the rendering work
is done by your servers.
Google gets HTML.
SEO = OK

61. #SMX @Bart_Goralewicz
Alternatives
to prerendering

62. #SMX @Bart_Goralewicz
Server Side Rendering /
Hybrid Rendering
#SMX @Bart_Goralewicz

63. #SMX @Bart_Goralewicz
HYBRID
rendering
Prerendered HTML is sent to users
and the search engine.Then,
JavaScript runs on top of that.

64. #SMX @Bart_Goralewicz
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/

65. #SMX @Bart_Goralewicz
Which brands use
HYBRID
rendering?
#SMX @Bart_Goralewicz

66. #SMX @Bart_Goralewicz
Yes, Google
recommends it!
„If you have engineering resources though,
I would highly recommend looking into
server-side rendering or even better,
hybrid rendering, because that yields
user experience benefits, as well.”

67. #SMX @Bart_Goralewicz
Next, Nuxt and Angular Universal
are the next (amazing joke) trend!
35% of JS developers
want to learn Next.js

68. #SMX @Bart_Goralewicz
Twitter migrated to
isomorphic JavaScript
in 2012
https://www.oreilly.com/library/view/building-isomorphic-
javascript/9781491932926/ch01.html
– Initial page load decreased 80% (!)

69. #SMX @Bart_Goralewicz
All the HTML files are built with data
BEFORE they are uploaded to a server
Static Site Rendering
Source: https://www.youtube.com/watch?v=3jeznGJHenI
GatsbyJS
NextJS

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

71. #SMX @Bart_Goralewicz
Limitations

72. #SMX @Bart_Goralewicz

73. #SMX @Bart_Goralewicz
What if we just keep
CSR JavaScript ?
*Client Side Rendered
*

74. #SMX @Bart_Goralewicz#SMX @Bart_Goralewicz

75. #SMX @Bart_Goralewicz
Is
JavaScript
Evil?
#SMX @Bart_Goralewicz

76. #SMX @Bart_Goralewicz
Is
JavaScript
Evil?
#SMX @Bart_Goralewicz
No, it is way worse.

77. #SMX @Bart_Goralewicz
Is
JavaScript
Evil?
#SMX @Bart_Goralewicz
No, it is way worse. It is complex ☺

78. #SMX @Bart_Goralewicz
JavaScript SEO best practices

79. #SMX @Bart_Goralewicz
JavaScript
taming the beast in
3 easy steps
#SMX @BartGoralewicz

80. #SMX @Bart_Goralewicz
Step 1.
V.2
Choosing the right framework

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

82. #SMX @Bart_Goralewicz
Step 3.
Enjoy your traffic!

83. #SMX @Bart_Goralewicz
Get the Starter
Package for FREE
Contact maria@elephate.com
Give the password ”Freelephate”
Within 15 minutes from this lecture
Total value of the package: $1000
Maria Cieślak
Head of SEO

84. #SMX @Bart_Goralewicz
ele.ph/smxwest
Download
my deck

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