vue-cli单页应用之动态title description keywords

前言

在上一篇博文中，使用rendertron针对百度spider实现了网页的服务端渲染，虽然现在百度spider跟google bot都能爬取到渲染后的页面，但是却没有明确的description跟keywords信息，这样也是不利于seo优化的。不过vue-router并没有显示地提供这样的功能，需要我们手动编码实现。

coding

导航守卫(Navigation Guards)介绍

vue-router提供的导航守卫，虽然说主要功能是守卫导航的，但是可以用来获取将要进入的目标路由。也就是说我们可以在此处获取到跳转到的目标路由信息，就是我们在router中注入的routes，我们就可以在routes中配置title、description和keywords信息

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // to 为将要进入的目标路由
})

index.html修改

vue-cli默认生成的index.html并没有带有meta标签，我们需要在head标签中手动添加，以便在querySelector中使用。

<meta name="description" content="">
<meta name="keywords" content="">

router.js

这里是router的配置，在需要配置的路由中加入额外的title和meta信息，其实也不用完全一致，只要能在导航守卫中取到即可。

{
    path: '/',
    component: Home,
    title: "标题"

    meta: {"keywords":"keywords", "description": "description" }
},

全局导航守卫

在全局导航守卫中做如下修改，这里是我根据上面的配置所取的，只要能取得到对应信息即可。

router.beforeEach((to, from, next) => {
  if (to.title) {
    document.title = to.title;
  }
  if (to.meta) {
    document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.keywords);
    document.querySelector('meta[name="description"]').setAttribute('content', to.meta.description);
  }
  next()
})

小结

通过上面的修改，即可在vue-cli单页应用中随着vue-router的跳转而动态改变网页的title description keywords，从而提升向搜索引擎传达此页面信息的精确性，进而达到优化seo的效果。