Vue项目Seo配置

SEO方案

常用的解决方案有三种:

  1. 页面预渲染
  2. 服务端渲染
  3. 路由采用h5 history模式

而应用到的技术也是有很多,大体上有四个,也是比较常用的:

  • ssr,vue官方文档给出的服务器渲染方案,这是一套完整的构建vue服务端渲染应用的指南,具体参考网站

  • vue-meta-info,这个是针对单页面的meta SEO的另一种思路,参考网站

  • nuxt 简单易用,参考网站

  • phantomjs 页面预渲染,具体参考网站

而市场上依靠vue做出来的成功案例还是很多的:

那么他们是如何做优化的呢?我们通过分析,总结以下几点

  • 1) bilibili做了基本的seo优化,比如

    TDK描叙详细。

    提升网页加载速度:对外联css,以及js使用了延迟加载以及dns-prefetch,preload。

    外联较多,关键词排名高。

  • 2) 掘金网站使用了vue-meta-info 管理网站的meta,应该配合使用了prerender-spa-plugin 对SEO进行了优化

  • 3) 大疆招聘 使用了Nuxt