VUE's SEO solution

Option 1: Pre-render prerender-spa-plugin

If you are only used to improve the SEO of a few marketing pages (such as /, / about, / contact, etc.), then you may need to pre-render. Instead of using a web server to dynamically compile HTML in real time, a pre-rendering method is used to simply generate a static HTML file for a specific route at build time. The advantage is that setting up pre-rendering is simpler and can use your front-end as a completely static site.

Advantage:

• The change is small, the introduction of a plug-in will be done;

insufficient:

• Cannot use dynamic routing;
• Only suitable for projects with a small number of pages. In the case of up to several hundred pages, packaging will be very slow;

The solution is as follows:

1. First need to installprerender-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. Find webpack.prod.conf.js in the project. It is possible that the file name is different. At this time, you need to find the relevant file according to your command line.

 

 Add the following code in this file

 

 

 Paste the relevant code

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, '../dist'),
      // Required - Routes to render.
      routes: [ '/', '/cart', '/list'],
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false,
        //In main.js document.dispatchEvent (new Event ('render-event')), the event names of the two should correspond. 
        renderAfterDocumentEvent: 'render-event' 
      }) 
}),

3. Add relevant code in the VUE project

 

Paste the relevant code,

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  mounted () {
    // You'll need this for renderAfterDocumentEvent.
    
    document.dispatchEvent(new Event('render-event'))
    }
}).$mount('#app')

4. At this point, complete the packaging into multiple pages, execute the packaging command

npm run build

5. Relevant folders will appear after packaging is completed, each file has an associated index, html indicates that the packaging is successful

 

 5 The next step is to solve the SEO problem, import vue-meta-info, and then use

 

 6 Then add the following code in the required components

 

 Paste the relevant code

metaInfo: { 
    title: 'I am the hello header', // set a title 
    meta: [{              // set meta 
      name: 'keyWords' , 
      content: 'I am the hello keyword' 
    }, 
    { 
      name: 'description' , 
      content : 'I am hello description' 
    }] 
 }

7. Then execute the packaging program, at this time you will find the relevant meta in the relevant page

 

 Find the description is successful, congratulations on your completion. Celebrate with clapping hands!

Scenario 2: Staticization Staticization is another way of packaging Nuxt.js. It is an innovation of Nuxt.js, and the page load speed is very fast.

When Nuxt.js performs generate static packaging, dynamic routing is ignored.

Advantage:

• Purely static files with super fast access speed;
• Compared with SSR, it does not involve server load issues;
• Static web pages should not be attacked by hackers and have higher security.

insufficient:

• Not applicable if there are many dynamic routing parameters.