Front end SEO pre rendering scheme based on prerender spa plugin and Vue meta info

Time:2022-2-1

background

Recently, in the development of front-end projects, in order to improve the ranking of search engines, the company asked us to do some SEO optimization methods for the website. After cooperating with relevant search optimization companies, the other party put forward suggestions such as adding H1 tag to key pages, setting keyword TDK, setting ALT for logo map, etc.

 

However, many front-end development frameworks, such as Vue and react, put the data of the packaged page in the JS code and only appear after the page JS is loaded, which will not be recognized by the search engine.

 

Vue is also used in the project, so there needs to be a scheme to solidify JS content into HTML pages.

 

Common SEO optimization schemes include page pre rendering and SSR, which are also different for different scenes:

 

  • SSR needs to make great changes to the structure and deployment mode of the original code. The access is cumbersome, but it can process some real-time back-end return data;
  • On the contrary, pre rendering is easy to access and hardly affects the original code, but it can only deal with the situation that the page content does not change in real time.

After discussion, because the current project is a product official website of a department, there is not much background data exchange. So thinking of being as simple as possible, I chose to use pre rendering to solve this problem.

 

Scheme Introduction (prerender spa plugin + Vue meta info)

What we want to introduce here is a set of SEO pre rendering scheme at the front end of the official website based on prerender spa plugin and Vue meta info.

 

Prerender spa plugin is a webpack plug-in that solidifies rendered pages into HTML files. The principle is to traverse the route in the configuration by using the headless browser. When the end event is received, the page data at that time will be output into HTML file.

Vue meta info is a tool that can be used in Vue. It can dynamically change the information in the meta of the current page (such as title, description, etc.) in Vue file.

 

By combining the two, you can dynamically render the page content and output HTML files.

 

Scheme implementation

As an example, the following Vue page will be output as a pre rendered page. Project GitHub warehouse:https://github.com/lwklwklwk/prerender-spa-plugin-vue-cli

 

 

Vue file above:

Radish official website
        This is a page that needs to be pre rendered
        Key points of SEO
        H1 label is very important
        It is also necessary to use H2 tag for the sub title of the website
        IMG is the best logo image, and the ALT description should not be omitted
        TKD (title, keywords, description) of important pages must be set
        Set nofollw tags on outbound links to prevent the weight of websites from being scattered
        Set up friend chain interaction
        Setting and submission of sitemap files for search engines
    



export default {
    name: 'app'
}



body {
    background-color: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft YaHei, sans-serif;
    margin: 0;
    font-size: 18px;
}
.app {
    background-color: #fff;
    margin: 20px auto;
    padding: 24px 32px;
    width: 50vw;
    min-width: 652px;
    max-width: 1300px;
}

Rendered HTML file:

 

 

You can see that there is no file content in it, so we can’t complete our SEO requirements.

 

After adding the following configuration to webpack:

new PrerenderSPAPlugin({
                //The path of the generated file can also be consistent with that packaged by webpakc.     
                //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 only be 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: ['/'],
                    //This is very important. If this section is not configured, it will not be precompiled
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        //In main JS DispatchEvent (new event ('render event ')), and the event names of the two should correspond to each other.
                        renderAfterDocumentEvent: 'render-event'
                    })
                })

Then in main JS plus trigger event:

new Vue({
    render: (h) => h(App),
    
    mounted () {
        document. DispatchEvent (new event ('render event ') // triggered
    }
}).$mount('#app')

Build again, and the result is:

 

As you can see, the content has been rendered in the HTML file.

 

How to use Vue meta info

1. Installation:

    npm i vue-meta-info –save

2. Use:

In main Introduce Vue meta info into JS file

    import MetaInfo from ‘vue-meta-info’;

    Vue.use(MetaInfo)

3. Setting:

export default {
    name: 'app',
    metaInfo: {
        Title: 'radish official website', // set a title
        meta: [
            {
                // set meta
                name: 'keyWords',
                Content: 'keyword'
            },
            {
                name: 'description',
                Content: 'description'
            }
        ]
    }
}

 

You can see that this component has been used normally.

 

Package again to see the effect:

 

 

Perfect~

Recommended Today

Build k8s clusters by kubedm

01 build k8s cluster Official website:https://kubernetes.io/docs/setup/production-environment/tools/kubeadm/install-kubeadm/#installing-kubeadm-kubelet-and-kubectl GitHub:https://github.com/kubernetes/kubeadm In the course: use kubedm to build a k8s cluster composed of three machines, one master node and two worker nodes If your machine configuration is not enough, you can also use online, minicube or one master and one worker Configuration requirements: One or more machines running one […]