vue项目SEO不友好怎么办？

解决vue项目SEO不友好的问题

首先了解什么是SEO？

SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。

SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等及站外优化，比如网站站外推广、网站品牌建设等，使网站满足搜索引擎收录排名需求，在搜索引擎中提高关键词排名，从而把精准用户带到网站，获得免费流量，产生直接销售或品牌推广。

SEO主要优化哪些内容？

内部优化

• META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化

• 内部链接的优化，包括相关性链接(Tag标签)，锚文本链接，各导航链接，及图片链接

• 网站内容更新：每天保持站内的更新(主要是文章的更新等)

外部优化

• 外部链接类别：博客、论坛、B2B、新闻、分类信息、贴吧、问答、百科、社区、空间、微信、微博等相关信息网等尽量保持链接的多样性。

• 外链组建：每天添加一定数量的外部链接，使关键词排名稳定提升。

• 友链互换：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。

引擎蜘蛛的工作原理？

网络爬虫在爬取网页内容的时候，需要分析页面内容，主要有以下几点：

• 从 meta 标签中读取 keywords 、 description 的内容。

• 根据语义化的 html 的标签爬取和分析内容。一个整体都是用 div 标签的网站和正确使用了 html5 标签的效果是不一样的。

• 读取 a 标签里的链接，通过 a 标签的链接可以跳转到别的网站。（爬虫是先跳转，还是继续爬内容再跳转，就看算法是广度优先还是深度优先了）

• 像 h1 - h6 标签是具有不同程度的强调意义的。

• 一般将 h1 视为重要内容。同样有强调内容还有 strong 、 em 标签。

SEO为啥对vue单页面不友好?

1. vue用js来渲染数据对SEO不友好

   搜索引擎的基础爬虫的原理就是抓取你的url，然后获取你的html源代码并解析。 而vue项目是采用js的数据绑定机制来展现页面数据的，爬虫获取到的html是你的模型页面而不是最终数据的渲染页面，所以说用**js来渲染数据对seo并不友好**。

2. vue单页页面对SEO不友好

   seo 本质是一个服务器向另一个服务器发起请求，解析请求内容。但一般来说搜索引擎是不会去执行请求到的js的。也就是说，如果一个单页应用，html在服务器端没有渲染数据，在浏览器才渲染出数据的，而搜索引擎请求到的html是没有渲染数据的。 这样就很不利于内容被搜索引擎搜索到， 所以服务端渲染就是尽量在服务器发送到浏览器前页面上就是有数据的。

解决方案

目前了解到两种解决方案：

1.服务端渲染，Vue的SSR渲染(配置参考)，SSR比较复杂。

2.页面预渲染，prerender-spa-plugin插件实现(配置参考)

第一种服务端渲染可以参考Vue官方文档中SSR服务端渲染，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。

这里主要介绍一下使用prerender-spa-plugin页面预渲染的方法：

原理：利用库 prerender-spa-plugin + vue-meta-info 配置webpack和页面实现预渲染方案，最终build出来多个html文件

1. 首先需要安装prerender-spa-plugin和vue-meta-info

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

   prerender-spa-plugin解决打包多个页面

   vue-meta-info解决SEO的问题

2. 在项目中找到main.js,配置以下代码

   import Vue from 'vue'
   import MetaInfo from 'vue-meta-info'
   Vue.use(MetaInfo)
   new Vue({
     router,
     render: h => h(App),
     mounted () {
       document.dispatchEvent(new Event('render-event'))
     }
   }).$mount('#app')
   

3. 配置webpack

   const path = require('path')
   const PrerenderSPAPlugin = require('prerender-spa-plugin');
   const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
   module.exports = {
     new PrerenderSPAPlugin({
       // 必需 - 要预渲染的 webpack 输出应用程序的路径
       staticDir: path.join(__dirname, '/dist'),
       // 必需 - 要渲染的路由。
       routes: [
         '/index',
         '/home',
         '/login',
       ],
       // 预渲染代理接口
       // server: {
       //   proxy: {
       //     '/api': {
       //       target: 'http://localhost:9001',
       //       secure: false
       //     }
       //   }
       // },
       // 渲染器
       renderer: new Renderer({
         // 可选 - 要添加到包含 `inject` 内容的 window 对象的属性名称。
         injectProperty: '__PRERENDER_INJECTED',
         // 可选 - 您希望您的应用程序可以通过 `window.injectProperty` 访问的任何值。
         inject: {
           foo: 'bar'
         },
         headless: true, // 渲染时显示浏览器窗口。用于调试
         renderAfterDocumentEvent: 'render-event' // 对应main.js中的事件名
       })
     }),
   }
   

4. 将需要预渲染的页面配置SEO文字内容（对应上面routes数组里路由指向的页面）

   export default {
     metaInfo: {
       title: '我是 index 页面的title',
       meta: [
         {
           name: 'keywords',
           content: '我是 index 页面的keywords'
         },
         {
           name: 'description',
           content: '我是 index 页面的description'
         }
       ]
     },
   }