A brief talk on the seo problem of vue single Page

Intro:   When I recently did the project, I was asked to do seo, because the project had been developed and only needed to do seo, on the home page, so I decided to use prerender-spa-plugin combined with vue-m

When I recently did the project, I was asked to do seo, because the project had been developed and only needed to do seo, on the home page, so I decided to use prerender-spa-plugin combined with vue-meta-info to implement the seo on the home page. If your page is dynamic, such as dom, which is rendered dynamically through v-for or v-if, and so on, consider the official SSR.

The code has been updated to github, click to view

Npm install prerender-spa-plugin vue-meta-info save

Cnpm install prerender-spa-plugin vue-meta-info save

Const PrerenderSpaPlugin = require (‘prerender-spa-plugin’) new PrerenderSpaPlugin (/ / place the rendered file in the dist directory path.join (_ _ dirname,’. / dist’), / / routing information that needs to be pre-rendered [‘/ index’,’/about’], {/ / capture the page information after a certain period of time, Make the page data information load complete captureAfterTime: 50000, / / ignore the packaging error ignoreJSErrors: true, phantomOptions:’- web-security=false’, maxAttempts: 10,}) at this point, you can package and try, if the packaged file contains both index and about files, indicating success.

But run the packaged file, right-check the source code of the page, you will find that index and about these two seo file information is the same, if you are the same situation, don’t worry, change your routing mode to “history” mode.

Repackage, run the package file, look at the source code, find that the content is different, so far is a success.

But there will be an invisible problem, and when your packaged files are deployed online, the refresh page will be 404. At this point, you need to configure the back end, the back end configuration.

Look at the specific use of vue-meta-info here, vue-meta-info.

Related Passages:

Leave a Reply

Your email address will not be published. Required fields are marked *