Prerendering for SEO

If you want to prerender routes that will not significantly change once pushed to production, use this Webpack plugin: prerender-spa-plugin, which has been tested for use with Vue. For pages that do frequently change, Prerender.io and Netlify both offer plans for regularly re-prerendering your content for search engines.

Using prerender-spa-plugin

  1. Install it as a dev dependency:
npm install --save-dev prerender-spa-plugin
  1. Require it in build/webpack.prod.conf.js:
// This line should go at the top of the file where other 'imports' live in
var PrerenderSpaPlugin = require('prerender-spa-plugin')
  1. Configure it in the plugins array (also in build/webpack.prod.conf.js):
new PrerenderSpaPlugin(
  // Path to compiled app
  path.join(__dirname, '../dist'),
  // List of endpoints you wish to prerender
  [ '/' ]
)

If you also wanted to prerender /about and /contact, then that array would be [ '/', '/about', '/contact' ].

  1. Enable history mode for vue-router:
    const router = new VueRouter({
    mode: 'history',
    routes: [...]
    })
    

results matching ""

    No results matching ""