This presentation explores how On, a global sports brand, tackles the challenges of crawling, rendering, and indexing JavaScript-heavy websites. It highlights the importance of strategic URL management, the pitfalls of JavaScript redirects, and introduces solutions like Server-Side Rendering (SSR) and Dynamic Rendering to improve SEO performance. Key benefits and drawbacks of dynamic rendering are discussed, alongside a practical demonstration of Chrome Dev Tools for testing. Ultimately, it provides actionable insights for maintaining visibility and SEO success in the JavaScript-driven web environment.

1. On @ SMX
1
On @ SMX 2024
Ich sehe was, was du (Bot) nicht siehst!

2. On @ SMX
2
Ignite the human spirit through movement

3. On @ SMX
3

4. On @ SMX
4

5. On @ SMX
5
Bild von Eaters Collective

6. On @ SMX
6
🤖
Was der Bot nicht sieht, existiert nicht!

7. On @ SMX
7
Quelle: Google Search Central

8. On @ SMX
8
Agenda
Warm-up Crawling
Run Rendering
Cool Down Index
Finish Q&A

9. On @ SMX
9
This matters to you if…
Quelle: Stackoverflow Trends

10. On @ SMX
10
This matters to you if…

11. On @ SMX
11
This matters because…
+ 67% Google Traffic YoY
+ 98% Bing Traffic YoY
Quelle: Organic Traffic Google Analytics 2022 - 2023
Relaunch

12. On @ SMX
12
Warm-up Crawling

13. On @ SMX
13
🤖
URLs

14. On @ SMX
14
🤖
URLs
sitemap.xml

15. On @ SMX
15
🤖
URLs

16. On @ SMX
16
URLs sind wichtig!
example.com/foo
≠
example.com/Foo
≠
example.com/foo/
≠
example.com/foo?action=browse&queryId=sehr_gute-IdEe

17. On @ SMX
17

18. On @ SMX
18
URLs:
example.com/foo-1
example.com/foo-2
example.com/foo-n

19. On @ SMX
19

20. On @ SMX
20

21. On @ SMX
21
Response header
200, 301, 302, 404, 410, 503
500

22. On @ SMX
22
Tool im Chrome Web Store

23. On @ SMX
23
Run Rendering

24. On @ SMX
24
● Fakt 1: Das Internet basiert auf JS
● Fakt 2: Nicht jeder Crawler kommt mit JS klar

25. On @ SMX
25
● Fakt 3: Keine Suchmaschine sieht die Seite exakt so wie dein Browser – das gleiche gilt für deine Nutzer!

26. On @ SMX
26
● Fakt 4: JS redirects sind aus der Hölle

27. On @ SMX
27
Offene Frage:
Und wie lösen wir JS für Bots?

28. On @ SMX
28
Mögliche Lösungen:
● Server Side Rendering (SSR)
Mit SSR wird HTML auf dem Server gerendert. Dieses “fertige” HTML wird zurückgespielt.
● Static Rendering
HTML Response wird im Voraus generiert.
● Rehydration
It’s complicated…

29. On @ SMX
29
Offene Frage:
Und wie lösen wir JS für Bots?
SSR?

30. On @ SMX
30
Unsere aktuelle Lösung:
● Dynamic Rendering
Bots werden auf CDN Ebene erkannt und
durchlaufen einen eigenen Prozess.
Weitere Dynamic Rendering Lösungen:
● Botify Speedworker
● OSTR.IO
● Headless-Render-API

31. On @ SMX
31

32. On @ SMX
32

33. On @ SMX
33
Rendering ist nicht nur ein SEO Thema!!!

34. On @ SMX
34

35. On @ SMX
35
Vorteile Dynamic Rendering:
● Rendering
Funktioniert
● Crawl speed
URLs in ca 0.2 seconds
● Weniger Last auf dem Server
Crawler bewegen sich anders als Menschen.
● Stability
Auch wenn das Frontend crasht, der CDN & und
der prerendered Cache funktioniert zumindest
kurzfristig weiterhin.

36. On @ SMX
36
Nachteile Dynamic Rendering:
● Kosten
Je nach Nutzung
● Live vs Cached Content
Je nach Frequenz des Rendering
● Zwei Welten
Mit zunehmender Dauer, entwickeln sich zwei
Ökosysteme. Entwicklung “für Bots” und nicht für
Menschen.
💩
💩

37. On @ SMX
37
Google empfiehlt Dynamic Rendering nicht als langfristige Lösung!
💩!
💩

38. On @ SMX
38
Chrome Dev Tools:
● Images
● Buttons
● Links
● Text
● Video
● …

39. On @ SMX
39

40. On @ SMX
40

41. On @ SMX
41

42. On @ SMX
42

43. On @ SMX
43

44. On @ SMX
44
Chrome Dev Tools:
● User Agent check via
„Network conditions“
● Achtung! Nur Unterschiede
im Content, nicht im
Rendering

45. On @ SMX
45
Cool Down Index

46. On @ SMX
46

47. On @ SMX
47
Search Query operator:

48. On @ SMX
48

49. On @ SMX
49
Quelle: Reddit

50. On @ SMX
50
Quelle: Google Search Console

51. On @ SMX
51
HTTP Status
✅
Content in HTML
✅
Content in Index
✅

52. On @ SMX
52
HTTP Status
✅
Content in HTML
✅
Content in Index
✅

53. On @ SMX
53
Finish
Q & A

54. On @ SMX
54
Links for Tools:
Crawler simulation
Rich Results Test
+ Goolge Search Console u.Bing Webmaster Tools
Browser extentions
Redirect Path
Diva-e (allround SEO plugin comparing HTML & HTML+JS)
Dynamic Rendering SaaS:
Prerender.io
Botify Speedworker
OSTR.IO
Headless-Render-API
Search operators
Übersicht aller Search Operator
Kontext und Einschränkungen zu Search Operators