优化做的最好的游戏_如何在vue项目中做SEO优化

什么是 SEO

搜索引擎优化（ ，简称SEO）是指为了从搜索引擎获取更多的免费流量和更好的展示形象，提高网页在搜索引擎的自然搜索结果（非商业推广结果）中的数量和排名位置而进行的优化行为。

搜索引擎的工作原理爬虫程序抓取网页内容

一般情况下，爬虫抓取页面内容的方式是从一个页面开始，从中提取其他页面的链接，然后将其作为下一次请求的对象，重复这个过程。因此，要想有好的SEO，你需要在主要网站上有外部链接，这将增加你的网站被搜索引擎爬虫抓取的机会。

分析网页内容

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

搜索和排序

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

1、单页SPA应用为什么不利于SEO？

1、搜索引擎爬虫的原理是抓取你的URL，然后获取你的HTML源代码并解析。单页应用最终渲染出来的页面都是JS动态生成的，爬虫获取到的HTML只是单页模型页面，并不是最终渲染出来的页面，所以用JS渲染数据对SEO不太友好。

2、SEO的本质就是一个服务器向另一个服务器发起请求，并解析请求内容。通常搜索引擎为了速度，不会去执行请求的js。这时单页的问题就来了。html文件在服务器端不会渲染数据，真正的渲染数据是在客户端完成的。因此搜索引擎请求到的html只是一个结构，不利于页面内容被搜索引擎搜索到。所以服务器端渲染就是为了解决单页应用在发送给浏览器之前，页面上已经有内容的问题。

2. SEO搜索引擎

如果项目先展示图片，再通过 Ajax 抓取内容，那么爬虫不会等待异步完成就去抓取页面内容，这时候 SSR 就派上用场了。

SSR 服务器端渲染

Nuxt 使用参考/帖子/…

5. 两者的区别

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

如果你的内容是通过 AJAX 动态获取的，可以尝试 vue 单页项目。这是一个预渲染服务，可以帮助你通过无头浏览器渲染页面并返回 HTML。这个解决方案与 -spa- 非常相似，两者都使用无头浏览器渲染页面。不同之处在于渲染的时机。-spa- 在打包过程中渲染，这意味着它只能渲染静态路由，但它在请求时渲染，因此它可以渲染动态路由。下面我重点介绍一下这个解决方案。

使用

1.安装

$ npm install prerender
复制代码

2.启动.js

const prerender = require('prerender');
const server = prerender();
server.start();
复制代码

3. 测试

http://localhost:3000/render?url=https://www.example.com/
复制代码

经过上面三步，你就启动了一个预渲染服务，会返回“/”的内容。整个流程还是...-node()、nginx.conf等。那么这和什么关系呢？我们能直接用中间件吗？下面就来介绍一下它的工作原理。

方案原理

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

值得注意的是，该服务不包含无头浏览器，因此您需要自行安装浏览器。因此，整个解决方案需要三个部分：

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

最佳实践

经过实践，请求一个渲染好的页面大概需要2秒，最慢的时候需要8秒。一般来说，请求时间最好在3秒以内。于是我从以下几个方面开始探索优化方法。

减少资源请求时间

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

如果您的在线服务启用了 CDN，那么将资源保存在本地的另一个好处是可以节省 CDN 流量。

优化选项

提供一些自定义选项

l：此参数是检查页面请求是否完成的定时器时间，默认值是500ms，也就是每500ms检查一次未完成的请求数是否为零，我将其改为100ms，是为了增加检查的频率。

：这个参数是上一次请求完成后的等待时间，默认是500ms，这个主要是因为请求完成后，需要时间更新渲染页面，如果立即返回，请求的数据可能来不及渲染，我把时间改成了200ms。

插件-返回合理的 HTTP 状态代码