Ist Vue.js SEO-freundlich und hilft Nuxt.js bei der Optimierung Ihrer App?

Foto von NisonCo PR und SEO auf Unsplash

Möchten Sie, dass Ihre zukünftige Vue.js Web-App in den Suchergebnissen erscheint? Wenn ja, vergessen Sie nicht, dies von Anfang an zu Ihren Anforderungen zu zählen. In Anbetracht der SEO-Herausforderungen, mit denen alle Single-Page-Apps (SPAs) konfrontiert sind, sollten Sie die SEO-Freundlichkeit Ihrer Vue.js-App nicht als nachträglichen Gedanken behandeln. Das ist kein kleines Detail, das man später beheben kann, sondern ein Faktor, der die Entwicklung Ihrer App insgesamt bestimmen kann.

Das bedeutet nicht, dass Vue nicht gut für SEO ist. In der Tat bietet Vue.js Lösungen, die hervorragend für die Suchmaschinenoptimierung geeignet sind. Doch das sind keine Selbstverständlichkeiten. Stattdessen sollten Sie sich bewusst für die SEO-Optimierungstools von Vue entscheiden und verstehen, wie diese Ihren App-Tech-Stack, Ihre Architektur und Infrastruktur beeinflussen werden.

Schauen wir uns nun an, wie man Vue und SEO mit Hilfe von speziellen Vue-Modulen oder dem Nuxt.js-Framework zusammenbringen kann. Hierfür werden wir die Optionen von Vue für das In-App-Routing, die Verwaltung von Meta-Tags und das Rendering von Webseiten betrachten. Diese drei Aspekte Ihrer Vue-App sind zusammen entscheidend für den SEO-Erfolg.

*Scrollen Sie nach unten, um eine Zeitschätzung für das Hinzufügen von NUXT und SSR zu einer bestehenden Vue-App zu sehen. Übrigens, unsere eigene Website ist mit Vue gebaut und wir machen Nuxt.js SEO-Optimierung. Wenn Sie diesen Artikel über die Suche gefunden haben, bedeutet das, dass wir es richtig machen.

Vue Router und SPA URLs

Die Navigation innerhalb einer Vue SPA funktioniert anders als bei einer statischen Website. Anstatt verschiedene HTML-Seiten unter verschiedenen URLs aufzurufen, wechseln die Nutzer zwischen verschiedenen App-Ansichten, die sich innerhalb derselben HTML-Seite dynamisch ändern. Vue-Routing ermöglicht die Zuordnung bestimmter App-Ansichten zu verschiedenen URLs.

Standardmäßig fügt der Vue-Router Fragment-Identifikatoren (eingeleitet durch ein Rautezeichen #) zur Homepage-URL hinzu, um zwischen den Ansichten zu wechseln, ohne die Seite zu aktualisieren. Diese Methode eignet sich nicht für SEO, da Hash-URLs von Suchmaschinen nicht indiziert werden.

Für SEO-Zwecke kann Vue Router vom Hash- zum History-Modus umgeschaltet werden. Wenn Sie in diesem Modus arbeiten, wird die HTML 5 History API verwendet und normale URLs für jede App-Ansicht generiert. In diesem Fall können alle URLs Ihrer App problemlos in Suchmaschinen indexiert und von sozialen Medien und anderen Websites aus verlinkt werden.

Keine dieser URLs passt jedoch zu einer statischen HTML-Seite. Beim direkten Zugriff auf diese URLs würde ein 404-Fehler zurückgegeben. Um dies zu vermeiden, müssen Sie, wenn Sie den Vue-Router in den History-Modus schalten, Ihren Server zusätzlich so konfigurieren, dass er eine Catch-All-Fallback-Route für alle URLs hat.

Vue SEO und umfangreiche Metadaten

Gemäß den SEO-Best Practices benötigt jede URL Ihrer App einen einzigartigen Satz von Meta-Tags für Titel und Beschreibung, um in den Suchergebnissen einen aussagekräftigen Snippet zu erhalten. Standardmäßig verfügt Ihre Vue-App jedoch über einen einzigen Satz von Meta-Tags für alle URLs. Diese Meta-Tags ändern sich nicht, wenn JavaScript neue App-Ansichten im "body"-Tag der Seite rendert, da Meta-Tags zum statischen "head"-Tag der HTML-Seite Ihrer App gehören.

Vue schlägt vor, das vue-meta-Plugin zu verwenden, um die standardmäßigen Meta-Tags dynamisch gegen eindeutige zu tauschen, wenn sich die App-Ansichten und URLs ändern. Das Plugin liefert jedoch nur eine weitere Zeichenfolge von JavaScript-Code, der nach dem Laden der HTML-Seite clientseitig gerendert wird. Das bedeutet, dass die Suchmaschinen-Crawler zuerst die HTML-Seite mit dem allgemeinen Titel und der Beschreibung sehen und erst nachdem (und wenn) sie Ihr JavaScript ausführen, die richtigen Snippets für Ihre Seiten abrufen.

Vue SEO und Server-seitiges Rendering (SSR)

Alle SEO-bezogenen Probleme von Vue-Apps sind auf das clientseitige Rendering zurückzuführen, das eine lange "Zeit bis zum Inhalt" hat. Leider können die Bots der Suchmaschinen und die Agenten der sozialen Netzwerke dynamische JavaScript-Seiten immer noch nicht so gut verarbeiten wie statisches HTML. Das bedeutet, dass Sie, wenn SEO für Ihre Vue-Anwendung wichtig ist, einen zusätzlichen Schritt unternehmen und serverseitiges Rendering implementieren sollten.

Um die Vorteile von SSR zu nutzen, müssen Sie eine isomorphe (universelle) Vue.js-App mit einem Node.js-Server im Backend erstellen. Node.js führt Ihren JavaScript-Code serverseitig aus und sendet die abgerufenen HTML-Seiten an Browser und Crawler. Infolgedessen werden Suchmaschinen-Bots bei jeder App-Ansicht auf Inhalte und Meta-Tags zugreifen, unabhängig von ihrer Fähigkeit, JavaScript zu verarbeiten.

Obwohl die Entwicklung und Pflege einer isomorphen App komplexer ist, können Sie durch die Isomorphie Ihrer App deren SEO-Freundlichkeit garantieren. Der einfachste Weg, SSR in einer Vue-App zu implementieren, ist die Verwendung des Nuxt.js-Frameworks.

Nuxt.js vs Vue für SEO-freundliche Anwendungen

Obwohl Ihre Entwickler Vue selbst anpassen können, um eine isomorphe App zu erstellen, kann Nuxt.js ihre Aufgabe vereinfachen. Dieses Framework baut auf Vue.js auf, um die Entwicklung von SSR-Apps zu vereinfachen. Es bietet die richtige Konfiguration der Vue-Bibliotheken und eine effiziente App-Struktur out-of-the-box, was eine Menge Zeit spart.

Nuxt.js SPA hat einen Node.js-Server unter der Haube für Echtzeit-JavaScript-Rendering und enthält Module und Plugins, die für die Erstellung von SEO-freundlichen Vue-Apps erforderlich sind:

• Vue-Router arbeitet im History-Modus, um SEO-freundliche URLs zu erstellen und eine einwandfreie In-App-Navigation einzurichten.

• Vue-meta Plugin, um einzigartige Meta-Tags für verschiedene App-Ansichten zu generieren und korrekte Snippets in den Suchergebnissen für alle URLs in der App zu erhalten.

• Webpack mit vue-loader und babel-loader, um Code zu bündeln, aufzuteilen und zu minimieren, damit er schnell geladen wird und die Zeit bis zur Interaktivität (TTI) der App minimiert wird.

Obwohl Nuxt alle Seiten serverseitig rendert, bedeutet das nicht, dass sie an Interaktivität verlieren. Er verwendet Vue Hydration, um das HTML reaktiv zu machen, nachdem es in den Browser geladen wurde. Die Interaktion zwischen der App und dem Nutzer erfolgt in drei Phasen:

• Schritt 1. Node.js erhält eine Anfrage vom Browser, holt eine richtige HTML-Seite und sendet sie zurück an den Browser.

• Schritt 2. Der Browser zeigt die HTML-Seite mit statischem Inhalt an und startet den Hydrierungsprozess, bei dem Vue das Seitenmarkup für die Benutzer interaktiv macht.

• Schritt 3. Der Browser ermöglicht es den Nutzern, durch interne Links der App zu navigieren, ohne die Seite aktualisieren zu müssen.

Zusätzlich zur Lösung der zentralen SEO-Herausforderungen von Vue bietet Nuxt Tools zur Erstellung von Sitemaps, zur Durchführung von 301-Weiterleitungen, zum Abrufen von Metadaten für Social Sharing (Twitter und Open Graph) sowie zur Integration von Google Analytics. Diese kleinen, aber wichtigen Dinge ermöglichen es, die allgemeinen technischen SEO-Best-Practices bei der Erstellung von Vue-Anwendungen zu befolgen.

Abgesehen davon bietet Nuxt einen Static Site Generator für das Pre-Rendering von statischen HTML-Seiten, der als Alternative zu NUXT SSR dient. Diese Funktion kann für kleinere SPAs mit nur wenigen URLs, die SEO erfordern, nützlich sein. Die Nuxt.js-Optimierung ermöglicht es Ihnen, eine Reihe von SEO-freundlichen HTML-Seiten während der Erstellungszeit zu generieren und sie als statische Website zu verwenden, die mit Ihrer dynamischen App verbunden ist, die clientseitiges Rendering verwendet.

Hinzufügen von Nuxt.js zur Optimierung einer Vue-App für SEO

Wir haben Alex Bilyk, Frontend-Entwickler bei Proxify, über die Besonderheiten der Optimierung von Vue-Apps für Suchmaschinen befragt. Er teilte seine jüngsten Erfahrungen mit dem Hinzufügen von Nuxt.js SEO zu einer laufenden Vue-App und erzählte uns, was es braucht, um solche Änderungen in einem Projekt einzuführen.

Die Vue.js SPA des Kunden wurde von den Suchmaschinen nicht richtig gecrawlt und indiziert, weil sie ursprünglich ohne SEO im Hinterkopf erstellt wurde. Sie beschlossen, einen Entwickler über Proxify zu beauftragen, die SEO-Probleme durch die Einführung von SSR in ihre SPA mit Nuxt.js zu lösen.

Um das Problem zu lösen, musste Alex die folgenden Aufgaben erledigen:

• Analysieren Sie die Architektur und Funktionalität der App. (3h).
• Ändern Sie die App-Struktur. (3h) Erstellen Sie eine neue App-Struktur für Nuxt.js mit Layouts, Seiten, Plugins, Modulen und Middleware-Verzeichnissen auf der Stammebene des Projekts. Fügen Sie eine Datei "nuxt.config.js" hinzu und ändern Sie die Befehle in der Datei "package.json". Bereiten Sie sich darauf vor, unbrauchbare Plugins zu entfernen und die benötigten Plugins in das Projekt einzubauen.
• Entfernen Sie die Dateien main.js und app.vue und ändern Sie die Logik entsprechend den Anforderungen von Nuxt.js. (8h) Bereiten Sie Module und Plugins für das Projekt vor und erstellen Sie einen speziellen Verwendungszweck für diese (optional kann dies ein Shop, eine UI-Bibliothek oder ein HTTP-Client sein, z. B. Axios). Refactoring der Pfade zu Bildern und Hintergründen.
• Neues Routing von Grund auf einrichten. (7h) Entfernen Sie die Vue-Router-Bibliothek und ihre Konfiguration. Erstellen Sie ein Verzeichnis "Seiten", das App-Ansichten und Routen enthält. Passen Sie die Routen für verschachtelte Seiten an (z. B. ändern Sie die URL von "services/transportation" in "/pages/services/slug.vue". Ersetzen Sie RouterLink durch die Komponente NuxtLink für die Darstellung interner Links.
• Einrichten von asyncData-Hooks zum Abrufen von Daten aus APIs. (4h)
• Aktualisierung der Konfiguration für mehrere Sprachen. (3h) Installieren Sie das Modul "nuxt-i18n", um die Lokalisierung zu verwalten.
• Anpassung von Animationen und Fensterkontakten. (4h) Ändern Sie die Lebenszyklusmethode created in beforeMount und/oder mounted.
• Fügen Sie eine SEO-Konfiguration für die gesamte App und jede einzelne Seite hinzu. (8h) Verwenden Sie die Nuxt.js Methoden: Meta-Tags, Titel, Beschreibung, Schlüsselwörter, Favicon. Aktualisierung des HTML-Layouts mit semantischen Tags.

Alex brauchte also eine Woche, um SSR in das Projekt zu implementieren und sicherzustellen, dass der Google-Crawler die App korrekt verarbeiten kann.

"Ich kann gar nicht genug betonen, wie wichtig es ist, in den Projektanforderungen anzugeben, dass Ihre SPA SEO-freundlich sein sollte. Hätten meine Kunden NUXT von Anfang an eingesetzt, hätten sie eine Menge Geld sparen können. Die Behandlung von SEO als nachträglicher Gedanke führte dazu, dass wir einen Entwickler für eine Woche engagierten und tiefgreifende Änderungen am Projekt vornahmen." - Alex Bilyk, Frontend-Entwickler

Vue-Entwickler für Ihr Projekt

Wenn Sie eine SEO-freundliche Vue-App erstellen wollen, brauchen Sie Vue-Entwickler mit einer nachgewiesenen Erfolgsbilanz. Unser Talent-Matching-Netzwerk kann Ihnen helfen, sie zu finden. Bei Proxify verwenden wir Vue.js und Nuxt.js, um unsere eigene App zu entwickeln und können Sie mit geprüften Spezialisten in Verbindung bringen. Schicken Sie uns eine Talentanfrage und lernen Sie Ihren perfekten Kandidaten innerhalb der nächsten zwei Wochen kennen. Und vergessen Sie nicht, dass Sie bei Proxify Senior-Entwickler zu Preisen ab 29 €/Std. in Ihr Team aufnehmen können.

Quick Vue.js SEO Q&A

Sie fragen, wir antworten.

Ist Vue.js gut für SEO?

Vue.js hat Lösungen, die gut für SEO funktionieren, aber man bekommt sie nicht standardmäßig. Ihre Entwickler sollten wissen, wie man Vue SEO Module (vue-meta, vue-router, Webpack, Nuxt.js framework) verwendet und die App-Architektur und -Infrastruktur entsprechend aufbaut.

Wie fügt man Meta-Tags zu einer Vue.js-App hinzu?

Standardmäßig hat eine Vue-App einen einzigen Satz von Meta-Tags für alle URLs, die sich im statischen < head > -Tag der HTML-Shell-Seite Ihrer App befinden. Um einzigartige Snippets für jede URL zu haben, sollten Sie das vue-meta Plugin verwenden. Es tauscht dynamisch die standardmäßigen Meta-Tags gegen eindeutige aus, wenn eine App-Ansicht für jede URL gerendert wird. Wenn Sie Nuxt.js verwenden, wird dies serverseitig geschehen. In diesem Fall wird Googlebot Ihre App-Ansichten als statische HTML-Seiten mit korrekten Meta-Tags betrachten.

Ist Nuxt.js gut für SEO?

Nuxt hilft Entwicklern, die zentralen Vue-SEO-Herausforderungen durch den Aufbau von SSR-Vue-Apps zu lösen. Das Framework bietet die richtige Konfiguration von Vue-Bibliotheken und eine effiziente Struktur für isomorphe Anwendungen. Außerdem gibt es Tools für die Erstellung von Sitemaps, 301-Weiterleitungen, das Abrufen von Metadaten für Social Sharing (Twitter und Open Graph) und die Integration von Google Analytics. Abgesehen von der SSR-Lösung hat Nuxt einen Static Site Generator für die Vorberechnung von statischen HTML-Seiten für kleine Vue-Anwendungen, die SEO benötigen.

Brauchen Sie Nuxt.js?

Entwickler können eine SEO-freundliche Vue-App ohne das NuxtJS-Framework erstellen. Wenn das Projekt jedoch groß ist und SSR erfordert, wird NuxtJS die Aufgabe vereinfachen. Durch die Bereitstellung von SEO-kritischen Modulen und Plugins, einer korrekten App-Struktur und eines Node.js-Servers "out-of-the-box", wird Nuxt Ihren App-Entwicklungszyklus erheblich beschleunigen.