© Berezovska Anastasia/Shutterstock.com
Entwickler Magazin
SEO-optimierte JavaScript-Seiten erstellen

Moderne JavaScript-Frameworks und SEO

Historisch gesehen hatten Suchmaschinen mit der Indexierung von Inhalten, die per JavaScript geladen werden, immer große Probleme und haben sie zum Teil immer noch. Kein Wunder also, dass viele SEO-Verantwortliche JavaScript lange fürchteten wie der Teufel das Weihwasser. Es gibt aber Lösungen für das Problem.

Daniel Marx


Mit der immer stärkeren Verbreitung von modernen JavaScript-Frameworks wie Angular, React oder Vue.js kommt man heute in der SEO kaum mehr daran vorbei, sich mit dem Thema JavaScript und SEO auseinanderzusetzen. Gleichzeitig sollten sich aber auch Entwickler im Klaren darüber sein, wie Suchmaschinen ihre auf JavaScript-Frameworks basierenden Seiten verarbeiten. Während sich viele Suchmaschinen auch 2019 noch schwertun, JavaScript-basierte Seiten zu verarbeiten, kommt Branchenprimus Google mittlerweile recht gut damit zurecht. Trotzdem gibt es noch zahlreiche Stolpersteine, die verhindern können, dass eine Seite gut gefunden wird. In diesem Beitrag wollen wir uns ansehen, welche Hindernisse JavaScript aus SEO-Perspektive mit sich bringt und mit welchen Best Practices man Google und Co. beim Crawlen und Indizieren unterstützen kann.

Wie funktioniert eine Suchmaschine?

Damit ein Dokument, also in der Regel eine Website, überhaupt in den Suchergebnissen aufscheinen kann, muss jede Suchmaschine das Dokument zunächst einmal finden und anschließend den Inhalt verstehen. Im ersten Schritt geht es also darum, einen Überblick über möglichst alle verfügbaren Dokumente zu bekommen. Ein Crawler, etwa der Google Bot, tut dazu im Prinzip nichts anderes, als allen URLs zu folgen und so ständig neue Seiten zu entdecken.

Landet der Crawler auf einem URL, wird zunächst einmal das HTML-Dokument heruntergeladen und der Quellcode nach grundsätzlichen Informationen einerseits und Links zu weiteren URLs andererseits durchsucht. Metainformationen wie das Robots-Meta-Tag oder das Canonical-Tag geben Auskunft darüber, wie die Seite grundsätzlich zu verarbeiten ist. Den gefundenen Links kann der Crawler weiter folgen.

Dazu schickt der Crawler die HTML-Datei und alle Ressourcen an den Indexer, in Googles Fall ist das Caffeine. Der Indexer rendert das Dokument und kann dann die Inhalte der Webseite indizieren. Anschließend sorgt der Algorithmus dafür, dass die relevantesten Dokumente für treffende Suchanfragen gefunden werden können.

Kommt jetzt aber JavaScript zum Einsatz, um das DOM (Document Object Model) erst clientseitig, also im Browser, fertig zu rendern, findet der Crawler beim Besuch eines URLs ein HTML-Dokument, das vereinfacht so aussieht, wie in Listing 1 dargestellt.

Listing 1: HTML-Element

Während beim...

Entwickler Magazin
SEO-optimierte JavaScript-Seiten erstellen

Moderne JavaScript-Frameworks und SEO

Historisch gesehen hatten Suchmaschinen mit der Indexierung von Inhalten, die per JavaScript geladen werden, immer große Probleme und haben sie zum Teil immer noch. Kein Wunder also, dass viele SEO-Verantwortliche JavaScript lange fürchteten wie der Teufel das Weihwasser. Es gibt aber Lösungen für das Problem.

Daniel Marx


Mit der immer stärkeren Verbreitung von modernen JavaScript-Frameworks wie Angular, React oder Vue.js kommt man heute in der SEO kaum mehr daran vorbei, sich mit dem Thema JavaScript und SEO auseinanderzusetzen. Gleichzeitig sollten sich aber auch Entwickler im Klaren darüber sein, wie Suchmaschinen ihre auf JavaScript-Frameworks basierenden Seiten verarbeiten. Während sich viele Suchmaschinen auch 2019 noch schwertun, JavaScript-basierte Seiten zu verarbeiten, kommt Branchenprimus Google mittlerweile recht gut damit zurecht. Trotzdem gibt es noch zahlreiche Stolpersteine, die verhindern können, dass eine Seite gut gefunden wird. In diesem Beitrag wollen wir uns ansehen, welche Hindernisse JavaScript aus SEO-Perspektive mit sich bringt und mit welchen Best Practices man Google und Co. beim Crawlen und Indizieren unterstützen kann.

Wie funktioniert eine Suchmaschine?

Damit ein Dokument, also in der Regel eine Website, überhaupt in den Suchergebnissen aufscheinen kann, muss jede Suchmaschine das Dokument zunächst einmal finden und anschließend den Inhalt verstehen. Im ersten Schritt geht es also darum, einen Überblick über möglichst alle verfügbaren Dokumente zu bekommen. Ein Crawler, etwa der Google Bot, tut dazu im Prinzip nichts anderes, als allen URLs zu folgen und so ständig neue Seiten zu entdecken.

Landet der Crawler auf einem URL, wird zunächst einmal das HTML-Dokument heruntergeladen und der Quellcode nach grundsätzlichen Informationen einerseits und Links zu weiteren URLs andererseits durchsucht. Metainformationen wie das Robots-Meta-Tag oder das Canonical-Tag geben Auskunft darüber, wie die Seite grundsätzlich zu verarbeiten ist. Den gefundenen Links kann der Crawler weiter folgen.

Dazu schickt der Crawler die HTML-Datei und alle Ressourcen an den Indexer, in Googles Fall ist das Caffeine. Der Indexer rendert das Dokument und kann dann die Inhalte der Webseite indizieren. Anschließend sorgt der Algorithmus dafür, dass die relevantesten Dokumente für treffende Suchanfragen gefunden werden können.

Kommt jetzt aber JavaScript zum Einsatz, um das DOM (Document Object Model) erst clientseitig, also im Browser, fertig zu rendern, findet der Crawler beim Besuch eines URLs ein HTML-Dokument, das vereinfacht so aussieht, wie in Listing 1 dargestellt.

Listing 1: HTML-Element

Während beim...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang