一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    现有vue项目seo优化

    随笔 190 2022-01-13 16:33

    主要的库:prerender-spa-plugin (注意必须要用history的路由模式)

    先下载 :

    npm i prerender-spa-plugin -S
    

    然后在vue.config.js添加配置..

    const PrerenderSPAPlugin = require("prerender-spa-plugin");
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
    const path = require("path");
    
    module.exports = {
      configureWebpack: () => {
        if (process.env.NODE_ENV !== "production") return;
        return {
          plugins: [
            new PrerenderSPAPlugin({
              // 输出目录
              staticDir: path.join(__dirname, "dist"),
              // 打包的路由
              routes: ["/", "/mood","/bookInfo/id"],
              renderer: new Renderer({
                inject: {
                  foo: "bar"
                },
                headless: false
              })
            })
          ]
        };
      }
    };
    

    如果vue-cli的版本比较老的(暴漏了webpack相关配置)

    需要在build/webpack.prod.conf.js中进行配置:

    找到plugins (是个array 把新增PrerenderSPAPlugin的配置加进去。。。)

    plugins:[
        // 新增 PrerenderSPAPlugin
        new PrerenderSPAPlugin({
          // Required - The path to the webpack-outputted app to prerender.
          staticDir: path.join(__dirname, "../dist"),
          // Required - Routes to render.
          routes: ["/", "/mood"],
          // 这个很重要,如果没有配置这段,也不会进行预编译
          renderer: new Renderer({
            ignoreJSErrors: true,
            inject: {
              foo: "bar"
            },
            headless: false,
            renderAfterTime: 5000
          })
        })
    ]
    
    

    然后在最外层的main.js中添加:

    new Vue({
      el: "#app",
      router,
      components: { App },
      template: "<App/>",
    
      // 添加
      mounted() {
        document.dispatchEvent(new Event("custom-render-trigger"));
      }
    });
    

    配置完成了之后 直接打包..

    npm run build
    

    打包成功之后 dist目录下会出现两个新的目录 正常打开

    可能会报错,一般报错就是资源路径的问题,需要把./static 换成../static 就可以了


    好了到了这一步感觉大功告成了,

    然后一个天坑来了:

    prerender-spa-plugin不支持动态路由

    啥意思呢,举个例子

    我们的博客文章 的url是动态的带id的:http://biaoblog.cn/#/bookInfo/1641975877316

    那么使用prerender预加载是没办法动态打包了,


    当然也有一个很极限的实现方法:

    下面的内容是引用一个github主的:


    我弄了个 blingshow——中国路灯制造网,但是我是用vue+ts写的,写之前没考虑什么SEO等等,以前一直写后台管理系统,直接面向用户的网站只写过一个,就是雀巢桶装水,不过那个是jsp写的,而且记得当初上线前当时的老大让我加了段代码,说是给百度SEO用的,好像花钱的,这次自己独立建个小站,写完后才意识到百度收录、SEO等等问题,这是以前没接触过的,纯给自己埋坑了。
    以前也听过预渲染这个名词,不过一直没在意,这次为了解决我网站SEO相关问题,不得不去研究下。好在vue官网直接给了推荐:https://github.com/chrisvfritz/prerender-spa-plugin, 我看了文档才知道,固定的路由比如 /hot, /iot, /traffic 等配置下完全没问题,可是动态路由比如产品详情页(根据产品编号去获取数据)就很难办了。
    而且百度SEO要经常更新内容,发外链等等,起初我不懂我的网站怎么更新内容,我路由就那么几个,又不是博客,后来仔细一想,那么多产品,每个产品编号都不同,那么每个产品详情页不就是一个单独的网站吗?
    我抱着试一试的心态向百度提交了一堆产品详情页地址,它提示我成功,但是目前没什么感觉。不过我还是不放心,想对这些动态路由进行预渲染,在github仓库里的issue找了很久,其中作者有直接回复 不支持动态路由预渲染,建议ssr 的,但是也不是完全没法子,作者还说可以把 所有动态路由都写出来配置下,这个 chrisvfritz/prerender-spa-plugin#375 回复我一开始没看懂,后来经过我3个小时的摸索,大概这样配置:

    module.exports = {
      configureWebpack: {
        plugins: [
          new PrerenderSPAPlugin({ // 预渲染
            // Required - The path to the webpack-outputted app to prerender.
            staticDir: path.join(__dirname, 'dist'),
            // Required - Routes to render.
            routes: [
              '/hot', 
              '/iot', 
              '/street-lighting', 
              '/traffic', 
              '/company', 
              '/login',
              '/productDetail/20200501170342p8O',
              '/productDetail/20200501165752p8O',
              '/productDetail/20200501172222r8y',
              '/productDetail/20200501172416r8y',
              '/productDetail/20200501173238WLk',
              '/productDetail/20200501173606WLk',
              '/productDetail/20200501175355WLk',
              '/productDetail/20200501191542aal',
              '/productDetail/20200501192826r8y',
            ],
            renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
              // Optional - defaults to 0, no limit.
              // Routes are rendered asynchronously.
              // Use this to limit the number of routes rendered in parallel.
              maxConcurrentRoutes: 4,
      
              // Optional - Wait to render until a certain amount of time has passed.
              // NOT RECOMMENDED
              renderAfterTime: 5000, // Wait 5 seconds. 时间设置短的话可能会报错,因为加载数据可能有延迟
      
              // Other puppeteer options.
              // (See here: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
              headless: false // Display the browser window when rendering. Useful for debugging.
            })
          })
        ]
      }
    }
    
    这样确实生成了相应的html,不过这些页面好像并没有什么差别。
    建议
    如果是建网站要做SEO等等,还是建议直接 SSR 吧,我打算把我这个网站的国际站用SSR重写下,毕竟我这个站主要做外贸用的。而且我做的是响应式,但是写的不好,我还是将PC和移动分成两个项目来写吧


    看到最后 放弃了这个插件,但是seo的优化还是要继续:

    使用:vue-meta-info 这个库 来动态配置每个页面的tdk吧

    下载:

    npm i vue-meta-info -S
    

    然后在main.js中进行全局引用:

    import MetaInfo from "vue-meta-info";
    Vue.use(MetaInfo);
    

    完事直接在页面中调用:(跟data同级)

      metaInfo() {
        return {
          title: "留言板 | biaoBlog | 个人博客"
        };
      },
    

    文章里面需要动态设置:

      metaInfo() {
        return {
          title: this.bookInfo.title || "个人博客丨biaoBlog",
          meta: [
            {
              name: "description",
              content: this.bookInfo.summary
            }
          ]
        };
      },
    

    值得注意的是,description和keyWord的设置 不是替换 而是在下面重新生成一个新的meta标签

    所以不要发现。。页面最顶级的des和keywork没变 以为是bug 其实不是。。在下面还有des和keywork。。

    心累的一天 忙碌了一天 效果很低。。杯水车薪

    文章评论

    评论列表(0