Die SEO-Lösung von VUE

Option 1: Prerender-Spa-Plugin vor dem Rendern

Wenn Sie nur dazu verwendet werden, die SEO einiger Marketing-Seiten (wie /, / about, / contact usw.) zu verbessern, müssen Sie möglicherweise vorab rendern. Anstatt einen Webserver zum dynamischen Kompilieren von HTML in Echtzeit zu verwenden, wird eine Pre-Rendering-Methode verwendet, um zur Erstellungszeit einfach eine statische HTML-Datei für eine bestimmte Route zu generieren. Der Vorteil ist, dass das Einrichten des Pre-Renderings einfacher ist und Sie Ihr Front-End als vollständig statische Site verwenden können.

Vorteile:

• Die Änderung ist gering, die Einführung eines Plug-Ins erfolgt;

Nicht genug:

• Dynamisches Routing kann nicht verwendet werden.
• Nur für Projekte mit wenigen Seiten geeignet. Bei bis zu mehreren hundert Seiten ist die Verpackung sehr langsam.

Die Lösung lautet wie folgt:

1. Zuerst muss installiert werdenprerender-spa-plugin和vue-meta-info，prerender-spa-plugin解决打包多个页面，vue-meta-info解决SEO的问题

npm install --save prerender-spa-plugin

npm install --save vue-meta-info

2. Suchen Sie im Projekt nach webpack.prod.conf.js. Möglicherweise unterscheidet sich der Dateiname. Zu diesem Zeitpunkt müssen Sie verwandte Dateien gemäß Ihrer Befehlszeile suchen.

 

 Fügen Sie den folgenden Code in diese Datei ein

 

 

 Fügen Sie den entsprechenden Code ein

const PrerenderSPAPlugin = require ('prerender-spa-plugin' ) 
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
 new PrerenderSPAPlugin ({
       // Erforderlich - Der Pfad zur vom Webpack ausgegebenen App zum Prerender. 
      staticDir: path.join (__ dirname, '../ dist ' ),
       // Erforderlich - Routen zum Rendern. 
      Routen: [' / ',' / cart ',' / list ' ], 
      Renderer: neuer Renderer ({ 
        injizieren: { 
          foo: ' bar ' 
        }, 
        kopflos: falsch ,
         // //In main.js document.dispatchEvent (neues Ereignis ('Render-Ereignis')) sollten die Ereignisnamen der beiden übereinstimmen. 
        renderAfterDocumentEvent: 'render-event' 
      }) 
}),

3. Fügen Sie dem VUE-Projekt relevanten Code hinzu

 

Fügen Sie den entsprechenden Code ein.

new Vue ({ 
  el: '#app' , 
  Router, 
  Speicher, 
  Render: h => h (App), 
    mount 
  () { // Sie benötigen dies für renderAfterDocumentEvent. 
    
    document.dispatchEvent ( neues Ereignis ('Render-Ereignis) ' )) 
    } 
}). $ mount ( ' #app ')

4. Vervollständigen Sie zu diesem Zeitpunkt das Verpacken auf mehreren Seiten und führen Sie den Verpackungsbefehl aus

npm run build

5. Relevante Ordner werden nach Abschluss des Pakets angezeigt. Jeder Datei ist ein Index zugeordnet. HTML zeigt an, dass das Packen erfolgreich ist

 

 5 Der nächste Schritt besteht darin, das SEO-Problem zu lösen, Vue-Meta-Informationen zu importieren und dann zu verwenden

 

 6 Fügen Sie dann den folgenden Code in die erforderlichen Komponenten ein

 

 Fügen Sie den entsprechenden Code ein

metaInfo: { 
    title: 'Ich bin der Hallo-Header', // setze einen Titel 
    meta: [{              // setze 
      Metanamen: 'keyWords' , 
      Inhalt: 'Ich bin das Hallo-Schlüsselwort' 
    }, 
    { 
      name: 'description' , 
      Inhalt : 'Ich bin hallo Beschreibung' 
    }] 
 }

7. Führen Sie dann das Verpackungsprogramm aus. Zu diesem Zeitpunkt finden Sie auf der entsprechenden Seite verwandte Metas

 

 Finden Sie die Beschreibung ist erfolgreich, herzlichen Glückwunsch zu Ihrem Abschluss. Feiern Sie mit klatschenden Händen!

Szenario 2: Statisierung Die Statisierung ist eine weitere Möglichkeit, Nuxt.js zu verpacken. Es handelt sich um eine Innovation von Nuxt.js, und die Geschwindigkeit beim Laden von Seiten ist sehr hoch.

Wenn Nuxt.js statische Pakete generiert, wird dynamisches Routing ignoriert.

Vorteile:

• Rein statische Dateien mit superschneller Zugriffsgeschwindigkeit;
• Im Vergleich zu SSR treten keine Probleme mit der Serverlast auf.
• Statische Webseiten sollten nicht von Hackern angegriffen werden und eine höhere Sicherheit aufweisen.

Nicht genug:

• Nicht anwendbar, wenn viele dynamische Routing-Parameter vorhanden sind.