JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites - SEOKomm 2017 - Artur Kosch
2 gefällt mir10,957 aufrufe
Das Dokument behandelt die Interaktion von Suchmaschinen mit JavaScript-Webseiten, insbesondere die Crawling- und Indexierungsprozesse des Googlebots und die Technologien, die er verwendet. Es werden Best Practices und Herausforderungen beim Implementieren von JavaScript in SEO erläutert, sowie das Prerendering und isomorphe Ansätze zur Verbesserung der Sichtbarkeit in Suchmaschinen. Die Auffassung, dass serverseitiges Rendering weiterhin entscheidend für eine erfolgreiche SEO-Strategie bleibt, wird hervorgehoben.
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites - SEOKomm 2017 - Artur Kosch
- 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
- 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
- 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
- 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
- 41. Vielen Dank! @arturkosch [email protected]@arturkosch Artur Kosch Artur Kosch Geschäftsführender Gesellschafter