Eine kurze Diskussion über vier Lösungen für Vue Single Page SEO

Wie wir alle wissen, ist die Vue SPA-Einzelseitenanwendung nicht SEO-freundlich. Natürlich gibt es entsprechende Lösungen. Bei der Suche nach Informationen gibt es wahrscheinlich die folgenden 4 Methoden. (Ich habe nur die erste und dritte Option verwendet)

1.Bereitstellung der serverseitigen Rendering-Anwendung von Nuxt (SSR-Server-Rendering)

Informationen zum Server-Rendering: Laut der offiziellen Vue-Website gibt es Anforderungen an die Vue-Version und den Server, die die Node.JS-Umgebung unterstützen müssen.
Die Nachteile der Verwendung von SSR:
Aufgrund von Entwicklungsbeschränkungen kann browserspezifischer Code nur in bestimmten Lebenszyklus-Hooks verwendet werden. Einige externe Bibliotheken erfordern möglicherweise eine spezielle Verarbeitung, um in serverseitig gerenderten Anwendungen ausgeführt zu werden.
Die Umgebungs- und Bereitstellungsanforderungen sind höher und es ist eine Node.js-Server-Betriebsumgebung erforderlich.
Bereiten Sie sich bei hohem Datenverkehr bitte auf eine entsprechende Serverauslastung vor und wenden Sie Caching-Strategien mit Bedacht an.

Vorteile:

Bessere SEO, da Suchmaschinen-Crawler die vollständig gerenderte Seite direkt anzeigen können;
Schnellere Bereitstellung von Inhalten, insbesondere bei langsamen Netzwerken oder auf langsamen Geräten.

Nachteile: (Fallstricke, die während der Entwicklung auftreten)

1. Zwei Ausführungsumgebungen für einen Codesatz verursachen verschiedene Probleme. Wenn beispielsweise auf der Serverseite kein Fenster oder Dokumentobjekt vorhanden ist, besteht die Lösung darin, ein Urteil hinzuzufügen und es nur auszuführen, wenn es sich um die Clientseite handelt:

if (Prozess.Browser) {
 konsole.log(Fenster);
}

Um NPM-Pakete mit DOM-Operationen zu referenzieren, wie z. B. WowJS, können Sie die Importmethode nicht verwenden. Verwenden Sie stattdessen:

if (Prozess.Browser) {
  var { WOW } = erfordern('wowjs');
  erfordern('wowjs/css/libs/animate.css');
 }

2.Nuxt asyncData-Methode, ruft Daten vor dem Initialisieren der Seite ab, ist jedoch nur auf Aufrufe von Seitenkomponenten beschränkt:

// Mehrere Schnittstellen gleichzeitig laden:
 async asyncData ({ App, Abfrage }) {
 lass [resA, resB, resC] = warte auf Promise.all([
  app.$axios.get('/api/a'),
  app.$axios.get('/api/b'),
  app.$axios.get('/api/c'),
  ])
   
  zurückkehren {
  DatenA: resA.data,
  DatenB: resB.data,
  DatenC: resC.Daten,
  }
 }

3. Wenn Sie die v-if-Syntax verwenden, kann bei der Onlinebereitstellung auch dieser Fehler auftreten:

Fehler beim Initialisieren der App DOMException: „appendChild“ konnte auf „Node“ nicht ausgeführt werden: Dieser Knotentyp unterstützt diese Methode nicht.
bei Object.We [als appendChild]

Gemäß Problem 1552 auf GitHub Nuxt müssen Sie die Syntax von v-if in v-show ändern.

2. Statische Nuxt-Anwendungsbereitstellung

Wenn Nuxt.js statische Pakete generiert, werden dynamische Routen ignoriert.

-| Seiten/
---| index.vue
---| Benutzer/
-----| _id.vue

Um statische Seiten mit dynamischem Routing zu generieren, müssen Sie die Werte der dynamischen Routing-Parameter angeben und sie im Routen-Array konfigurieren.

// nuxt.config.js
modul.exporte = {
 erzeugen:
 Routen: [
  '/Benutzer/1',
  '/Benutzer/2',
  '/Benutzer/3'
 ]
 }
}

Führen Sie das Paket aus und Sie können die gepackte Seite sehen.
Aber was sollen wir tun, wenn der Wert des dynamischen Routing-Parameters dynamisch und nicht fest ist?
Verwenden Sie eine Funktion, die einen Promise-Objekttyp zurückgibt;
Verwenden Sie eine Rückruffunktion, deren Rückruf callback(err, params) ist.

// nuxt.config.js
Axios von „Axios“ importieren
 
Standard exportieren {
 erzeugen:
 Routen: Funktion () {
  returniere axios.get('https://my-api/users')
  .then((res) => {
  return res.data.map((Benutzer) => {
   zurückkehren {
   Route: '/users/' + Benutzer-ID,
   Nutzlast: Benutzer
   }
  })
  })
 }
 }
}

Jetzt können wir wie folgt auf die Nutzlast von /users/_id.vue zugreifen:

async asyncData ({ Parameter, Fehler, Nutzlast }) {
 if (Nutzlast) return { Benutzer: Nutzlast}
 sonst return { Benutzer: warte auf backend.fetchUser(params.id) }
}

Wenn Ihr dynamisches Routing viele Parameter umfasst, z. B. Produktdetails, kann die Anzahl Tausende oder Zehntausende betragen. Es wird eine Schnittstelle benötigt, um alle IDs zurückzugeben und diese dann beim Verpacken zu durchlaufen und lokal zu verpacken. Wenn ein Produkt geändert oder aus den Regalen genommen wird, muss es erneut verpackt werden. Wenn die Menge groß ist, ist das Verpacken auch sehr langsam, was sehr unrealistisch ist.

Vorteile:

• Reine statische Dateien, superschnelle Zugriffsgeschwindigkeit;
• Im Vergleich zu SSR gibt es keine Probleme mit der Serverlast.
• Statische Webseiten sind weniger anfällig für Hackerangriffe und sicherer.
  

unzureichend:

• Dies ist nicht anwendbar, wenn viele dynamische Routing-Parameter vorhanden sind.
  

3. Vorrendern des Prerender-Spa-Plugins

Wenn Sie es nur verwenden, um die SEO einiger Marketingseiten zu verbessern (z. B. /, /about, /contact usw.), benötigen Sie wahrscheinlich ein Vorrendering. Anstatt einen Webserver zum dynamischen Kompilieren von HTML im laufenden Betrieb zu verwenden, werden beim Prerendering zur Build-Zeit einfach statische HTML-Dateien für bestimmte Routen generiert. Der Vorteil besteht darin, dass sich das Vorrendern einfacher einrichten lässt und Sie Ihr Frontend als vollständig statische Site bereitstellen können.

$ cnpm installiere Prerender-Spa-Plugin --save

Vue CLI 3 vue.config.js-Konfiguration:

const PrerenderSPAPlugin = erforderlich('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('Pfad');
modul.exporte = {
 konfigurierenWebpack: config => {
  wenn (Prozess.env.NODE_ENV !== 'Produktion') zurückgeben;
  zurückkehren {
   Plugins: [
    neues PrerenderSPAPlugin({
     // Der Pfad der generierten Datei kann auch mit dem von webpakc gepackten Pfad übereinstimmen.
     //Der folgende Satz ist sehr wichtig! ! !
     // Dieses Verzeichnis kann nur eine Ebene haben. Wenn die Verzeichnisebene größer als eine Ebene ist, wird während der Generierung keine Fehlermeldung angezeigt und es bleibt einfach beim Vorrendern hängen.
     staticDir: Pfad.join(__dirname,'dist'),
     // Entsprechend Ihrer eigenen Routing-Datei. Wenn beispielsweise a Parameter hat, müssen Sie es als /a/param1 schreiben.
     Routen: ['/', '/Produkt', '/Über'],
     // Das ist sehr wichtig. Wenn dieser Abschnitt nicht konfiguriert ist, wird keine Vorkompilierung durchgeführtrenderer: new Renderer({
      injizieren: {
       foo: "Leiste"
      },
      kopflos: falsch,
      // In main.js, document.dispatchEvent(new Event('render-event')), sollten die Ereignisnamen der beiden übereinstimmen.
      renderAfterDocumentEvent: 'Renderereignis'
     })
    }),
   ],
  };
 }
}

Fügen Sie in main.js Folgendes hinzu:

neuer Vue({
 Router,
 rendern: h => h(App),
 montiert () {
 document.dispatchEvent(neues Ereignis('Render-Ereignis'))
 }
}).$mount('#app')

Hinweis: Modus: „History“ muss im Router eingestellt sein.
Sie können die Dateien nach dem Verpacken sehen und den Ordner/index.html verpacken, zum Beispiel: about => about/index.html, das HTML-Inhalte enthält.

Vorteile:

Die Änderungen sind gering, führen Sie einfach ein Plug-In ein und fertig;

unzureichend:

Dynamisches Routing kann nicht verwendet werden;
Es ist nur für Projekte mit einer geringen Seitenzahl geeignet. Bei Hunderten von Seiten wird das Verpacken sehr langsam sein.

4. Phantomjs kümmert sich um Crawler

Phantomjs ist ein Headless-Browser, der auf dem WebKit-Kernel basiert. Das heißt, er hat keine Benutzeroberfläche (UI). Es handelt sich also nur um einen Browser, aber menschliche Vorgänge wie Klicken und Umblättern müssen per Programmierung implementiert werden.

Obwohl „PhantomJS die Einstellung der Entwicklung angekündigt hat“, hat es die SEO-Anforderungen für Vue bereits erfüllt.

Diese Lösung ist eigentlich ein Bypass-Mechanismus. Das Prinzip besteht darin, durch die Nginx-Konfiguration zu bestimmen, ob es sich bei der Quell-UA des Zugriffs um einen Crawler-Zugriff handelt. Wenn dies der Fall ist, wird die Crawler-Anforderung der Suchmaschine an einen Knotenserver weitergeleitet, und dann wird PhantomJS verwendet, um das gesamte HTML zu analysieren und an den Crawler zurückzugeben.
So installieren Sie PhantomJS global, drücken es lokal aus und testen es:

$ phantomjs spider.js 'www.baidu.com'

Wenn Sie eine Menge HTML in der Befehlszeile sehen, herzlichen Glückwunsch, Sie haben PhantomJS gemeistert.

Nach dem Starten oder Verwenden von Postman zum Hinzufügen des User-Agent-Werts zu Baiduspider im Anforderungsheader ist der Effekt derselbe.

Bereitstellung und Start

So installieren Sie Node-, PM2-, Phantomjs- und Nginx-bezogene Konfigurationen online:

Upstream Spider_Server {
 Server Localhost:3000;
}
 
Server {
 hören Sie 80;
 Servername Beispiel.com;
  
 Standort / {
  Proxy_Set_Header Host $host:$Proxy_Port;
  Proxy_Set_Header X-Real-IP $Remote_Addr;
  proxy_set_header X-Weitergeleitet-Für $proxy_add_x_forwarded_for;
 
  if ($http_user_agent ~* "Baiduspider|Twitterbot|Facebookexternalhit|Rogerbot|LinkedInbot|Embedly|Quora-Linkvorschau|ShowYouBot|OutBrain|Pinterest|SlackBot|VkShare|W3C_Validator|Bingbot|SosoSpider|Sogou Pic Spider|Googlebot|360Spider") {
  Proxy-Passwort http://Spider-Server;
  }
 }
}

Vorteile:

Der Projektcode muss überhaupt nicht geändert werden. Entwickeln Sie ihn einfach gemäß dem ursprünglichen SPA. Im Vergleich zur Entwicklung von SSR sind die Kosten nicht zu hoch.
Dies ist die beste Wahl für Projekte, die mit SPA entwickelt wurden.

unzureichend:

Für die Bereitstellung ist Knotenserver-Unterstützung erforderlich.
Der Crawler-Zugriff ist langsamer als der Zugriff auf Webseiten, da Ressourcen erst geladen werden, nachdem sie an den Crawler zurückgegeben wurden.
Wenn der Server böswillig simuliert, dass er in einer Schleife große Mengen crawlt, führt dies zu Problemen mit der Serverlast. Die Lösung besteht darin, festzustellen, ob die aufgerufene IP die IP des offiziellen Crawlers von Baidu ist.

Zusammenfassen

Wenn Sie eine große Website erstellen, z. B. ein Einkaufszentrum, zögern Sie nicht, direkt zum SSR-Server-Rendering zu wechseln. Natürlich warten entsprechende Fallstricke auf Sie. Wenn die Community reifer ist und Ihr Englisch besser ist, können alle Probleme gelöst werden.

Wenn es sich nur um ein persönliches Blog oder eine Unternehmenswebsite handelt, sind die anderen drei in Ordnung.

Damit ist dieser Artikel über die vier Lösungen für Vue Single-Page-SEO abgeschlossen. Weitere relevante Vue Single-Page-SEO-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!