SPA SEO，我该怎么办

ruparupa

您是否体验过像应用程序一样运行的网站，尤其是小型网站或初创公司的网站？或者说我们公司的网站也是这样的吗？

最近，为了最大限度地提高用户体验，韩国实施 SPA 的网站数量不断增加。然而，我们遇到了人们无法访问我们创建精美的网站的问题，因为它在 SPA 搜索引擎中没有得到很好的曝光。SI公司表示，使用SPA会让网站运行更加流畅，提高客户体验，但是如何解决搜索中不曝光的问题呢？

下面，我们就来看看什么是SPA，它的优缺点是什么，有哪些库或者框架来实现SPA，SPA环境下SEO存在 台湾电话号码清单 哪些问题，以及应该提出什么解决方案来解决。最后还有共同思考基本问题的内容，所以请读到最后。

二. SPA（单页应用程序）1.什么是SPA？
  SPA（单页应用程序）是指通过动态重写当前页面与用户进行通信而无需从服务器加载新页面的 Web 应用程序或网站。换句话说，当前的 HTML 是固定的，只有更改的部分从服务器加载并在客户端渲染。

2. MPA 与 SPA
为了更好地理解上述定义，我们将其与传统 Web 方法 MPA（多页面应用程序）进行比较。





SPA和MPA最大的区别在于加载方式。首先，在 MPA 或传统方法中，当客户端向服务器发出初始请求时，将检索一个静态页面的所有源。之后，当用户单击移动到另一个页面或帖子时，客户端会将整个新的静态页面发送到服务器，即使请求页面上的大多数帖子与之前相同。另一方面，在 SPA 中，当客户端向服务器发出第一个请求时，会检索站点所有必需的源，例如 HTML、CSS 和 js，并在下一次请求中仅检索更改所需的部分使用 AJAX 检索。

换句话说，如下图所示，区别在于第一次请求后每次都检索整个请求，还是只检索部分请求并更改现有的请求。


我们来看一个实际应用这种方法的网站。


在 MPA 方法中，每次移动选项卡时都会加载新的 HTML 源。这就是每次切换选项卡时浏览器窗口都会闪烁的原因。

同时，在SPA方法中


可以看到，即使页面发生变化，HTML 也不会发生变化。这样，与 MPA 不同，SPA 方法即使页面发生变化也不会再次向服务器请求 HTML。

3.SPA的优缺点
尽管由于上述 SPA 的基本特征，SPA 具有重要的优点，但也存在显着的缺点。

（一）优势
1）页面加载速度快。
首先，页面加载速度快。由于客户端在第一次请求时会从服务器获取所有素材（html、css、js等），因此在客户端针对用户的请求进行渲染并不需要每次都从服务器获取数据，因此实际上存在页面移动之间没有延迟。

2）用户体验极佳。
最终，快速的加载速度将提高用户体验并减少用户停留在网站上时因加载而造成的疲劳。

（二）缺点
1）初始页面加载速度慢。
由于客户端第一次请求服务器时会检索所有数据，因此初始请求速度相对比MPA慢。但是，如果您是一位愿意在操作智能手机应用程序时等待初始加载时间的用户，那么这不会是一个大问题。

2）可能不适合SEO。
这将在下面详细讨论。

4. SPA实现框架（React、Vue、Angular）

SPA和SSR框架
实现 SPA 方法的代表性框架包括 React、Vue 和 Angular。每个框架都具有以下特征。

(1) 反应
它是 Facebook 开发的一个框架，可用于 Web 和移动开发。是国内市场占有率最高的框架，自由度很高。但由于自由度高、官方文件匮乏，所以需要法规和协议。

(2) 视图
作为最新发布的框架，它具有易学、轻量、开发快速的优点。

(3) 角度
作为Google开发的框架，它的发布速度最快，拥有最大的社区，并且拥有最好的官方文档。它是一个主要适合大型项目而不是小型项目的框架。

三．水疗&SEO1. 为什么SEO是一个问题
拥有快速网站且用户体验良好的 SPA 实际上并不适合 SEO。原因如下：

(1) JavaScript
由于SPA是在客户端用JavaScript实现单页多个页面的方法，因此可能会出现无法读取JavaScript的搜索引擎无法抓取、无法索引的问题。以 Google 为例，Googlebot 可以在抓取过程中运行并读取 JavaScript，但这也需要花费大量时间，因为 Googlebot 会渲染服务器端根本未渲染的 JavaScript 块并抓取它们。