Detaillierte Erläuterung der SEO-Optimierungsmethode für Vue-Entwicklungswebsites

Da der Datenbindungsmechanismus von Vue und anderen js zum Anzeigen von Seitendaten verwendet wird, ist das vom Crawler erhaltene HTML die Modellseite und nicht die gerenderte Seite mit den endgültigen Daten, und die Suchmaschine geht nicht zurück, um das angeforderte js auszuführen. Alle Vue-Projekte verwenden Ajax, um Daten anzufordern, und der Engine-Crawler kann beim Aufrufen der Seite keinen Textinhalt abrufen. Derzeit verwenden die meisten Lösungen kein Ajax zum Rendern von Daten, sondern serverseitiges Rendering, das sogenannte SSR.
Die aktuelle Lösung auf Basis von Vue ist Nuxt.js. Es gibt auch eine React-Version von Nuxt.js. Serverseitiges Rendering besteht also darin, zu versuchen, Daten auf der Seite zu haben, bevor der Server sie an den Browser sendet, damit der Crawler sie crawlen kann.

Methode 1: Verwenden Sie das Prerender-Spa-Plugin, um Einzelseitenanwendungen auf mehrere Seiten zu packen

Nachdem das traditionelle Vue mithilfe des Vue-CLI-Gerüsts erstellt wurde, wird mit „npm run build“ der endgültige HTML-Code verpackt und generiert, der online gestellt werden soll.
Mit Vue erstellte Single-Page-Projekte bieten verschiedene Vorteile, wie einfache Wartung, prägnanten Code, gute Entwicklungserfahrung usw. Für einige traditionelle Internetunternehmen weist die Vue-Einzelseite jedoch ein schwerwiegendes Problem auf: das Problem der SEO-Optimierung. Unten finden Sie den Code für das normalerweise gepackte Vue-Einzelseitenverzeichnis und index.html.

Es gibt nur eine Datei index.html im Verzeichnis und diese HTML-Datei hat keinen Inhalt. Es gibt nur ein Div mit der ID-App, das zum Mounten der Vue-Instanz verwendet wird.
Die Google-Suchmaschine kann das Crawlen von Einzelseiteninformationen bereits sehr gut unterstützen, aber Google ist eine ausländische Suchmaschine und für die Verwendung im Inland ist ein VPN erforderlich. Daher wird dies nicht berücksichtigt. Baidu ist die wichtigste Suchmaschine in China und Baidu kann keine Einzelseitendaten crawlen. Wenn also ein solches Projekt gestartet wird, wird es für andere schwierig sein, das Projekt bei der Suche auf Baidu zu finden. Da die meisten Projekte in meinem derzeitigen Unternehmen eine SEO-Optimierung erfordern, wurde mir dieses Problem vorgelegt.

Lösung

Hier möchte ich erwähnen, dass Sie Puppeteer möglicherweise über npm installieren müssen, wenn beim Verpacken ein Fehler auftritt (das Ding ist etwas groß, ungefähr 300 MB).

Der erste Schritt besteht darin, vue.config.js über das Prerender-Spa-Plugin zu konfigurieren.

npm installiert prerender-spa-plugin --save

Dieses Ding ist ein Plug-In eines Drittanbieters, das von Vue verwendet wird, um Einzelseitenanwendungen auf mehrere Seiten zu packen. Konfigurieren Sie es nach der Installation in vue.config.js wie folgt

const PrerenderSPAPlugin = erforderlich('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const webpack = erfordern('webpack');
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: ['/','/about','/store_vuex','/cssAnimate','/connectMongoDB','/childParent','/child1','/elementUI'],
                    // 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'
                    })
                })
            ],
        };
    }
}

Ändern Sie dann den Vue-Routing-Modus in Verlauf
Fügen Sie diesen Code abschließend zur Eintragsdatei mian.js hinzu. Das Render-Event sollte dem renderAfterDocumentEvent in vue.config.js entsprechen.

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

npm run build Jetzt sieht die Verzeichnisstruktur nach dem Verpacken so aus, ebenso wie der index.html-Code jedes Ordners,
Der aktuelle HTML-Code enthält den vorlagenbezogenen Code in der VUE-Datei. Es besteht jedoch zusätzlich das Problem, dass der Index.html-Code in jedem Ordner auf alle JS- und CSS-Dateien verweist, was der SEO-Optimierung nicht förderlich ist. Es ist also noch nicht vorbei.

Warum gibt es so viele JS und CSS? Weil beim Verpacken von vue-cli jedes Skript und jedes Stil-Tag der .vue-Datei in ein entsprechendes JS und CSS gepackt wird, auch wenn Sie nichts in das Tag schreiben.

Der zweite Schritt besteht darin, die kleineren js- und css-Dateien zu komprimieren und zusammenzuführen

Ich habe die Vue-CLI-Dokumentation durchsucht, konnte aber keine relevanten Informationen finden und bin daher zu Webpack gewechselt.
Mit dieser API können Sie eine Mindestgröße für zusammengeführte Dateien festlegen. Fügen Sie diesen Code den Plugins in der obigen Webpack-Konfiguration hinzu. Die geschätzte Größe beträgt 10000 = 1 KB.

const webpack = erfordern('webpack');
 
neues webpack.optimize.MinChunkSizePlugin({
                    minChunkSize: 10000 // Halten Sie die Blockgröße über dem angegebenen Größenlimit, indem Sie Blöcke zusammenführen, die kleiner als minChunkSize sind }),

Dann verwendet npm run build immer noch dasselbe Verzeichnis, aber JS und CSS werden stark reduziert.

Methode 2: Vue SSR (Server-Side Rendering)

Kurz gesagt, die Komponenten, die ursprünglich im Browser erstellt werden sollten, werden zuerst auf dem Server erstellt, dann wird das entsprechende HTML generiert und direkt an den Browser gesendet und schließlich werden diese statischen Tags als vollständig interaktive Anwendungen auf dem Client „aktiviert“.

Vor- und Nachteile von Vue SSR im Vergleich zu SPA (Single Page Application)
1. 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.

2. Nachteile
1) Durch Entwicklungsbedingungen eingeschränkt. Browserspezifischer Code, der nur in bestimmten Lifecycle-Hooks verwendet werden kann. Einige externe Bibliotheken erfordern möglicherweise eine spezielle Behandlung, um in serverseitig gerenderten Anwendungen ausgeführt zu werden.

2) Weitere Anforderungen für die Einrichtung und Bereitstellung des Builds. Im Gegensatz zu vollständig statischen Single-Page-Anwendungen (SPAs), die auf jedem statischen Dateiserver bereitgestellt werden können, erfordern serverseitig gerenderte Anwendungen zur Ausführung einen Node.js-Server.

3) Höhere serverseitige Belastung. Das Rendern einer vollständigen Anwendung in Node.js beansprucht offensichtlich mehr CPU als das bloße Bereitstellen statischer Dateien. Wenn Sie also mit hohem Datenverkehr rechnen, bereiten Sie sich entsprechend auf die Serverlast vor und verwenden Sie Caching-Strategien mit Bedacht.

Dies ist das Ende dieses Artikels mit der detaillierten Erläuterung der SEO-Optimierungsmethoden für Vue-Entwicklungswebsites. Weitere relevante Inhalte zur Vue-SEO-Optimierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!