为爬行和索引目的优化单页应用程序

近年来，随着网页越来越远离纯HTML，出现了一个新的SEO挑战。因此，我们现在经常需要优化基于javascript的内容。

现在，JavaScript SEO当然，不是坏事。毕竟，该技术开辟了呈现内容和改善用户体验的许多新可能性。

但是，让我们面对现实吧;让JavaScript页面被搜索引擎抓取和索引并不像优化传统网页那么容易。

这就是我写这篇文章的原因。在这个页面上，你将学习如何优化一个特定类型的JS内容单页面应用程序(温泉)- 为SEO。我也会与你分享一些最好的做法。

但是，让我们首先了解一个单页应用程序是什么，以及如何影响SEO。

什么是单页应用程序?

顾名思义，单页面应用程序是基于js的应用程序，它从单个页面加载所有内容。

与传统的网站不同，单页应用程序不会将单独的页面存储为单独的HTML文件。相反，它使用单个页面作为模板，使用AJAX调用呈现相关内容。

将SPA想象成与网站交互时填充了用户请求的大而空的占位符是最简单的方法。

从搜索引擎优化的角度来看，了解它是什么意思，占位符只加载一次。这是它在它内部的内容，这取决于用户请求的信息。

单页应用vs网站

这与传统网站的工作方式相反。每当用户在一个典型的网站上点击一个按钮时，浏览器窗口就会加载一个新页面。这会导致页面加载至少需要一些等待时间。

使用SPA，占位符只加载一次。它在浏览器中仍然打开，并且当用户点击导航按钮时，其内容仅更改。

Gmail是一个众所周知的单页应用程序的例子。请注意，无论何时你与收件箱交互，侧边栏和标题在整个过程中都保持不变。

Twitter是另一个流行的SPA。Instagram和Jira也是。

许多SaaS公司已采用SPA创建仪表板并构建形式密集型应用程序。

因此，使用spa提供了令人难以置信的好处:

• 由于页面不必根据每个用户的请求重新加载，所以内容加载得更快。
• spa不向服务器发送任何额外的查询，这将释放进程中的服务器资源。
• SPAS简化了Web开发，因为网络开发团队需要开发和维护单个页面（容器）。
• 以上的结果也会导致更少搜索引擎优化技术和代码错误。
• SPA也提供更简单的移动适应性，更快的缓存。

不幸的是，单页应用也为SEO挑战了一些挑战。

SEO优化单页面应用程序的挑战

我承认水疗背后的技术是惊人的。不幸的是，它对SEO也有挑战性。

对于一个，SPA仅包含其代码中的基本页面结构。通过动态API调用调用所有内容和单个页面元素。这意味着在浏览器中的客户端上的所有内容加载，但仅向请求它的个人用户显示。

输入,那么谷歌机器人。为了让谷歌对您的内容进行排名，搜索引擎必须首先发现一个页面，呈现它，抓取并理解它的内容，最后对它进行索引。

但由于SPA不包含内容，Google Boot可以轻松访问，因此爬虫仅看到一个空的容器。

让我用一个例子来说明。这是一个SPA页面，任何用户都会看到它:

从搜索引擎的角度来看，所有内容你见上文不在那里。以下是访问页面时会看到Google Bot的内容：

那么，你能做什么来避免它？

幸运的是，你有三种不同的选择。

三种方法可以优化SEO的单页应用

# 1。预呈现的内容

当预呈现内容时，您运行单页应用程序无头浏览器．然后获取页面的快照，并在服务器的响应中使用该快照替换HTML文件。谷歌移动友好测试工具是一个无头浏览器，用于测试你的应用程序如何在HTML中呈现。

使用这种方法，预呈现发生在预开发中，而不是在活动服务器上。

结果是静态页面，可以通过GoogleBot访问，爬出和索引。

不幸的是，这种方法有其缺点。

首先，因为您创建了页面的静态快照，所以该方法对于数据变化的内容并不理想。

对于用户特定的内容，诸如类似于类似原因的页面，它不起作用。

最后，由于预渲染内容的工作方式，这种方法在大型网站上也需要大量的资源。

# 2。动态呈现的内容

动态渲染创建一个单独的平面，用于爬网的单页应用程序的基于单页应用程序的版本。

在此方法中，呈现的站点的版本取决于检测到的访问内容的用户代理。如果检测到的代理是BOT，则服务器将提供静态，平坦的HTML内容。但是，如果检测到的代理是人类，则浏览器将显示单页应用程序。

然而，该方法的一个主要缺点是谷歌可能会放弃对动态呈现的支持，使得站点没有一个可索引的版本。

# 3。服务器端呈现

最后一种方法也是目前最流行的。

使用服务器端呈现，Web服务器呈现页面的一部分作为服务器请求/响应周期的一部分。当服务器端呈现时，SPA呈现对抗A.虚拟DOM．然后，它会被转换成一个HTML字符串，在为用户显示之前，该字符串会被包含在页面中。

这种方法也有其缺点。

呈现的代码必须在浏览器和基于服务器的JavaScript环境中工作。单页应用程序将每个请求运行到服务器，因此它将运行较慢，从而增加页面加载时间。

优化水疗中心的最佳实践

最后，让我分享一些最佳实践，这些实践将帮助您优化单页面应用程序的SEO。

# 1。立即加载内容

正如上面所看到的，spa的挑战是只有框架(或容器)被加载到浏览器中。用户可以用它做任何他们需要的事情——查找信息、访问信息等等。

但是，谷歌不能。由于我在上面的屏幕截图上显示了您，框架仍然为空到搜索引擎。

通过我上面解释的三种呈现方法中的任何一种，立即加载内容，让搜索引擎在访问页面时进行抓取和索引。

# 2。用不同的url中断长spa

spa通常以长时间运行的内容部分为特征。这些页面中的许多可以很容易地分成单独的页面，谷歌可以单独索引这些页面，从而提高站点的搜索可见性。

在这些部分使用不同的url将导致用户仍然体验到相同的用户体验——滚动浏览一个很长的页面。另一方面，搜索引擎将这些url视为独立的实体，并相应地建立索引。

这一步涉及到利用历史API来创建不同的url。

# 3。输出链接为< >，而不是JS onclick

尽管spa是基于js的框架，但不要使用JavaScript onclick操作编写链接。这将使他们对谷歌机器人不可见。相反，使用搜索引擎理解和遵循的HTML < >标记来编写所有链接。

# 4。始终在源代码中包含导航

在创建SPA时，您可能想在框架之外包含导航。然而，这将导致通过AJAX调用这些链接，而不是立即在HTML中呈现。

在框架源代码中导航的好处是，搜索引擎将立即访问它，无论您选择哪种方法来呈现实际页面的内容。

关键的外卖

JavaScript和单页应用程序正在逐步成为Web开发的标准。这意味着我们，SEO必须学习和锐化我们的优化动态呈现JavaScript内容。

具体地说，当涉及到spa时，有三种主要方法来确保这些内容可以由搜索引擎呈现、爬行和索引:

• 预呈现内容，显示内容的快照，以便谷歌爬行和索引。
• 动态渲染检测用户代理并显示SPA或静态HTML，具体取决于谁访问该站点。
• 服务器端呈现，预呈现作为服务器请求和响应周期一部分的内容。