Was ist Vue.JS?

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.

Was ist Vue.JS?

SSR oder Prerendering?

Icon

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.

Optimiertes Crawling
Icon

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.

SSR Vor- und Nachteile 
Icon

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.

Vorteile von Prerendering

Vue SEO-Herausforderungen

Client-seitiges Rendering
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
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
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

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:

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