SEO GUIDE: JavaScript Frameworks und SEO

Dieser Artikel sollte nicht als vollständig angesehen werden. Er wird ständig erweitert.

JavaScript und technisches SEO ist heutzutage ein sehr heißes Thema, da immer mehr Websites moderne JavaScript-Frameworks und -Bibliotheken wie Angular, React, Vue.js und Polymer verwenden. Die Realität ist jedoch, dass SEOs und Entwickler noch am Anfang einer Reise stehen, um moderne JS-Frameworks für die Suchmaschinen zu optimieren.

The web has moved from plain HTML – as an SEO you can embrace that. Learn from JS devs & share SEO knowledge with them. JS’s not going away. | John Mueller (8. August.2017)

Warum das so ist und welches Maßnahmen für die Suchmaschinenoptimierung von JS-Frameworks basierenden Seiten ergriffen werden können, zeigt dieser Artikel auf.

Können Suchmaschinen Javascript-Webseiten crawlen und indexieren?

Ja und Nein. Laut der offiziellen Aussage von Goolge, kann der Goolgebot JavaScript rendern, die Inhalte indexieren und crawlen. Diese gab Google 2014 über den Webmaster Central Blog bekannt. Diese Aussage bekräftigt John Mueller (Webmaster Trends Analyst bei Google) nochmals 2016 auf der AngularConnect. Soviel zum Ja.

Google’s Gary Illyes said at PubCon that they are able to fully render 98% or more of the web pages they crawl. With that he also added rendering takes longer than normal crawling and indexing. He said it can take days to a few weeks to fully render a page from the time it was crawled. | Search Engine Roundtable (10.Mai.2018)

Nun zum Nein: Es gibt einige Fallstudien die genau das Gegenteil wieder spiegeln und eine mangelnden Interpretationsfähigkeit der Suchmaschinen von JavaScript widerspiegeln. Des Weiteren haben bis auf den Branchenprimus Google alle anderen Suchmaschinen noch massive Probleme mit dem crawlen und indexieren von JavaScript. Auch die führenden SEO-Tools sind hierzu noch nicht in der Lage, was das OnPage-Monitoring sehr erschwert.

Ein Experiment aus dem Jahr 2017 zeigt auf das Google und Ask (Ask bassiert auf Google) die einzigen Suchmaschinen sind, die von JavaScript generierte Inhalte ordnungsgemäß indizieren. Bing, Yahoo, AOL, DuckDuckGo und Yandex sind vollständig JavaScript-blind.

Können Suchmaschinen Javascript-Webseiten crawlen und indexieren? – Experiment aus dem Jahr 2017

Hinweis: Ich versuche hier gerade aktuellere Daten zu erheben.

Rendern von JavaScript Frameworks durch den Googlebot

Wichtiges Update: Google hat offiziell bestätigt, dass der Googlebot auf Chromium 74 aktualisiert wurde.

Google gab 2014 bekannt, dass der Goolgebot in der Lage ist Javascript zu rendern. Voraussetzung dafür ist, dass keinerlei JavaScript und CSS Ressourcen durch die robots.txt Datei blockiert werden. Im Oktober 2015 wurde von Google dann offiziell die Empfehlung zur Verwendung des AJAX Crawling Schema als veraltet gekennzeichnet.

Wir wissen auch, dass der Indexer einen Web Rendering Service nutzt, der auf dem Google Chrome 41 basiert. Diese Chrome Version ist aus dem Jahr 2015 und heute noch im Einsatz. Wie John Mueller auf der Google I/O 2018 bestätigt:

Google I/O John Mueller revealed that Google is still using the older version of Chrome – Chrome | John Mueller (Google)

Features des Chrome Version 41 — Auszug aus den nicht unterstützen Features des Google Chrome Version 41 im Vergleich zur Version 73

Diese Aussage ist für das Thema JavaScript SEO sehr interessant. Das heißt Google rendert Webseiten mit einem drei Jahre altem Browser, dieser verfügt etwa über 60% der Technologien und Features der aktuellen Chrome Version. Aktuell sollte also auf alle Features, die der Chrome 41 nicht beherrscht verzichtet werden.

Welche Features die Version 41 im Vergleich zu der aktuellen Version nicht unterstützt, kann auf CanIuse.com verglichen werden oder direkt bei Chrome Platform Status.

Für alle JavaScript Webseiten sollte der Chrome Version 41 zu einem der primären Testing-Tools gehören. Nachfolgen findet einen Link zum Download des Chrome 41 und einen Link zur Puppeteer API. Mit dieser API ist die Steuerung von Chromium oder Chrome über das DevTools-Protokoll möglich:

Name	Anmerkung	Link
Google Chrome in der Version 41	Den Google Chrome in der Version 41 gibt es hier direkt bei Google zum Download	Zum Download
Puppeteer API Tip-Of-Tree	Puppeteer ist eine Node-Bibliothek, die eine übergeordnete API zur Steuerung von Chromium oder Chrome über das DevTools-Protokoll bietet.	Zu GitHub

Zum Thema Rendern von JavaScript ist der Vortrag „Deliver search-friendly JavaScript-powered website“ auf der Google I/O 2018 zu empfehlen:

Die Lösung: Dynamic Rendering

Nun wir wissen jetzt, dass so einige Probleme mit der Verarbeitung von JavaScript Webseiten gibt. Wie sieht die Lösung aus? Google Eine Lösung die Google selbst empfiehlt ist das Dynamic Rendering. Beim Dynamic Rendering, werden je nach Benutzeragent entweder clientseitig gerenderte und vorgerenderte Inhalt ausgeliefert. Damit können die aktuellen Probleme der Suchmaschinen-Crawler umgangen werden.

Die Lösung empfiehlt sich vor allem für Webseiten die:

JavaScript-Funktionen verwenden die von den Crawlern noch nicht unterstützt werden.
öffentlichen JavaScript generierte Inhalte zur Verfügung stellen der sich schnell ändert.

Dynamisches Rendering implementieren

Mehr Informationen zum Thema Dynamisches Rendering finden Sie hier: Get started with dynamic rendering.

Google: Verwenden Sie keine Hashtags in URLs

Now, Gary (Google) was specifically talking about using hashtags where the # calls new content to load. If you are just using them as basic web anchors to scroll down the page or to a location in the page but that content has already been loaded on first load – then it is fine. But if you programmed your site to load new content based on what comes up after the # sign in the URL, then you are in trouble. PubCon – 18 Okt 2018

Tipps und Best Practices Ansätze zu SEO und JavaScript

Seit dem 27.02.2019 gibt es auf dem Google Webmasters YouTube-Kanal eine Serie namens „JavaScript SEO“. Hier gibt Martin Splitt von Google Tipps und Best Practices Ansätze zu SEO und JavaScript preis.

Nachfolgend habe ich euch die Playliste aus dem YouTube Kanal von Google Webmasters verlinkt:

Vue.js: Technisches SEO für das progressive JavaScript Framework

Martin Splitt von Google hat ein wunderbares technisches SEO-Video gepostet, in dem es darum geht, Vue.js, in Vue integrierte Web-Apps, suchmaschinenfreundlich zu gestalten. Dabei werden Titel, Beschreibungen und URLs von Googlebot besser erkannt, wenn sie in Vue integriert sind.