Websites, die komplett mit JavaScript realisiert werden, sind im SEO immer noch ein unerforschtes Gebiet. Laut Google kann der Googlebot Inhalte, die durch JavaScript ausgespielt werden, rendern und crawlen. Wieso diese Aussage gefährlich ist, und welche Fallstricke sich hinter JavaScript und SEO verstecken, werden in diesem Vortrag erläutert.

1. JavaScript SEO
SEOKomm 2017
1
Crawling, Indexierung und
Auditing von JavaScript-Websites

2. Über mich
Artur Kosch
Geschäftsführender Gesellschafter
‣ Über 8 Jahre Erfahrung im Online Marketing
und SEO
‣ Bekannt durch Publikationen, Fachartikel und
Vorträge auf Konferenzen zu Themen Online
Marketing und SEO
‣ Kernkompetenzen im technischen SEO,
strategischen Online Marketing und Kreation
von Content Marketing Strategien
2

3. Über mich
Bekannt aus:
3

4. Wie interagiert der
Crawler mit JavaScript?
1.
4

5. Wie wird JavaScript ausgeführt?
Ausführen von PHP und JavaScript-Rendering zwischen Browser und Server
1. Der Browser stellt eine GET-
Anfrage an den Server
2. Der Server führt das PHP-Script
aus (z.B. beim Einsatz eines CMS)
3. Der Server gibt den HTML-
Quellcode an den Browser zurück
4. Der Browser führt das JavaScript
aus
5

6. Headless Browser
Grundprinzipien eines Headless Browsers an Hand von Headless Chrome
‣ Ein Headless-Browser ist ein Browser
ohne visuelle Komponenten
‣ Der Headless-Browser stellt keine
Inhalte dar, um mit diesen wie ein
Webseitenbesucher zu interagieren
‣ Es werden Befehle ausgeführt, um
mit der Webseite zu interagieren
‣ Ein Headless-Browser beschreibt
relativ gut, wie der Googlebot mit
JavaScript einer Webseite
interagiert.
6

7. Automatisierung & Scrapping
Automatisieren und Scrappen mit Headless Chrome
‣ Node.js wird in der, für Chrome
entwickelten, JavaScript-Engine „V8“
ausgeführt
‣ Puppeteer ist eine Node.js Library
API mit der man Headless Chrome
steuern kann
‣ Mit dem Einsatz von Node.js und
Puppeteer kann JavaScript-Code
eingesetzt werden, um Webseiten
mit Headless Chrome zu scrapen
‣ Gerüchten zufolge soll der Headless
Chrome extra für den Google Bot
entwickelt worden sein
7
+
+

8. A Guide to
Automating &
Scraping the Web with
JavaScript
API Documentation für
Puppeteer
Codeburst.io
Github.com
Getting Started with
Headless Chrome
Developers.google.com

9. GoogleBot Rendering
Welche Technologien nutzt der GoogleBot um Webseiten zu rendern?
‣ Die Technik hinter dem Web
Rendering Service (WRS) ist Chrome
in der Version 41 (Chromium)
‣ Chrome 41.0.2272.118 ist die Version
aus dem Jahr 2015 und erfüllt etwa
60% der aktuellen Chrome-Version
‣ Soll laut Googles Aussagen im Jahr
2018 aktualisiert werden
‣ Damit ist der Chrome 41 neben dem
Abrufen und Rendern Tool der
Search Console das primäre
debuging und Testing-Tool
9

10. GoogleBot Rendering
Welche Technologien und Funktionen werden nicht unterstützt?
‣ Das aktuelle Transfer Protokoll HTTP/2 wird
nicht unterstützt. Lediglich HTTP/1 und FTP
‣ HTTP/2 kann allerdings abwärtskompatibel
konfiguriert werden
‣ Keine Unterstützung für das WebSocket-
Protokoll
‣ IndexedDB und WebSQL-Interfaces zur
Datenhaltung im Browser werden nicht
unterstützt
‣ Inhalte, die nach Zustimmung angezeigt
werden, werden nicht indexiert
‣ Inhalte des Local Storages sowie Session
Storages werden gelöscht und HTTP-
Cookies entfernt
10

11. Can I use Chrome Status
Caniuse.com Chromestatus.com

12. Googlebot vs. Google Search Console Bot
Abrufen und Rendern mit dem Googlebot und dem Google Search Console Bot
12

13. Ist damit serverseitiges
Rendern für SEO nicht
mehr notwendig?
13

14. Umgang der Suchmaschinen mit JavaScript
Wie crawlen und indexieren verschiedene Suchmaschinen JavaScript?
14
Are Search Engines Ready
for JavaScript Crawling &
Indexing?
Moz.com

15. Crawling und Indexierung JS-Frameworks
Wie crawlt und indexiert der Googlebot verschiedene JavaScript-Frameworks?
15
Can Google properly crawl
and index JavaScript
frameworks? JavaScript SEO
experiment
elephate.com

16. Zusammenfassung der Erkenntnisse
Folgende Erkenntnisse über die Interaktion von Crawlen mit JS können zusammengefasst werden
16
1. Headless Chrome für Testing
und Automatisierung einsetzen
2. Google verwendet zum rendern
Web Rendering Service (WRS)
3. Features und Technologien
vom Googlebot auf dem Stand
von Chrome 41
4. Chrome 41 sollte neben GSC
Fetch & Render Tool für Testing
verwenden
5. HTTP/2 Transfer Protokoll wird
nicht unterstützt
6. WebSocket-Protokoll,
IndexedDB und WebSQL-
Interfaces werden nicht
unterstützt
7. Google interagiert
unterschiedlich mit
verschiedenen JS-Frameworks
8. Bis auf Google, rendert kein
Crawler JavaScript

17. Auditing &
Best Practices
2.
17

18. Quellcode vor dem Rendern
Einblick in den Quellcode vor und nach dem Rendern von JavaScript
‣ Ein Blick auf den Quellcode zeigt
keine Inhalte, die durch JavaScript
erzeugt werden
‣ Rendern findet Clientseitig (im
Browser) statt, daher sind keine
Inhalte, die durch JS erzeugt werden
sichtbar
‣ Erst der gerenderte Code, zeigt alle
Inhalte an, die im Browser angezeigt
werden.
18
Post-
Dom
Pre-
Dom

19. Auditing vom gerenderten Quellcode
Gerenderten Quellcode einsehen und analysieren
1. In einen „leeren Bereich“ der
Webseite rechts-klicken und
„Untersuchen“ auswählen
2. Um den gesamten Inhalt zu
erhalten, den HTML-Tag im rechten
Bereich des Browsers auswählen
3. Mit einem Rechtsklick auf den
HTML-Tag auf „Copy“ und „Copy
OuterHTML“ navigieren um den
gesamten Inhalt zu kopieren
4. Der kopierte HTML-Code kann nun
in Textprogramm eingefügt
werden, um den Inhalt einzusehen
und zu analysieren
19

20. Auditing mit Screaming Frog
Der Einsatz des SEO Spider Screaming Frog zum rendern von JavaScript-Webseiten
1. Um JavaScript-Rendering zu
aktivieren folgend navigieren:
2. Configuration » Spider »
Rendering » JavaScript » OK
3. AJAX Timeout auf 5 Sekunden
stellen (Standart-Einstellung)
4. Bilderschirmgröße des Screenshots
nach dem Rendern kann beliebig
gewählt werden
5. Screaming Frog nutzt die
Rendering-Engine vom Chromium
Projekt „Blink„
20

22. Dynamische Inhalte
Load Event und User Event für die Verwendung von wichtigen Inhalten
22
Network
time
Server time Network
time
DOM Processing Page
Rendering
Clientside logic, API calls
DOM Manipulation
Budget
pro
Monat
Initial
Request
Budget
pro
Monat
Server
side
Budget
pro
Monat
Server
Code
finished
Budget
pro
Monat
First
byte
Budget
pro
Monat
DOM
Content
Ready
Budget
pro
Monat
Load
event
Front-end time
i
Der Googlebot erstellt nach etwa
5 Sekunden einen Screenshot der
Webseite erstellt. Alle wichtigen
Inhalte sollten in dieser
Zwischenzeit geladen sein.

23. Indexierbare Urls
Einblick in den Quellcode vor und nach dem Rendern von JavaScript
‣ Beim Aufruf muss eine neue
Url (HTTP-Status Code: 200)
mit serverseitiger
Unterstützung aufgerufen
werden
‣ pushState-Fehler vermeiden,
damit die Original URL mit
serverseitiger Unterstützung
weitergegeben wird.
‣ Kein Einsatz von Hash (#) in
der Url für unique Content
‣ Links über a-href realisieren
und nicht durch User-Event
(z.B. onClick) erzeugen werden
23

24. Head-Bereich ohne JavaScript?
Wichtige Hinweise für den Head-Bereich von JavaScript-Webseiten
‣ Title-Tag ohne JavaScript lösen
wenn möglich
‣ Weitere Informationen wie Meta-
Description, Canoncial-Tags,
hreflang-Tag, Open Graph Angaben
ohne JavaScript lösen etc., um
anderen Crawlern Inhalte anzubieten
‣ Strukturierte Daten über JSON-LD
lösen
24

25. Zusammenfassung der Erkenntnisse
Folgende Erkenntnisse über das Auditing und Best Practices für JavaScript
25
1. Analyse vom Quellcode (Pre-
DOM) reicht nicht aus
2. Erst der gerenderte Code, zeigt
alle Inhalte an
3. Inhalte müssen nach 5
Sekunden dargestellt werden
4. Inhalte müssen nach dem
Load-Event dargestellt werden
5. Inhalte die durch User-Event
erzeugt werden, werden nicht
indexiert
6. Aufruf von Seiten muss eigene
Url erzeugt werden mit
serverseitiger Unterstützung
7. Kein Einsatz von Hash (#) in
der Url
8. Strukturierte Daten mit JSON-
LD realsieren

26. Prerendering
3.
26

27. Umgang der Suchmaschinen mit JavaScript
Wie crawlen und indexieren verschiedene Suchmaschinen mit JavaScript?
27
Are Search Engines Ready
for JavaScript Crawling &
Indexing?
Moz.com

28. Crawling und Indexierung JS-Frameworks
Wie crawlt und indexiert der Googlebot verschiedene JavaScript-Frameworks?
28
Can Google properly crawl
and index JavaScript
frameworks? JavaScript SEO
experiment
elephate.com

29. Wie funktioniert Prerendering?
Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO
29
Load Page normally
Pre-Rendered Cache
Request
Bot
Non-Bot
Check User-Agent
Page

30. 30
Einsatz von Prerendering
Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO
Screaming Frog Text Only Googlebot Text Only Googlebot JavaScript

31. Einsatz von Prerendering
Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO
31
BotUser

32. 32
Prerendering-Dienste
Prerendering-Dienste zum Empfehlen für JavaScript-Webseiten?

33. Nachteile von Prerendering
Welche Nachteile bringt Prerendering für SEO mit sich?
33
Load Page normally
Pre-Rendered Cache
Request
Bot
Non-Bot
Check User-Agent
Page
1. User und Crawler erhalten
unterschiedliche Inhalte:
Cloaking-Gefahr!
2. User profitieren nicht vom
serverseitig gerenderten HTML
3. Seiten werden für längere Zeit
zwischengespeichert: Kein Real-
Time Content!
4. Die selbe Version der Seite wird
für verschiedene Endgeräte
zwischengespeichert
5. Prerendering-Dienste sind
kostenpflichtige Services
6. Verluste in der Performance
können auftreten (Page-Speed)
7. Komplexes Debugging nötig

34. Isomorphic (Universal) JavaScript
Isomorphic JavaScript die Lösung für alle SEO-Probleme?
‣ Mit Isomorphic Applikationen kann
JavaScript-Code sowohl vom Server als
auch vom Client ausgeführt werden
‣ Dadurch kann sowohl dem Crawler, als
auch dem User der selbe Inhalt gezeigt
werden
‣ Dynamische Inhalte können weiterhin
durch den Browser verändert werden
‣ Das Rendern von JavaScript wird
Crawlern damit abgenommen
‣ Verbesserung der Performance, da
JavaScript nicht (vom Client) gerendert
werden muss
34
Client Server
Shared
Code

35. Nachteile von Isomorphic (Universal) JavaScript
Welche Nachteile bringt Isomorphic JavaScript für SEO mit sich?
‣ Nur bestimmte JavaScript-
Frameworks eignen sich für eine
Isomorphic Applikation. (Andere nur
über Umwege)
‣ Einrichtung benötigt größeren
Aufwand und ist damit kostspieliger
‣ Erfordert ein hohes Maß an
Erfahrung und Knowhow
‣ Damit für kleine Projekte
ungeeignet
35
Client Server
Shared
Code

36. Ist JavaScript für
SEO zu empfehlen?
36

37. Budget pro Monat
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.

38. Gedanken zu JavaScript & SEO
Welche Punkte erschweren SEO-Verantwortlichen den Umgang mit JavaScript?
38
1. Nicht jeder Crawler rendert JS
(Bing, Facebook, Twitter etc.)
2. Crawler nutzen
unterschiedliche Technologien
3. Tool-Anbieter nutzen
unterschiedliche Technologien
4. Es gibt beim Rendern
unterschiede zwischen JS-
Framework
5. Nur wenig Transparenz der
Suchmaschinenanbieter
6. Auch beim Einsatz von „Best
Practice“ Maßnahmen keine
Garantie für korrekte
Indexierung
7. Auditing und Analysen weit
aus aufwändiger und damit
kostspieliger
8. Neue Herausforderungen
benötigen neue Ansätze

39. 39

40. JavaScript SEO
RESOURCES
35
40
https://goo.gl/5cccch

41. Vielen Dank!
@arturkosch
artur.kosch@koschklink.de@arturkosch
Artur Kosch
Artur Kosch
Geschäftsführender Gesellschafter