Was ist Vue.JS?

Eine Website zu bauen ist eine Sache, aber Besucher zu bekommen eine ganz andere.
Vue.JS ist ein progressives JavaScript-Framework zur Erstellung von Benutzeroberflächen.

Es funktioniert, indem Sie Ihre Website mit wiederverwendbaren Komponenten aufbauen, die Ihre Daten in JavaScript kapseln und mit einer HTML-Vorlage verbinden.

Ähnlich wie React arbeitet Vue innerhalb eines vrtuellen DOM. Was auch immer Sie in Vue an HTML schreiben, wird in diesem DOM kompiliert, wenn die Komponente gerendert wird.

Einige der Stärken von Vue

Schnelles Wachstum

Vue wurde von einem ehemaligen Google-Mitarbeiter entwickelt, der an der Entwicklung von Angular beteiligt war. Obwohl es nicht die weite Verbreitung von Angular oder React hat, ist Vue eines der am schnellsten wachsenden JavaScript-Frameworks. Zu den Unternehmen, die Vue verwenden, gehören Apple, Nintendo und Trustpilot.

Leicht zu erlernen

Vue ist vielseitig, testbar und einfach zu warten. Es ist auch einfach zu benutzen und zu lernen und produziert sauberen, lesbaren Code. Es ist ideal für kleine Teams oder kleine Projekte. Leider hat es einige SEO-Nachteile.

SSR oder Prerendering?

Optimiertes Crawling

Es gibt zwei Möglichkeiten, um Ihre Vue-Website richtig zu crawlen und zu indizieren: Server-seitiges Rendering (SSR) oder die Verwendung eines Prerendering-Plugins. Vue hat den Vorteil gegenüber Angular und React, wenn es um SSR-Unterstützung geht, weil es eine ausführliche Dokumentation bereitstellt, die Ihnen sagt, wie man das macht.

SSR Vor- und Nachteile

SSR ist auch mit erheblichen Nachteilen verbunden. Es ist viel komplizierter einzurichten, erfordert mehr Arbeit und höhere Server-Wartungskosten.

SSR enthält einige Leistungsverbesserungen wie schnelleres Laden der Seite und erstes Malen von Inhalten. Allerdings sind einige sichtbare Elemente wie Schaltflächen oder Widgets möglicherweise nicht interaktiv, während die Seite noch geladen wird, was sich negativ auf das Benutzererlebnis auswirken kann.

Vorteile von Prerendering

Einfacher und schneller ist das Prerendering Ihrer Webseiten mit Prerender®.

Es bietet eine SEO-Lösung für Single-Page-Apps, indem es nahtlos mit diesen kleineren Apps und Websites zusammenarbeitet, die typischerweise mit Vue entworfen werden. Die einfache Lösung ist meist die beste.

Vue SEO-Herausforderungen

Client-seitiges Rendering

Vue verwendet standardmäßig das clientseitige Rendering, genau wie Angular und React, um Single-Page-Anwendungen zu erstellen. SPAs sind nicht gut für SEO, da sie Seiten dynamisch mit JavaScript rendern.

Schwierigkeiten bei der Indexierung

Die Web-Crawler von Suchmaschinen müssen in der Lage sein, Ihr JavaScript auszuführen, um Ihre Website vollständig zu crawlen und zu indizieren. Google behauptet, dass es in der Lage ist, JavaScript auszuführen, aber dies ist nicht bewiesen.

Fehlender organischer Traffic

Andere Suchmaschinen wie Bing, Yandex, DuckDuckGo können keine JavaScript-basierten Websites indizieren. Das bedeutet, dass Sie eine Menge Suchverkehr verpassen könnten.

Häufig gestellte Fragen

Warum ist Vue's Client-Side Rendering Standard schlecht für SEO?

Wie andere JavaScript-Frameworks sind alle mit Vue erstellten Websites standardmäßig auf clientseitiges Rendering (CSR) eingestellt. Leider bedeutet dies, dass Googlebot beim Crawlen nur eine leere Seite sieht, also keinen Inhalt zum Indizieren. Um Ihre Seite SEO-freundlicher zu machen, müssen Sie entweder serverseitiges Rendering (SSR) implementieren, was kompliziert zu implementieren und kostspielig zu warten sein kann, oder eine dynamische Rendering-Lösung wie Prerender®.

Ist dynamisches Rendering besser als serverseitiges Rendering?

Dynamisches Rendering ist mit vielen positiven Ergebnissen verbunden, die die Benutzerfreundlichkeit, die Suchmaschinenoptimierung und die allgemeine Sichtbarkeit Ihrer Website verbessern können.

Macht Vue.JS SEO-freundlich: Genießen Sie die Performance- und UX-Vorteile von JavaScript SPAs und machen Sie die Seiten Ihrer Website gleichzeitig leicht crawlbar
Schnellere Indexierung und Suchergebnisse: mehr Seiten Ihrer Website werden in kürzerer Zeit indexiert, so dass sie um wertvollen Platz bei Google konkurrieren können
Erhöhter organischer Traffic: Je schneller Ihre Inhalte Rankings erreichen, desto schneller können Sie organischen Traffic - und ROI! - auf Ihrer Website

Wird Google denken, dass ich getarnt bin?

Nein. Dynamisches Rendering ermöglicht es Ihnen zwar, Inhalte für verschiedene Zielgruppen auf unterschiedliche Art und Weise bereitzustellen, aber der Prozess liefert immer noch denselben Inhalt für alle. Dynamisches Rendering ist der Ansatz, den Google für die Umwandlung von dynamischen Inhalten in statische Inhalte empfiehlt, und wir sind stolz darauf, dass Prerender® eine Lösung ist, die Google in seiner Dokumentation ausdrücklich erwähnt.

Ist Prerender® einfach zu installieren?

Ja! Prerender® ist nicht nur eine zuverlässige Lösung, mit der Sie Kosten und unzählige Arbeitsstunden einsparen können, es ist auch unglaublich einfach zu installieren. Der Prozess wird in vier Hauptschritten durchgeführt, die hier im Detail beschrieben werden:

Identifizieren Sie Ihren Techstack und Ihre bevorzugte Installationsmethode
Installieren Sie den für Ihren Tech-Stack geeigneten Middleware-Codeblock
Test
Konfigurieren und Anpassen