vue项目利用预渲染prerender-spa-plugin处理seo --viga

最新推荐文章于 2023-02-22 08:30:22 发布

YoLoViga

最新推荐文章于 2023-02-22 08:30:22 发布

阅读量943

点赞数

文章标签： vue.js 爬虫

本文链接：https://blog.csdn.net/weixin_45029416/article/details/121297886

版权

vue项目利用预渲染处理seo

写在前面

什么是SEO？

SEO是英文 Search Engine Optimization 的缩写，中文意思“搜索引擎优化”。SEO是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，从而获得更多流量，最终达成品牌建设或者产品销售的目的。

SEO的目的？

提升搜索引擎爬虫覆盖率
提升平台知名度
…

爬虫是什么

以百度爬虫为例

1、发现网站：百度爬虫每天都会在各个网站上爬，抓取无数的网站与页面，进行评估与审核，优质的内容就会被收录。一个新网站一般都需要一周左右才会被爬虫发现，只要坚持不断更新网站，内容优质，一定会被发现的。
2、抓取网站：百度爬虫一般是先根据预先设定的初始网页的URL开始，然后按照一定的规则爬取网页。爬虫顺着网页中的各种链接，从一个页面爬到另一个页面，通过链接分析连续爬行访问，抓取更多的页面。被抓取的网页就是百度快照。
3、保存网站：百度爬虫的喜好跟我们人类的喜好是一样的，喜欢新鲜的、独一无二的东西。如果网站经常更新，内容质量非常高，那么爬虫就喜欢待在这里，顺着链接来回爬，欣赏这独一无二的风景，并且会保存下来。如果网站的内容都是抄袭来的，或其他网站上早就有了，爬虫就认为是垃圾内容，便会离开网站。
4、分析网站：百度爬虫抓取到网站之后，要提取关键词，建立索引库和索引，同时还要分析内容是否重复，判断网页的类型，分析超链接，计算网站的重要程度等大量的工作，分析完毕之后，就能提供检索服务。
5、参与网站：当爬虫认为网站的内容符合它的喜好了，通过一系列的计算工作之后，就被收录起来，当用户输入关键词并进行搜索的时候，就能从搜索引擎中找到该关键词相关的网站，从而被用户查看到。
如上所说，爬虫会在访问url时对其资源进行一个收集操作，url或者域名指向资源也就是能被爬虫爬到的内容。

Vue项目如何支持SEO？

在探索如何支持SEO之前，我们先了解一下为什么VUE项目不支持或很难支持SEO

我们在使用vue框架时，默认构建的是SPA项目（单页面应用项目），单页面应用项目指的是在最终构建的资源包中，只存在一个html文件（也就是dist中的index.html）文件。
SPA项目对于SEO不友好的理由也是在此，因为只有一个html资源，并且body内容只有

<div id="app"></div>

一个标签。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

当你通过浏览器的【查看源代码】时（不是检查），不管你在任何页面，内容也只会有上面的几句代码，所以爬虫也不会从你的源代码资源中获取到你通过框架动态生成的dom信息。
了解了为什么，就能有对应的解决方案，恰巧官方都有提供。
在官方提供的方案如下：

1、SSR服务端渲染

什么是服务端渲染？

2、预渲染处理

如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。
如官方文档所描述，当你的项目只需要少许的页面来支持SEO，那么完全不许用SSR来构建动态html项目，官方建议可以通过预渲染来对特定路由生成一个静态html文件以支持爬虫SEO，这种做法更简单，并且在已经构建好的一个项目上可以上手即用完成需求。

开始代码

第一步

如果你使用 webpack，你可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试 - 事实上，作者是 Vue 核心团队的成员

使用官方推荐的预渲染插件prerender-spa-plugin

npm install prerender-spa-plugin --save

在vue.config.js中

const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const prerenderRoute = [  // 这里是需要生成独立html文件的路由地址
  '/',
  "/setting",
  "/account"
];
module.exports={
 configureWebpack: (config) => {
    config.entry.app = ["./src/main.js"];
    if (process.env.NODE_ENV !== "production") return; // 这里是判断是否为生产环境，此操作只需要在打包时配置，本地开发时不建议开启，因为会进入浏览器预渲染生成影响正常项目开发。
    return {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, "dist"),

          routes: [...prerenderRoute],

          renderer: new Renderer({
            inject: {
              foo: "bar",
            },
            headless: false,
            
            renderAfterDocumentEvent: "render-event",
          }),
        }),
      ],
    };
  },
}

第二步
在main.js入口文件中加入mouted事件。这里的render-event与上方的同名

new Vue({
  router,
  store,
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'))
},
}).$mount('#app')

第三步

调整路由模式为history

const router = new VueRouter({
  mode: 'history',
  routes,
  base:'/',
})

因为使用了history路由模式，也需要在服务器配置对应的路由重写，保证其他页面刷新后不丢失提示404。

最后

build打包

$ npm run build

查看dist目录，会发现打包后的dist中多了2个我们路由对应的文件夹。

进去后是一个单独的html文件

我们打开这个文件可以看到
在这里插入图片描述

页面内容已经跟dist/index.html不同，并且是该页面的元素代码。

完成

特别注意

prerender-spa-plugin并不支持对 about/:userId这样的动态路由预渲染

最后

通过vue-meta-info搭配prerender-spa-plugin可以让一个SPA项目也能简单支持seo，不过局限性还是存在，所以如果需要有良好的seo效果，最好还是使用服务端渲染，现在市面上已经有很成熟的SSR框架啦，或者手撸原生。

YoLoViga

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue项目利用预渲染prerender-spa-plugin处理seo --viga

vue项目利用预渲染处理seo写在前面什么是SEO？SEO是英文 Search Engine Optimization 的缩写，中文意思“搜索引擎优化”。SEO是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，从而获得更多流量，最终达成品牌建设或者产品销售的目的。SEO的目的？提升搜索引擎爬虫覆盖率提升平台知名度…爬虫是什么以百度爬虫为例1、发现网站：百度爬虫每天都会在各个网站上爬，抓取无数的网站与页面，进行评估与审核
复制链接

扫一扫