Richtig SEO mit Vue JS

Ein nicht ganz einfaches Thema bei einer SPA (Single Page Applications) und deren Entwicklung ist die Suchmaschinenoptimierung (SEO) einer Vue JS App. Wir von vuejs-seminar.de nutzen zum Prüfen unserer SEO Leistung das Tool Seobility* um Local Based SEO, Keyword Optimierung, Konkurrenzanalyse usw. umzusetzen. Wenn Du Dich also fragst, wie Du SEO für eine Vue JS Single Page Application (SPA) optimieren kannst, gibt es einige Dinge, die Du beachten solltest.

Zum Thema Suchmaschinenoptimierung solltest Du zu allererst wissen, dass Suchmaschinen-Crawler die Webseiten durchsuchen, bevor sie in den Suchergebnissen angezeigt werden. Google hat vor sechs Jahren angekündigt, dass sie Javascript vor dem Crawlen ausführen. Das bedeutet, dass es keine Probleme gibt, wenn eine Seite auf der Serverseite oder auf der Clientseite gerendert wird. Dennoch gibt es einige Dinge, die man beachten sollte. Zum Beispiel ist Javascript interpretierbar, was bedeutet, dass die Seite nicht unbedingt korrekt gerendert wird, auch wenn Google es versteht. Und selbst wenn die Seite korrekt gerendert wird, bedeutet das nicht automatisch, dass sie in den Suchergebnissen gut platziert wird. Daher musst Du auch bei Vue JS-Anwendungen SEO betreiben und diese kontinuierlich überwachen.

Das Monitoring

Ein von mir empfohlenes Tool zur Überwachung Deiner SEO ist wie gesagt Seobility. Es ist neben Sistrix & co. das preiswerteste aber nicht weniger mächtige Tool. Vergiss aber nicht, dass Du bei der Entwicklung Deiner Vue JS SPA auch die klassischen SEO-Regeln beachten und optimieren musst, z.B. durch Keyword-Optimierung und technische Checks. Und um auf der sicheren Seite zu sein, empfehle ich, Server Side Rendering für den Content zu verwenden. So wird vermieden, dass die Anwendung falsch dargestellt und nicht korrekt indiziert wird.

Eine SPA wird beim Client gerendert

Es ist wichtig zu verstehen, dass eine SPA ihren Inhalt nur dann dynamisch rendert, wenn er benötigt wird, im Gegensatz zu klassischen Webseiten, die die gesamte Seite laden, wenn sie aufgerufen werden. Dein SEO- bzw. Keyword Monitoring Tool muss also mindestens mit einer vorhandenen Javascript Engine überprüfen. Der Seobility Crawler muss dazu auf Chrome (Javascript) umgestellt werden. Bei Sistrix heißt die Einstellung Javascript Crawler.

Und das ist zugleich das Interessante an der Fragestellung: Wie mache ich richtiges SEO mit Vue JS? Denn im Grunde liefert eine Single Page Application lediglich ein Seitenkonstrukt mit allen möglichen Inhalten und rendert dann je nach Bedarf dynamisch die Inhalte vom Server und nicht wie klassisch die komplette Seite direkt bei Aufruf.

Wie verhält sich Google?

Nachdem Suchmaschinen sogenannte Crawling Bots nutzen um die Webseiten zu durchforsten, beschränken wir uns auf die populärste Suchmaschine Google. Und hierzu wurde vor sechs Jahren von Google angekündigt, Javascript zu rendern bevor die Seite gecrawled wird. Durch hochwertige SEO-Tools wie z.B. Seobility* wird es dann möglich die Seitenstruktur wie Technik, Ladezeiten usw. zusätzlich zu protokollieren und einen umfassenden Report für Verbesserungen zu erhalten.

Der Googlebot beginnt seinen Crawling-Prozess, indem er eine Liste von URLs abruft, die von früheren Crawls gespeichert wurden und auch von Benutzern über die Google-Suche oder andere Google-Dienste gemeldet wurden. Sobald Googlebot eine Liste von URLs hat, beginnt es, jede dieser Seiten zu besuchen. Wenn der Bot eine Seite besucht, lädt er zunächst den HTML-Code der Seite herunter und analysiert ihn. Sprich: Der Code wird durch seine Javascript Engine “gejagt” und anschließend untersucht. Er sucht nach Links auf der Seite und folgt ihnen, um weitere Seiten zu finden. Wenn er eine neue Seite findet, wird sie zur Liste der URLs hinzugefügt, die gecrawlt werden müssen. Er analysiert auch die Struktur der Seite, um die Hierarchie der Inhalte zu verstehen und die Relevanz der Seite für bestimmte Suchanfragen zu bewerten. Daher zählen alle gängigen “SEO Vorschriften” auch für Vue JS Anwendungen.

Client Side Rendering und Server Side Rendering

Ob also nun eine Server Side Rendered Page mit dynamischem Javascript Inhalt oder eine SPA, welche Client seitig gerendert wird – der Google Crawlbot hat mit beidem keine Probleme. Denn, wie wir wissen, interpretiert der Bot den Quelltext und kann sowohl statischen Inhalt als auch dynamischen Inhalt verarbeiten. Allerdings gibt es Mythen die besagen, dass deine SPA schnell laden muss, da der Bot nicht ewig wartet. Was an Inhalt “irgendwann” mal kommt, wird eben nicht interpretiert. So einfach ist das.

Vorsicht!

Aber es muss nicht heißen, dass “nur” weil Google Javascript versteht und rendern kann, die Seite auch vollständig und fehlerfrei gerendert wird. Javascript ist im Grunde immer Interpretationssache. Dies bedeutet darüber hinaus auch nicht, dass wenn Google eine Seite korrekt und fehlerfrei rendern und somit interpretieren kann, diese auch top geranked wird (also Seite bzw. Platz 1, 2, …). Eine korrekt gerenderte Seite einer Single Page Application wird genauso “kritisch” behandelt vom Google Algorithmus wir eine normale Server Side Rendered Page (mit Javascript Applikationen).

SEO bleibt SEO

Bedeutet also nun, dass wir bei einer Vue JS SPA im Grunde zunächst nichts falsch machen uns aber den klassischen SEO Regeln unterwerfen müssen und mit SEO Tools wie Seobility* Keywords, technische Informationen usw. überprüfen und optimieren müssen. Ein Bestandteil der Ausgangsfrage nach S E O ist ja nicht ohne Grund: Suchmaschinen Optimierung. Es muss also auch bei Vue JS Anwendungen SEO betrieben werden und kontinuierlich gecheckt werden. Und je nach kompilierter ECMAScript bzw. Javascript Variante kann eine SPA durchaus fehlerhaft gerendert werden. Dies hätte zur Folge, dass eine Anwendung vom Suchmaschinenbot nicht korrekt indiziert werden kann.

Server Side Rendering für Content

Daher empfiehlt es sich um komplett auf der sicheren Seite zu sein, etwa folgendes Pattern zu nutzen:

1. api.application.com: gehostete API
2. app.application.com: SPA Einstiegspunkt (z.B. index.html und app.js)
3. www.application.com: Contentseiten für Suchmaschinenoptimierung

Empfohlenes Tool für SEO

Ein von mir empfohlenes Tool für die Kontrolle meines SEO ist an dieser Stelle das Tool von Seobility.