vue怎么支持seo？

不念不忘少年蓝@ 2023-01-05 05:07 203阅读 0赞

前言：首先明确一个知识点，为什么vue对seo支持不友好？其次仅仅vue对seo 的支持不好吗？react呢？angular呢？答：凡是spa项目对seo都非常不友好，为什么？这个跟网络爬虫有关跟spa的特性有关。第一，网络爬虫喜欢收录原创内容，于是乎我们很常用的手段就是发文章，原创或者伪原创去勾搭爬虫引起爬虫的重视，以此增长网站的权重对吧？但是spa呢偏偏收录不了，为什么？因为spa是单文件内容，意思是项目打包后，只有一个index.html对吧，此时你写一个文章页面如：article/1.html 这个页面有文章，你希望爬虫收录，但是你的服务器有这个实际文件吗？并没有？那爬虫收录个锤子？指望爬虫给你解析前端路由？？？？？？不存在的…它就去服务器上看一眼，哎？没有文件？好吧下一家~

到此能看懂吗？如果看懂不…就好好学学基本功！

那么怎么解决这个问题？简单啊，既然爬虫根据你的路由找不到对应文件，你让它找到不就可以嘛…对吧？  
so…

**插件**

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

\*\*这里以vue-cli为例 \*\*

> vue.config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin')
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
    new PrerenderSPAPlugin({ 
          // Required -导出到哪里，哪个目录，注意看下相对的位置，这里是根目录
          staticDir: path.join(__dirname, 'dist'),
          // Required - Routes to render.
          routes: [ '/', '/cart', '/list'],
          renderer: new Renderer({ 
            inject: { 
              foo: 'bar'
            },
            headless: false
          })
    }),

**给每个页面添加meta头部信息**

> main.js

//引入
    import MetaInfo from "vue-meta-info";
    // meta信息
    Vue.use(MetaInfo);
    // 注意事件名称
    new Vue({ 
      mounted() { 
        document.dispatchEvent(new Event("getSeo"));
      }
    });

> 接下来，在每个你需要独立打包的页面添加meta信息

export default { 
      metaInfo: { 
        title: '这是价格页面',
        meta: [
          { 
            // set meta
            name: 'keyWords',
            content: '这是价格页面关键字'
          },
          { 
            name: 'description',
            content: '你好这是价格'
          }
        ]
      }
    }

然后，打包吧~然后把你页面扔到服务器，路由能找到实际文件啦  
哈哈,就这么简单，完啦~

最后？只有这个方法吗？no!!!  
ssr~是另一种很棒的方案，但是呢…平地而起要部署的东西挺多，成本相对也高！  
最后！！！！！！  
你以为真解决问题了？才不是，你看看你生成的html，检查元素，看看整体的dom结构？爬虫不喜欢滴~怎么还原成格式严禁的html结构呢？？我也在想，有时间研究研究