Detailed explanation of Vue development website SEO optimization method

Because the data binding mechanism of Vue and other js is used to display page data, the HTML obtained by the crawler is the model page rather than the rendered page of the final data, and the search engine will not go back to execute the requested js. Vue projects all use ajax to request data, and the engine crawler cannot obtain text content when entering the page. Now most solutions do not use ajax to render data, but use server-side rendering, which is the so-called SSR.
The current solution based on Vue is Nuxt.js. There is also a React version of Nuxt.js. So server-side rendering is to try to have data on the page before the server sends it to the browser so that the crawler can crawl it.

Method 1: Use prerender-spa-plugin to package single-page applications into multiple pages

After the traditional Vue is built through the vue-cli scaffolding, npm run build is used to package and generate the final HTML code to be put online.
Single-page projects built with Vue have various advantages, such as easy maintenance, concise code, good development experience, etc. However, for some traditional Internet companies, Vue single page has a fatal problem, which is the problem of SEO optimization. Below is the code for the normally packaged Vue single page directory and index.html.

There is only one index.html file in the directory and there is no content in this html file. There is only a div with the id app used to mount the vue instance.
The Google search engine can already support single-page information crawling very well, but Google is a foreign search engine and domestic use requires a VPN, so it is not considered. Baidu is the most important search engine in China, and Baidu cannot crawl single-page data, so if such a project is launched, it will be difficult for others to find the project when searching on Baidu. Since most of the projects in my current company require SEO optimization, this problem was thrown to me.

Solution

Here I would like to mention that if you get an error when packaging, you may need to install puppeteer via npm (this thing is a bit large, about 300M)

The first step is to configure vue.config.js through prerender-spa-plugin

npm isntall prerender-spa-plugin --save

This thing is a third-party plug-in used by Vue to package single-page applications into multiple pages. After installation, configure it in vue.config.js as follows

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const webpack = require('webpack');
const path = require('path');
 
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    // The path of the generated file can also be consistent with the path packaged by webpakc.
                    // The following sentence is very important! ! !
                    // This directory can only have one level. If the directory level is greater than one level, there will be no error prompt during generation, and it will just get stuck during pre-rendering.
                    staticDir: path.join(__dirname,'dist'),
                    // Corresponding to your own routing file, for example, if a has parameters, you need to write it as /a/param1.
                    routes: ['/','/about','/store_vuex','/cssAnimate','/connectMongoDB','/childParent','/child1','/elementUI'],
                    // This is very important. If this section is not configured, precompilation will not be performedrenderer: 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'
                    })
                })
            ],
        };
    }
}

Then change the vue routing mode to history
Finally, add this code to the mian.js entry file. The render-event should correspond to the renderAfterDocumentEvent in vue.config.js

new Vue({
  router,
  store,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

npm run build Now the directory structure after packaging becomes like this, as well as the index.html code of each folder,
The current HTML code has the template related code in the .vue file, but there is an additional problem that the index.html code in each folder references all the js and css files, which is not conducive to SEO optimization. So it's not over yet.

Why are there so many js and css? Because when vue-cli is packaging, each script and style tag of the .vue file will be packaged into a corresponding js and css, even if you don't write anything in the tag.

The second step is to compress and merge the smaller js and css files

I searched the vue-cli documentation but couldn't find any relevant information, so I switched to webpack.
This API can be used to set a minimum merged file size. Add this code to the plugins in the webpack configuration above. It is estimated to be 10000 = 1kb

const webpack = require('webpack');
 
new webpack.optimize.MinChunkSizePlugin({
                    minChunkSize: 10000 // Keep chunk size above specified size limit by merging chunks smaller than minChunkSize }),

Then npm run build still uses the same directory, but the js and css are reduced a lot.

Method 2: Vue SSR (Server-Side Rendering)

In short, the components that were originally to be created in the browser are created on the server first, and then the corresponding HTML is generated and sent directly to the browser, and finally these static tags are "activated" as fully interactive applications on the client.

Advantages and disadvantages of Vue SSR compared to SPA (single page application)
1. Benefits: Better SEO, since search engine crawlers can directly view the fully rendered page.

Faster time-to-content, especially over slow networks or on slow devices.

2. Disadvantages
1) Limited by development conditions. Browser-specific code that can only be used in certain lifecycle hooks; some external libraries may require special handling to run in server-rendered applications.

2) More requirements involved in build setup and deployment. Unlike fully static single-page applications (SPAs), which can be deployed on any static file server, server-rendered applications require a Node.js server to run.

3) More server-side load. Rendering a full application in Node.js is obviously more CPU-intensive than just serving static files, so if you expect high traffic, prepare for the server load accordingly and use caching strategies wisely.

This is the end of this article on the detailed explanation of Vue development website SEO optimization methods. For more relevant Vue SEO optimization content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!