SlideShare ist ein Scribd-Unternehmen logo
JavaScript SEO
SEO Campixx 2018
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 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
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 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
Ausführen von JavaScript vs. HTML
Ausführen von JavaScript im Vergleich zu HTML
1. HTML-Dateien werden
runtergeladen
2. CSS- und JavaScript-Daten
werden parallel runterladen
3. WRS wird genutzt (Teil von
Caffeine) um JS auszuführen
4. WRS rendert alle Dateien
5. Caffeine kann nun die Seiten ggf.
indexieren
6. Erst jetzt kann Googlebot neue
Links crawlen
6
1. HTML-Dateien werden
runtergeladen
2. Links werden aus dem
Quellcode entnommen und
können gecrawlt werden
3. CSS-Dateien werden
runtergeladen
4. Googlebot sendet alle
Rescourcen zu Caffeine
5. Caffeine indexiert ggf. die
Seiten
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.
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
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
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 - März 2015!
‣ 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
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
11
Crawler rendert nicht, sondern der Indexer
Der Crawler (Googlebot) an sich rendert nicht, sondern der Indexer (Caffeine)
12
Verarbeitung von JavaScript vs. HTML
Ausführen von JavaScript im Vergleich zu HTML
1. HTML-Dateien werden
runtergeladen
2. CSS- und JavaScript-Daten
werden parallel runterladen
3. WRS wird genutzt (Teil von
Caffeine) um JS auszuführen
4. WRS rendert alle Dateien
5. Caffeine kann nun die Inhalte ggf.
indexieren
6. Erst jetzt kann Googlebot neue
Links crawlen
13
1. HTML-Dateien werden
runtergeladen
2. Links werden aus dem
Quellcode entnommen und
können gecrawlt werden
3. CSS-Dateien werden
runtergeladen
4. Googlebot sendet alle
Rescourcen zu Caffeine
5. Caffeine indexiert ggf. die
Inhalte
Google nutzt zum
rendern von Webseiten
3 Jahre alte Technologien!
14
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
16
Google Rich Media Tester
Der Google Rich Media Tester besser geeignet zur Betrachtung des gerenderten DOM
17
‣ Laut Google weißt das „Fetch &
Render“-Tool der GSC hier noch
Schwächen auf
‣ Veränderungen die durch JavaScript
am DOM nachträglich vorgenommen
werden, werden im Google Rich Media
Tester dargestellt
‣ Auch CSS-Anweisungen die die durch
Resizing verursacht werden, werden im
Google Rich Media Tester dargestellt
‣ Dieses „Feature“ ist auch für das GSC
„Fetch and Render“-Tool geplant
Ist damit serverseitiges
Rendern für SEO nicht
mehr notwendig?
18
Umgang der Suchmaschinen mit JavaScript
Wie crawlen und indexieren verschiedene Suchmaschinen JavaScript?
19
Are Search Engines Ready
for JavaScript Crawling &
Indexing?
Moz.com
Crawling und Indexierung JS-Frameworks
Wie crawlt und indexiert der Googlebot verschiedene JavaScript-Frameworks?
20
Can Google properly crawl
and index JavaScript
frameworks? JavaScript SEO
experiment
elephate.com
Crawling und Indexierung JS-Frameworks
Wie crawlt und indexiert der Googlebot verschiedene JavaScript-Frameworks?
21
‣ Ein einfacher Fehler
im Angular 2s
Framework führte
dazu, dass Google
selbst Probleme bei
der Indexierung von
Angular 2 hatte.
‣ Am 26. April 2017
wurde dieser Fehler
korrigiert, was die
Indexierungs-
probleme bei Angular
2 beseitigt
Zusammenfassung der Erkenntnisse
Folgende Erkenntnisse über die Interaktion von Crawlen mit JS können zusammengefasst werden
22
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, noch
besser Google Rich Media
Tester (DOM), 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
Auditing &
Best Practices
2.
23
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.
24
Post-
Dom
Pre-
Dom
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„
25
Auditing mit Chrome 41
Rendering-Fehler in den Developer Tools von Chrome 41 einsehen
26
1.
41
3.
Chrome
Developer Tools
öffnen
2.
Client-Rendered
Webseite
öffnen
4.
Fehler aus der
Console
korrigieren
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
27
Dynamische Inhalte (5 Sekunden Regel)
Load Event und User Event für die Verwendung von wichtigen Inhalten
29
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. Alle wichtigen Inhalte
sollten in dieser Zwischenzeit
geladen sein.
GSC „Fetch & Render“-Tool agiert anders
„Fetch & Render“-Tool nur für Tests geeignet, ob Googlebot technisch in der Lage ist Seiten zu rendern
30
GSC „Fetch & Render“-Tool agiert anders
„Fetch & Render“-Tool nur für Tests geeignet, ob Googlebot technisch in der Lage ist Seiten zu rendern
31
Site-Abfrage zur Überprüfung nutzen
Site-Abfrage eher nutzen als den Google-Cache um zu überprüfen ob Content indexiert wurde
32
‣ Google Search Console „Fetch &
Render“-Tool gibt lediglich Auskunft,
ob eine Seite technisch gerendert
werden kann
‣ Timeouts und Performance-
Ansprüche des Googlebots werden
nicht berücksichtigt
‣ Site-Abfrage + Query zur
Überprüfung nutzen, ob Inhalte
indexiert werden können.
‣ Google-Cache zeigt lediglich den
„HTML-Code“ nicht wie Googlebot die
Seite rendert
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
33
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
34
Altes AJAX Crawling Schema wird eingestellt
Google stellt das Crawlen nach dem alten AJAX Crawling Schema noch dieses Jahr einstellen
‣ Google wird nicht aufhören AJAX
(Asynchrinouse JS) zu crawlen
‣ Lediglich das AJAX Crawling
Schema, mit dem Anhand einer
Url “_=escaped_fragment_=to“
werden nicht mehr vom
Googlebot angefragt
‣ Achtung: Bingbot wird dieses
Schema weiterhin nutzen!
35
Zusammenfassung der Erkenntnisse
Folgende Erkenntnisse über das Auditing und Best Practices für JavaScript
36
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. GSC dient nur für technische
Anforderungen beim Rendern
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
9. Google stellt das AJAX
Crawling Schema dieses Jahr
ein
Prerendering
3.
37
Was ist mit anderen Suchmaschinen?
Wie crawlen und indexieren verschiedene Suchmaschinen JavaScript?
38
Are Search Engines Ready
for JavaScript Crawling &
Indexing?
Moz.com
Wie funktioniert Prerendering?
Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO
39
Load Page normally
Pre-Rendered Cache
Request
Bot
Non-Bot
Check User-Agent
Page
40
Einsatz von Prerendering
Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO
Screaming Frog Text Only Googlebot Text Only Screaming Frog JavaScript
Einsatz von Prerendering
Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO
41
BotUser
42
Prerendering-Dienste
Prerendering-Dienste zum Empfehlen für JavaScript-Webseiten?
Nachteile von Prerendering
Welche Nachteile bringt Prerendering für SEO mit sich?
43
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
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
44
Client Server
Shared
Code
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
45
Client Server
Shared
Code
Ist JavaScript für
SEO zu empfehlen?
46
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.
Gedanken zu JavaScript & SEO
Welche Punkte erschweren SEO-Verantwortlichen den Umgang mit JavaScript?
48
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
49
JavaScript SEO
RESOURCES
35
50
https://goo.gl/5cccch
51
Vielen Dank!
@arturkosch
artur.kosch@koschklink.de@arturkosch
Artur Kosch
Artur Kosch
Geschäftsführender Gesellschafter

Weitere ähnliche Inhalte

Was ist angesagt?

Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014Florian Elbers
 
WordPress SEO | Campixx 2016 | Hans Jung
WordPress SEO | Campixx 2016 | Hans JungWordPress SEO | Campixx 2016 | Hans Jung
WordPress SEO | Campixx 2016 | Hans Jung
Hans Jung
 
Crawl-Budget Optimierung - SEOday 2015
Crawl-Budget Optimierung - SEOday 2015Crawl-Budget Optimierung - SEOday 2015
Crawl-Budget Optimierung - SEOday 2015
Bastian Grimm
 
Von Protocol Buffer und anderen Dingen
Von Protocol Buffer und anderen DingenVon Protocol Buffer und anderen Dingen
Von Protocol Buffer und anderen Dingen
Valentin Pletzer
 
SEO Internation - SEO Campixx 2016
SEO Internation - SEO Campixx 2016SEO Internation - SEO Campixx 2016
SEO Internation - SEO Campixx 2016
Carolin Hoffmeyer
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
Bastian Grimm
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
Danny Linden
 
WordPress Seo - WP Meetup Würzburg 2016
WordPress Seo - WP Meetup Würzburg 2016WordPress Seo - WP Meetup Würzburg 2016
WordPress Seo - WP Meetup Würzburg 2016
Hans Jung
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
Bastian Grimm
 
SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)
SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)
SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)
Mario Schwertfeger
 
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
Bastian Grimm
 
SEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
SEOday Köln 2020 - Surprise, Surprise - 5 SEO secretsSEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
SEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
Bastian Grimm
 
Enhanced SEO with Machine Learning
Enhanced SEO with Machine LearningEnhanced SEO with Machine Learning
Enhanced SEO with Machine Learning
Michael Weber
 
SEO-Basics: Worauf es bei Suchmaschinenoptimierung wirklich ankommt | Stephan...
SEO-Basics: Worauf es bei Suchmaschinenoptimierung wirklich ankommt | Stephan...SEO-Basics: Worauf es bei Suchmaschinenoptimierung wirklich ankommt | Stephan...
SEO-Basics: Worauf es bei Suchmaschinenoptimierung wirklich ankommt | Stephan...
TA Trust Agents Internet GmbH
 
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
TA Trust Agents Internet GmbH
 
CAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
CAMPIXX 2016 Internationales SEO mit seinen Höhen und TiefenCAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
CAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
Alona Demchyk (Hakel)
 
Linkbuilding durch skalierbare Strategien und Prozesse
Linkbuilding durch skalierbare Strategien und ProzesseLinkbuilding durch skalierbare Strategien und Prozesse
Linkbuilding durch skalierbare Strategien und Prozesse
Dominique Seppelt
 
Voice search - "Next Big SEO Thing"? oder klassischer Hype?
Voice search - "Next Big SEO Thing"? oder klassischer Hype?Voice search - "Next Big SEO Thing"? oder klassischer Hype?
Voice search - "Next Big SEO Thing"? oder klassischer Hype?
Fabian Meister
 
Informationsarchitektur & Verlinkung - SMX München 2014
Informationsarchitektur & Verlinkung - SMX München 2014Informationsarchitektur & Verlinkung - SMX München 2014
Informationsarchitektur & Verlinkung - SMX München 2014
Bastian Grimm
 
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
André Goldmann
 

Was ist angesagt? (20)

Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
 
WordPress SEO | Campixx 2016 | Hans Jung
WordPress SEO | Campixx 2016 | Hans JungWordPress SEO | Campixx 2016 | Hans Jung
WordPress SEO | Campixx 2016 | Hans Jung
 
Crawl-Budget Optimierung - SEOday 2015
Crawl-Budget Optimierung - SEOday 2015Crawl-Budget Optimierung - SEOday 2015
Crawl-Budget Optimierung - SEOday 2015
 
Von Protocol Buffer und anderen Dingen
Von Protocol Buffer und anderen DingenVon Protocol Buffer und anderen Dingen
Von Protocol Buffer und anderen Dingen
 
SEO Internation - SEO Campixx 2016
SEO Internation - SEO Campixx 2016SEO Internation - SEO Campixx 2016
SEO Internation - SEO Campixx 2016
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
 
WordPress Seo - WP Meetup Würzburg 2016
WordPress Seo - WP Meetup Würzburg 2016WordPress Seo - WP Meetup Würzburg 2016
WordPress Seo - WP Meetup Würzburg 2016
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)
SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)
SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)
 
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
 
SEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
SEOday Köln 2020 - Surprise, Surprise - 5 SEO secretsSEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
SEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
 
Enhanced SEO with Machine Learning
Enhanced SEO with Machine LearningEnhanced SEO with Machine Learning
Enhanced SEO with Machine Learning
 
SEO-Basics: Worauf es bei Suchmaschinenoptimierung wirklich ankommt | Stephan...
SEO-Basics: Worauf es bei Suchmaschinenoptimierung wirklich ankommt | Stephan...SEO-Basics: Worauf es bei Suchmaschinenoptimierung wirklich ankommt | Stephan...
SEO-Basics: Worauf es bei Suchmaschinenoptimierung wirklich ankommt | Stephan...
 
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
 
CAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
CAMPIXX 2016 Internationales SEO mit seinen Höhen und TiefenCAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
CAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
 
Linkbuilding durch skalierbare Strategien und Prozesse
Linkbuilding durch skalierbare Strategien und ProzesseLinkbuilding durch skalierbare Strategien und Prozesse
Linkbuilding durch skalierbare Strategien und Prozesse
 
Voice search - "Next Big SEO Thing"? oder klassischer Hype?
Voice search - "Next Big SEO Thing"? oder klassischer Hype?Voice search - "Next Big SEO Thing"? oder klassischer Hype?
Voice search - "Next Big SEO Thing"? oder klassischer Hype?
 
Informationsarchitektur & Verlinkung - SMX München 2014
Informationsarchitektur & Verlinkung - SMX München 2014Informationsarchitektur & Verlinkung - SMX München 2014
Informationsarchitektur & Verlinkung - SMX München 2014
 
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
 

Ähnlich wie JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites - SEO Campixx 2018 - Artur Kosch

Hybrid web apps
Hybrid web appsHybrid web apps
Hybrid web apps
MohamadRamadan21
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for Beginners
Jan Berens
 
Performance-Optimierung für CMS getriebene Websites.
Performance-Optimierung für CMS getriebene Websites.Performance-Optimierung für CMS getriebene Websites.
Performance-Optimierung für CMS getriebene Websites.
Bokowsky + Laymann GmbH
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
John Muñoz
 
Ist die Webseite suchmaschinenoptimiert? Vorstellung eines Online-Tools zur A...
Ist die Webseite suchmaschinenoptimiert? Vorstellung eines Online-Tools zur A...Ist die Webseite suchmaschinenoptimiert? Vorstellung eines Online-Tools zur A...
Ist die Webseite suchmaschinenoptimiert? Vorstellung eines Online-Tools zur A...
Hamburg University of Applied Sciences (HAW)
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
David Schneider
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
QAware GmbH
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
Globetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HHGlobetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HH
Sebastian Heuer
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
Frank Kleine
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
Nico Steiner
 
Seo Hilfe
Seo HilfeSeo Hilfe
Seo Hilfe
SEO Hilfe
 
Shopleiter Magazin Nr. 3 - SEO-, SEM- und eCommerce-Tipps
Shopleiter Magazin Nr. 3 - SEO-, SEM- und eCommerce-TippsShopleiter Magazin Nr. 3 - SEO-, SEM- und eCommerce-Tipps
Shopleiter Magazin Nr. 3 - SEO-, SEM- und eCommerce-Tipps
wallaby IT-Systems - Gründerberater und SEO-Berater
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
Markus Greve
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft AG
 
Technische SEO Probleme finden mit Tools
Technische SEO Probleme finden mit ToolsTechnische SEO Probleme finden mit Tools
Technische SEO Probleme finden mit Tools
Timon Hartung
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon MeggleOSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
NETWAYS
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
Nico Steiner
 

Ähnlich wie JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites - SEO Campixx 2018 - Artur Kosch (20)

Hybrid web apps
Hybrid web appsHybrid web apps
Hybrid web apps
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for Beginners
 
Performance-Optimierung für CMS getriebene Websites.
Performance-Optimierung für CMS getriebene Websites.Performance-Optimierung für CMS getriebene Websites.
Performance-Optimierung für CMS getriebene Websites.
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
 
Ist die Webseite suchmaschinenoptimiert? Vorstellung eines Online-Tools zur A...
Ist die Webseite suchmaschinenoptimiert? Vorstellung eines Online-Tools zur A...Ist die Webseite suchmaschinenoptimiert? Vorstellung eines Online-Tools zur A...
Ist die Webseite suchmaschinenoptimiert? Vorstellung eines Online-Tools zur A...
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Globetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HHGlobetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HH
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Seo Hilfe
Seo HilfeSeo Hilfe
Seo Hilfe
 
Shopleiter Magazin Nr. 3 - SEO-, SEM- und eCommerce-Tipps
Shopleiter Magazin Nr. 3 - SEO-, SEM- und eCommerce-TippsShopleiter Magazin Nr. 3 - SEO-, SEM- und eCommerce-Tipps
Shopleiter Magazin Nr. 3 - SEO-, SEM- und eCommerce-Tipps
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Technische SEO Probleme finden mit Tools
Technische SEO Probleme finden mit ToolsTechnische SEO Probleme finden mit Tools
Technische SEO Probleme finden mit Tools
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon MeggleOSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 

Mehr von Artur Kosch

ROI im SEO - Messbarkeit des wirtschaftlichen Erfolges (Return on Investment)...
ROI im SEO - Messbarkeit des wirtschaftlichen Erfolges (Return on Investment)...ROI im SEO - Messbarkeit des wirtschaftlichen Erfolges (Return on Investment)...
ROI im SEO - Messbarkeit des wirtschaftlichen Erfolges (Return on Investment)...
Artur Kosch
 
ROI im SEO - Wie wirtschaftlich erfolgreich sind Ihre SEO-Kampagnen - OMT mee...
ROI im SEO - Wie wirtschaftlich erfolgreich sind Ihre SEO-Kampagnen - OMT mee...ROI im SEO - Wie wirtschaftlich erfolgreich sind Ihre SEO-Kampagnen - OMT mee...
ROI im SEO - Wie wirtschaftlich erfolgreich sind Ihre SEO-Kampagnen - OMT mee...
Artur Kosch
 
Search Driven Content - OMTmeetsSEO 2017 - Artur Kosch
Search Driven Content - OMTmeetsSEO 2017 - Artur KoschSearch Driven Content - OMTmeetsSEO 2017 - Artur Kosch
Search Driven Content - OMTmeetsSEO 2017 - Artur Kosch
Artur Kosch
 
5 typische SEO-Fehler von E-Commerce Webseiten
5 typische SEO-Fehler von E-Commerce Webseiten5 typische SEO-Fehler von E-Commerce Webseiten
5 typische SEO-Fehler von E-Commerce Webseiten
Artur Kosch
 
Top 10 Local Seo Rankingsfaktoren
Top 10 Local Seo RankingsfaktorenTop 10 Local Seo Rankingsfaktoren
Top 10 Local Seo Rankingsfaktoren
Artur Kosch
 
Vermarktung eines Online Kurses
Vermarktung eines Online KursesVermarktung eines Online Kurses
Vermarktung eines Online Kurses
Artur Kosch
 

Mehr von Artur Kosch (6)

ROI im SEO - Messbarkeit des wirtschaftlichen Erfolges (Return on Investment)...
ROI im SEO - Messbarkeit des wirtschaftlichen Erfolges (Return on Investment)...ROI im SEO - Messbarkeit des wirtschaftlichen Erfolges (Return on Investment)...
ROI im SEO - Messbarkeit des wirtschaftlichen Erfolges (Return on Investment)...
 
ROI im SEO - Wie wirtschaftlich erfolgreich sind Ihre SEO-Kampagnen - OMT mee...
ROI im SEO - Wie wirtschaftlich erfolgreich sind Ihre SEO-Kampagnen - OMT mee...ROI im SEO - Wie wirtschaftlich erfolgreich sind Ihre SEO-Kampagnen - OMT mee...
ROI im SEO - Wie wirtschaftlich erfolgreich sind Ihre SEO-Kampagnen - OMT mee...
 
Search Driven Content - OMTmeetsSEO 2017 - Artur Kosch
Search Driven Content - OMTmeetsSEO 2017 - Artur KoschSearch Driven Content - OMTmeetsSEO 2017 - Artur Kosch
Search Driven Content - OMTmeetsSEO 2017 - Artur Kosch
 
5 typische SEO-Fehler von E-Commerce Webseiten
5 typische SEO-Fehler von E-Commerce Webseiten5 typische SEO-Fehler von E-Commerce Webseiten
5 typische SEO-Fehler von E-Commerce Webseiten
 
Top 10 Local Seo Rankingsfaktoren
Top 10 Local Seo RankingsfaktorenTop 10 Local Seo Rankingsfaktoren
Top 10 Local Seo Rankingsfaktoren
 
Vermarktung eines Online Kurses
Vermarktung eines Online KursesVermarktung eines Online Kurses
Vermarktung eines Online Kurses
 

JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites - SEO Campixx 2018 - Artur Kosch

  • 1. JavaScript SEO SEO Campixx 2018 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.
  • 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. Ausführen von JavaScript vs. HTML Ausführen von JavaScript im Vergleich zu HTML 1. HTML-Dateien werden runtergeladen 2. CSS- und JavaScript-Daten werden parallel runterladen 3. WRS wird genutzt (Teil von Caffeine) um JS auszuführen 4. WRS rendert alle Dateien 5. Caffeine kann nun die Seiten ggf. indexieren 6. Erst jetzt kann Googlebot neue Links crawlen 6 1. HTML-Dateien werden runtergeladen 2. Links werden aus dem Quellcode entnommen und können gecrawlt werden 3. CSS-Dateien werden runtergeladen 4. Googlebot sendet alle Rescourcen zu Caffeine 5. Caffeine indexiert ggf. die Seiten
  • 7. 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. 7
  • 8. 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 8 + +
  • 9. 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
  • 10. 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 - März 2015! ‣ 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 10
  • 11. 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 11
  • 12. Crawler rendert nicht, sondern der Indexer Der Crawler (Googlebot) an sich rendert nicht, sondern der Indexer (Caffeine) 12
  • 13. Verarbeitung von JavaScript vs. HTML Ausführen von JavaScript im Vergleich zu HTML 1. HTML-Dateien werden runtergeladen 2. CSS- und JavaScript-Daten werden parallel runterladen 3. WRS wird genutzt (Teil von Caffeine) um JS auszuführen 4. WRS rendert alle Dateien 5. Caffeine kann nun die Inhalte ggf. indexieren 6. Erst jetzt kann Googlebot neue Links crawlen 13 1. HTML-Dateien werden runtergeladen 2. Links werden aus dem Quellcode entnommen und können gecrawlt werden 3. CSS-Dateien werden runtergeladen 4. Googlebot sendet alle Rescourcen zu Caffeine 5. Caffeine indexiert ggf. die Inhalte
  • 14. Google nutzt zum rendern von Webseiten 3 Jahre alte Technologien! 14
  • 15. Can I use Chrome Status Caniuse.com Chromestatus.com
  • 16. Googlebot vs. Google Search Console Bot Abrufen und Rendern mit dem Googlebot und dem Google Search Console Bot 16
  • 17. Google Rich Media Tester Der Google Rich Media Tester besser geeignet zur Betrachtung des gerenderten DOM 17 ‣ Laut Google weißt das „Fetch & Render“-Tool der GSC hier noch Schwächen auf ‣ Veränderungen die durch JavaScript am DOM nachträglich vorgenommen werden, werden im Google Rich Media Tester dargestellt ‣ Auch CSS-Anweisungen die die durch Resizing verursacht werden, werden im Google Rich Media Tester dargestellt ‣ Dieses „Feature“ ist auch für das GSC „Fetch and Render“-Tool geplant
  • 18. Ist damit serverseitiges Rendern für SEO nicht mehr notwendig? 18
  • 19. Umgang der Suchmaschinen mit JavaScript Wie crawlen und indexieren verschiedene Suchmaschinen JavaScript? 19 Are Search Engines Ready for JavaScript Crawling & Indexing? Moz.com
  • 20. Crawling und Indexierung JS-Frameworks Wie crawlt und indexiert der Googlebot verschiedene JavaScript-Frameworks? 20 Can Google properly crawl and index JavaScript frameworks? JavaScript SEO experiment elephate.com
  • 21. Crawling und Indexierung JS-Frameworks Wie crawlt und indexiert der Googlebot verschiedene JavaScript-Frameworks? 21 ‣ Ein einfacher Fehler im Angular 2s Framework führte dazu, dass Google selbst Probleme bei der Indexierung von Angular 2 hatte. ‣ Am 26. April 2017 wurde dieser Fehler korrigiert, was die Indexierungs- probleme bei Angular 2 beseitigt
  • 22. Zusammenfassung der Erkenntnisse Folgende Erkenntnisse über die Interaktion von Crawlen mit JS können zusammengefasst werden 22 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, noch besser Google Rich Media Tester (DOM), 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
  • 24. 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. 24 Post- Dom Pre- Dom
  • 25. 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„ 25
  • 26. Auditing mit Chrome 41 Rendering-Fehler in den Developer Tools von Chrome 41 einsehen 26 1. 41 3. Chrome Developer Tools öffnen 2. Client-Rendered Webseite öffnen 4. Fehler aus der Console korrigieren
  • 27. 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 27
  • 28.
  • 29. Dynamische Inhalte (5 Sekunden Regel) Load Event und User Event für die Verwendung von wichtigen Inhalten 29 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. Alle wichtigen Inhalte sollten in dieser Zwischenzeit geladen sein.
  • 30. GSC „Fetch & Render“-Tool agiert anders „Fetch & Render“-Tool nur für Tests geeignet, ob Googlebot technisch in der Lage ist Seiten zu rendern 30
  • 31. GSC „Fetch & Render“-Tool agiert anders „Fetch & Render“-Tool nur für Tests geeignet, ob Googlebot technisch in der Lage ist Seiten zu rendern 31
  • 32. Site-Abfrage zur Überprüfung nutzen Site-Abfrage eher nutzen als den Google-Cache um zu überprüfen ob Content indexiert wurde 32 ‣ Google Search Console „Fetch & Render“-Tool gibt lediglich Auskunft, ob eine Seite technisch gerendert werden kann ‣ Timeouts und Performance- Ansprüche des Googlebots werden nicht berücksichtigt ‣ Site-Abfrage + Query zur Überprüfung nutzen, ob Inhalte indexiert werden können. ‣ Google-Cache zeigt lediglich den „HTML-Code“ nicht wie Googlebot die Seite rendert
  • 33. 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 33
  • 34. 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 34
  • 35. Altes AJAX Crawling Schema wird eingestellt Google stellt das Crawlen nach dem alten AJAX Crawling Schema noch dieses Jahr einstellen ‣ Google wird nicht aufhören AJAX (Asynchrinouse JS) zu crawlen ‣ Lediglich das AJAX Crawling Schema, mit dem Anhand einer Url “_=escaped_fragment_=to“ werden nicht mehr vom Googlebot angefragt ‣ Achtung: Bingbot wird dieses Schema weiterhin nutzen! 35
  • 36. Zusammenfassung der Erkenntnisse Folgende Erkenntnisse über das Auditing und Best Practices für JavaScript 36 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. GSC dient nur für technische Anforderungen beim Rendern 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 9. Google stellt das AJAX Crawling Schema dieses Jahr ein
  • 38. Was ist mit anderen Suchmaschinen? Wie crawlen und indexieren verschiedene Suchmaschinen JavaScript? 38 Are Search Engines Ready for JavaScript Crawling & Indexing? Moz.com
  • 39. Wie funktioniert Prerendering? Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO 39 Load Page normally Pre-Rendered Cache Request Bot Non-Bot Check User-Agent Page
  • 40. 40 Einsatz von Prerendering Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO Screaming Frog Text Only Googlebot Text Only Screaming Frog JavaScript
  • 41. Einsatz von Prerendering Einsatz von Prerendering-Diensten für JavaScript-Webseiten im SEO 41 BotUser
  • 43. Nachteile von Prerendering Welche Nachteile bringt Prerendering für SEO mit sich? 43 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
  • 44. 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 44 Client Server Shared Code
  • 45. 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 45 Client Server Shared Code
  • 46. Ist JavaScript für SEO zu empfehlen? 46
  • 47. 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.
  • 48. Gedanken zu JavaScript & SEO Welche Punkte erschweren SEO-Verantwortlichen den Umgang mit JavaScript? 48 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
  • 49. 49
  • 51. 51