如何在vue项目中做SEO优化

发布时间：2024-06-10 05:50:35　浏览次数：

搜索引擎优化（Search engine optimization，简称SEO），指为了提升网页在搜索引擎自然搜索结果中（非商业性推广结果）的收录数量以及排序位置而做的优化行为，是为了从搜索引擎中获得更多的免费流量，以及更好的展现形象。

一般爬虫抓取页面内容是先从一个页面出发，从中提取出其他页面的链接，然后当作下一个请求的对象，一直重复这个过程。所以要有良好的SEO，需要你在各大网站上拥有外链，这样会提高你的网站被搜索引擎爬虫的几率。

爬虫拿到HTML之后，就会对其内容进行分析。一般需要进行去杂、分词、建立索引数据库。什么是索引数据库呢？简单地说就是记录一个词在哪些文档中出现、出现次数、出现的位置等等。为什么要建立索引数据库呢？是为了快速查找。

搜索会根据你输入的关键词，分别查询其对应的索引数据库，并对结果进行处理和排序。

• 不利于SEO

• 根据这几个缺点，我们便又引出了接下来讨论的两个主题，SEO和SSR，先谈谈SEO。

1.搜索引擎爬虫的原理就是抓取你的url，然后获取你的html源代码并解析。单页面应用最终渲染页面都是通过js动态生成的，爬虫获取到的html只是单页面的模型页面不是最终渲染的页面，所以用js来渲染数据对seo并不友好。

2.seo的本质就是一个服务器向另一个服务器发起请求，解析请求内容。通常情况下搜索引擎在追求速度的原因下，并不会去执行请求到的js。这时单页面的问题就来了，html文件在服务端并没有渲染数据，实际渲染数据实在客户端完成的，所以搜索引擎请求到的html只是一个结构，这样就很不利于页面内容被搜索引擎搜索到。所以服务端渲染就是为了解决单页面应用在发送到浏览器之前页面就有内容了。

• 搜索引擎优化。SEO是一种通过了解搜索引擎的运作规则（如何抓取网站页面，如何索引以及如何根据特定的关键字展现搜索结果排序等）来调整网站，以提高该网站在搜索引擎中某些关键词的搜索结果排名。

如果项目初始展示 loading图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。 此时，SSR便闪亮登场了

• 在普通的SPA中，一般是框架及网站页面代码发送给浏览器，然后在浏览器中生成和操作DOM（这也就是为什么第一次SPA网站在同等带宽下比传统的在后端生成HTML发送到浏览器要更慢的主要原因），但其实也可以将SPA应用打包到服务器上，在服务器上渲染出HTML，发送到浏览器，这样的HTML页面还不具备交互能力，所以还需要与SPA框架配合，在浏览器上“混合”成可交互的应用程序。所以，只要能合理地运用SSR技术，不仅能一定程度上解决首屏慢的问题，还能获得更好的SEO。

• SSR的优点

• 更快的响应时间，不用等待所有的JS都下载完成，浏览器便能显示比较完整的页面了。

• 更好的SSR，我们可以将SEO的关键信息直接在后台就渲染成HTML，而保证搜索引擎的爬虫都能爬取到关键数据。

• SSR的缺点

• 相对于仅仅需要提供静态文件的服务器，SSR中使用的渲染程序自然会占用更多的CPU和内存资源

• SSR常用框架

• React 的 Next

• Vue.js 的 Nuxt

• Nust中文官网www.nuxtjs.cn/

• 所以要想SEO做的好，建议使用服务端SSR渲染（网页是通过服务端渲染生成后输出给客户端），可采用Nuxt（其本质是Node封装的VUE的SSR框架，所以是在服务端跑的，对首屏渲染友好）

Nuxt的使用参考juejin.cn/post/713230…

• Nuxt要用他的那套约束，也就是说你的项目要迁移到Nuxt去，解决 SEO 问题是不是只有 SSR 呢？其实预渲染也能做到\

• 还有的，就是webpack的预编译，可以对首页先加载出来，然后他再慢慢去加载js文件，这样就不用等待首页加载

• 服务端渲染解决的问题，不仅只是把 HTML 页面给浏览器，更重要的是处理动态逻辑和 JS 代码后，将渲染后完整的 HTML 给浏览器，渲染的过程在服务端。

• 预渲染，是利用构建工具在 webpack 中生成静态的 HTML，直接给浏览器，渲染的过程在本地。

• 预渲染插件里面提到两种不能使用：大量路由、动态内容

• 接下来我们介绍下prerender-spa-plugin插件实现预编译

• 安装：

• vue-cli3.0的写法

• vue-config.js中增加

• 在main.js中增加

• router.js 中设置mode: “history”

  注意：官方文档上 路由模式必须为 。如果不设置history模式，也能运行和生成文件，每个index.html文件的内容都会是一样的。所以必须使用 模式

• 运行npm run build，看一下生成的 dist 的目录里是不是有每个路由名称对应的文件夹。然后找个 目录里 的 index.html 用IDE打开，看文件内容里是否有该文件应该有的内容。有的话，就设置成功了

• 打包之后如下图：

• 

• 

• vue-cli2.0的写法

• 修改 webpack 配置，比较简单就能完成配置\

• 服务端SSR渲染解决的问题，不仅只是把 HTML 页面给浏览器，更重要的是处理动态逻辑和 JS 代码后，将渲染后完整的 HTML 给浏览器，渲染的过程在服务端。
• 预渲染，是利用构建工具在 webpack 中生成静态的 HTML，直接给浏览器，渲染的过程在本地。将服务端编译HTML的时机提前到了构建时，因此降低了服务端的压力
• 共性： 加载速度一样快； 入侵性小；
• 不同： 服务端渲染在服务器；适用于复杂、较大型、与服务端交互频繁的网站，如电商
  预渲染在客户端上；适用于简单的静态页面
• 很奇怪的一点是：打开f12，发现刷新很慢，关掉f12，刷新就很快，不明觉厉，

如果你已经采用了前后分离的单页项目，而你的网站内容不需要AJAX去获取内容和展示内容，那么可以试试 prerender-spa-plugin 这个插件，这个插件是一个webpack插件，可以帮助你在打包过程中通过无头浏览器去渲染你的页面，并生成对应的HTML。当然这个方案适合你的路由是静态的，并且路由数量是有限的。

如果你的内容是AJAX动态获取的，那么vue单页项目可以试试 prerender ,这个是一个预渲染服务，可以帮你通过无头浏览器渲染页面，并返回HTML。这个方案和很相似，都是通过无头浏览器去渲染页面，不同的是渲染的时机，是在打包过程中渲染，注定了其只能渲染静态路由，而 是在请求时渲染，所以可以渲染动态的路由。下面我重点介绍一下方案。

1、安装

2、启动服务 server.js

3、测试

经过上面三个步骤，你就已经启动一个预渲染服务，并且会返回"www.example.com/"的内容，整个过程还是…、等，那么这个和 prerender 是什么关系呢？是否直接使用中间件就可以呢？下面介绍prerender是如何工作的吧。

首先服务端接收到一个页面的请求，然后判断这个请求是否来自搜索引擎的爬虫，如果不是，则直接返回单页项目的HTML，按照普通单页项目的工作模式（客户端渲染），如果是，则把请求转发给prerender服务，prerender服务会通过无头浏览器进行预渲染，渲染完成把内容返回，这样爬虫就可以拿到有内容的HTML了。prerender中间件就是用来判断请求是否来自搜索引擎爬虫和转发请求的。

值得注意的是，prerender服务是不包含无头浏览器的，所以需要自行安装chrome浏览器。因此，整个方案运行需要三部分：

• chrome浏览器
• prerender服务
• prerender中间件

那么prerender服务是怎么知道页面渲染已经完成的呢？ Prerender服务通过计算未完成的请求数量，来确定页面何时完成加载。一旦未完成的请求数达到零，服务会等待一段时间（默认500ms），然后保存HTML。

经过实践，请求一个经过prerender渲染的页面是时间，快的时候约2s，慢的时候会长达8s。一般来说，请求时间在3s以内是最好的。所以我从以下几个方面入手，探索prerender的优化方法。

影响prerender渲染时间的资源主要有js请求资源和api请求资源，api请求时间一般由后端决定，所以我考虑的是如何减少js资源请求时间。一般prerender服务渲染的资源请求地址是由页面请求URL决定的，所以一般是线上的地址，如果我们把prerender服务部署在网站的服务器上，让prerender服务请求资源走本地，那么就可以缩短资源的请求时间了。

如果你的线上服务是开启了CDN的话，那么资源走本地还有一个好处，就是可以节省CDN流量。

prerender提供了一些自定义的选项

：这个参数是prerender检查页面请求是否完成的定时器时间，默认是500ms，即每500ms检查未完成的请求数量是否为零，我将其修改为100ms，提高其检查的频率。

：这个参数是最后一个请求完成之后等待的时间，默认是500ms，主要是请求完成之后，页面更新渲染需要时间，立即返回的话，可能请求的数据来不及渲染，我将时间修改为200ms。

httpHeaders —— 返回合理的HTTP状态码

添加httpHeaders这个插件，可以更改返回的HTML的HTTP状态码，添加方式如下

prerender通过识别在中的标签来设置页面返回的HTTP状态码。

如果你需要设置301重定向，可以这样做

blockResources —— 无需等待图片资源

prerender是根据未完成的请求数来判断是否渲染结束的。但是我们给搜索引擎返回的HTML只需要渲染通过js动态增加的DOM，其实不需要渲染css或者渲染接口返回的图片的，我们来看下prerender在渲染中是否会请求这些资源。 prerender可以开启是否打印请求，开启方式如下：

开启之后就可以在控制台看到请求了，请求里面是包含css和图片资源的。

为什么prerender要等待这些资源呢？因为prerender服务还有一个强大的功能，那就是，其可以通过一个接口给你返回如下的东西：

• 网页的HTML文件
• 网页的屏幕截图（视口或全屏）
• 网页的PDF文件
• 网页的HAR文件
• 执行您自己的javascript并返回json和HTML

很明显，这些功能是需要加载你所需的CSS或图片资源的，不然网页显示有问题。这个时候，如果你只需要满足SEO需求而不需要的功能的话，那么插件就可以派上用场了。插件添加方式如下：

使用插件之后，图片资源和字体资源会被abort（舍弃）。

如果你想更细粒化地控制prerender的返回时机，提前结束或者延后结束，那么可以使用这个标志。

首先需要设置为false，prerender在检测到为之后，会等待你设置为再返回结果。

当你渲染完成之后，一般在接口请求完成并渲染完成之后

这样你就可以更加自由地控制渲染结束的时机。

缓存这里有两个方面，一方面是HTTP缓存（浏览器缓存），另一方面是渲染结果缓存。

首先HTTP缓存可以让prerender服务不用频繁地发起资源请求，节省传输时间。这个我就不展开将，我想讲的是渲染结果缓存。prerender中间件提供了两种缓存方式， redis 或者 memcached ，以redis为例：

你可以通过 beforeRender 和 afterRender 这两个钩子进行细粒化地控制，对于内容变化频繁的不缓存或缓存时间短，对于内容变化不频繁的设置长时间缓存。开启缓存不仅可以加速返回时间，还可以减轻服务器的压力。

统计和监控可以放在中间件的 afterRender 中进行。

要想seo好，使用ssr服务端渲染，即服务端生成静态页面给客户端，交互的请结合Nuxt；或者不在服务端渲染，使用webpack的prerender-spa-plugin插件实现预编译，生成静态的 HTML，直接给浏览器，渲染的过程在本地。使用webpack的code splitting按需加载压缩优化首页渲染或者vue分片

• 如果构建大型网站，如商城类=> SSR服务器渲染
• 如果只是正常公司官网, 博客网站等=> 预渲染/静态化/Phantomjs 都比较方便