Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript SEO
SEOKomm 2017
1
Crawling, Indexierung und
Auditing von JavaScript-Websites
Über mich
Artur Kosch
Geschäftsführender Gesellschafter
‣ Über 8 Jahre Erfahrung im Online Marketing
und SEO
‣ Bekannt dur...
Über mich
Bekannt aus:
3
Wie interagiert der
Crawler mit JavaScript?
1.
4
Wie wird JavaScript ausgeführt?
Ausführen von PHP und JavaScript-Rendering zwischen Browser und Server
1. Der Browser stel...
Headless Browser
Grundprinzipien eines Headless Browsers an Hand von Headless Chrome
‣ Ein Headless-Browser ist ein Browse...
Automatisierung & Scrapping
Automatisieren und Scrappen mit Headless Chrome
‣ Node.js wird in der, für Chrome
entwickelten...
A Guide to
Automating &
Scraping the Web with
JavaScript
API Documentation für
Puppeteer
Codeburst.io
Github.com
Getting S...
GoogleBot Rendering
Welche Technologien nutzt der GoogleBot um Webseiten zu rendern?
‣ Die Technik hinter dem Web
Renderin...
GoogleBot Rendering
Welche Technologien und Funktionen werden nicht unterstützt?
‣ Das aktuelle Transfer Protokoll HTTP/2 ...
Can I use Chrome Status
Caniuse.com Chromestatus.com
Googlebot vs. Google Search Console Bot
Abrufen und Rendern mit dem Googlebot und dem Google Search Console Bot
12
Ist damit serverseitiges
Rendern für SEO nicht
mehr notwendig?
13
Umgang der Suchmaschinen mit JavaScript
Wie crawlen und indexieren verschiedene Suchmaschinen JavaScript?
14
Are Search En...
Crawling und Indexierung JS-Frameworks
Wie crawlt und indexiert der Googlebot verschiedene JavaScript-Frameworks?
15
Can G...
Zusammenfassung der Erkenntnisse
Folgende Erkenntnisse über die Interaktion von Crawlen mit JS können zusammengefasst werd...
Auditing &
Best Practices
2.
17
Quellcode vor dem Rendern
Einblick in den Quellcode vor und nach dem Rendern von JavaScript
‣ Ein Blick auf den Quellcode ...
Auditing vom gerenderten Quellcode
Gerenderten Quellcode einsehen und analysieren
1. In einen „leeren Bereich“ der
Webseit...
Auditing mit Screaming Frog
Der Einsatz des SEO Spider Screaming Frog zum rendern von JavaScript-Webseiten
1. Um JavaScrip...
Dynamische Inhalte
Load Event und User Event für die Verwendung von wichtigen Inhalten
22
Network
time
Server time Network...
Indexierbare Urls
Einblick in den Quellcode vor und nach dem Rendern von JavaScript
‣ Beim Aufruf muss eine neue
Url (HTTP...
Head-Bereich ohne JavaScript?
Wichtige Hinweise für den Head-Bereich von JavaScript-Webseiten
‣ Title-Tag ohne JavaScript ...
Zusammenfassung der Erkenntnisse
Folgende Erkenntnisse über das Auditing und Best Practices für JavaScript
25
1. Analyse v...
Prerendering
3.
26
Umgang der Suchmaschinen mit JavaScript
Wie crawlen und indexieren verschiedene Suchmaschinen mit JavaScript?
27
Are Searc...
Crawling und Indexierung JS-Frameworks
Wie crawlt und indexiert der Googlebot verschiedene JavaScript-Frameworks?
28
Can G...
Wie funktioniert Prerendering?
Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO
29
Load Page normally
Pre...
30
Einsatz von Prerendering
Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO
Screaming Frog Text Only Goo...
Einsatz von Prerendering
Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO
31
BotUser
32
Prerendering-Dienste
Prerendering-Dienste zum Empfehlen für JavaScript-Webseiten?
Nachteile von Prerendering
Welche Nachteile bringt Prerendering für SEO mit sich?
33
Load Page normally
Pre-Rendered Cache...
Isomorphic (Universal) JavaScript
Isomorphic JavaScript die Lösung für alle SEO-Probleme?
‣ Mit Isomorphic Applikationen k...
Nachteile von Isomorphic (Universal) JavaScript
Welche Nachteile bringt Isomorphic JavaScript für SEO mit sich?
‣ Nur best...
Ist JavaScript für
SEO zu empfehlen?
36
Budget pro Monat
If you search for any competitive keyword terms,
it’s always going to be server rendered sites. And
the r...
Gedanken zu JavaScript & SEO
Welche Punkte erschweren SEO-Verantwortlichen den Umgang mit JavaScript?
38
1. Nicht jeder Cr...
39
JavaScript SEO
RESOURCES
35
40
https://goo.gl/5cccch
Vielen Dank!
@arturkosch
artur.kosch@koschklink.de@arturkosch
Artur Kosch
Artur Kosch
Geschäftsführender Gesellschafter
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites - SEOKomm 2017 - Artur Kosch
Upcoming SlideShare
Loading in …5
×

JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites - SEOKomm 2017 - Artur Kosch

4,956 views

Published on

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.

Published in: Marketing
  • Be the first to comment

JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites - SEOKomm 2017 - Artur Kosch

  1. 1. JavaScript SEO SEOKomm 2017 1 Crawling, Indexierung und Auditing von JavaScript-Websites
  2. 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. 3. Über mich Bekannt aus: 3
  4. 4. Wie interagiert der Crawler mit JavaScript? 1. 4
  5. 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. 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. 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. 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. 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. 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. 11. Can I use Chrome Status Caniuse.com Chromestatus.com
  12. 12. Googlebot vs. Google Search Console Bot Abrufen und Rendern mit dem Googlebot und dem Google Search Console Bot 12
  13. 13. Ist damit serverseitiges Rendern für SEO nicht mehr notwendig? 13
  14. 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. 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. 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. 17. Auditing & Best Practices 2. 17
  18. 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. 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. 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
  21. 21. 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.
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. Prerendering 3. 26
  26. 26. Umgang der Suchmaschinen mit JavaScript Wie crawlen und indexieren verschiedene Suchmaschinen mit JavaScript? 27 Are Search Engines Ready for JavaScript Crawling & Indexing? Moz.com
  27. 27. 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
  28. 28. 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
  29. 29. 30 Einsatz von Prerendering Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO Screaming Frog Text Only Googlebot Text Only Googlebot JavaScript
  30. 30. Einsatz von Prerendering Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO 31 BotUser
  31. 31. 32 Prerendering-Dienste Prerendering-Dienste zum Empfehlen für JavaScript-Webseiten?
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. Ist JavaScript für SEO zu empfehlen? 36
  36. 36. 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.
  37. 37. 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
  38. 38. 39
  39. 39. JavaScript SEO RESOURCES 35 40 https://goo.gl/5cccch
  40. 40. Vielen Dank! @arturkosch artur.kosch@koschklink.de@arturkosch Artur Kosch Artur Kosch Geschäftsführender Gesellschafter

×