如何结合JavaScript和SEO与同构JS

 

基于JavaScript的网站的SEO（使用AngularJS，jQuery，ReactJS等构建）需要大量的知识，开发和测试，并且众所周知难以做到正确。但是让我们面对它，即使遇到所有这些问题，JavaScript仍然存在。它可以让您创建快速，动态，美观的网站，专注于提供出色的用户体验。

百度与JavaScript

我们可以清楚地看到，在去年，百度主要侧重于支持用户体验和性能。我们可以看到在 百度 AMP网站专注于照明快速性能，单页应用（SPA）或渐进式网络应用。

百度声称他们现在在抓取和索引JavaScript方面要好得多。不幸的是，目前的结果仍远未实现。有很多例子证实了这一点，其中一个是Hulu.com JavaScript SEO失败。

这就是为什么SEO通常倾向于将传统的服务器端呈现和添加到浏览器中的小块JavaScript混合作为通用解决方案，这使得应用程序可以被搜索引擎抓取和索引。

不幸的是，这并不完美，因为它通常难以维护，并且并非所有应用程序都可以通过这种方式实现（复杂的应用程序）。用户体验也不是很好，因为加载所有JavaScript库并引导应用程序需要一些时间。

另一种方法是使用运行JavaScript应用程序/网站的预呈现服务并记录HTML输出，然后使用服务器上运行的额外软件将其提供给爬虫。这种方法的好处是，理论上，你可以假装问题不存在，并以任何你想要的方式在JavaScript中构建你的应用程序。

不幸的是，在实践中，这并不总是有效，需要复杂的调试才能修复。Zui重要的是，它是另一个要维护的应用程序堆栈，并且可能与应用程序存在兼容性问题，导致捕获的HTML输出不正确。这是一个问题，因为可能很难注意到任何由此产生的搜索引擎优化问题，直到它为时已晚并且您的排名受到影响。

如你所见，它可能都变得非常复杂。

如果有一个混合可以将快速和动态JavaScript的所有特权与易于抓取的HTML/CSS连接起来怎么办？幸运的是，块上有一个新的孩子，它被称为Isomorphic应用程序。

同构应用程序（也称为通用应用程序）通过在服务器上执行初始渲染，然后使用该HTML作为在浏览器中引导JavaScript应用程序的基础来解决爬行和索引的问题。同构方法充分利用了两个世界（静态HTML和JavaScript），提供了完全可索引，快速且用户友好的网站。

它是如何工作的？

这种同构意味着您的应用程序使用的相同JavaScript代码可以在服务器和客户端上运行（在浏览器中）。

借助此功能，您可以向应用程序提供来自服务器上数据库的一些数据，运行它，并捕获通常需要浏览器组装的结果HTML输出。然后，可以将此输出作为初始HTML提供给请求它的每个人（包括抓取工具，例如百度 Bot）。

然后，您的应用程序可以将此HTML用作自身的基础，并继续在浏览器 中对其进行操作，就好像它首先由浏览器呈现一样。

同构应用程序搜索引擎可索引性的好处

网页抓取工具在抓取和编制JavaScript内容索引方面存在很多困难（其中一些甚至还没有尝试）。爬虫分析原始代码而不处理或呈现它。您在浏览器中看到的内容是已处理，呈现的内容。渲染，处理DOM等需要更多的计算能力，并且比仅仅分析纯文本要复杂得多，因此搜索引擎的爬行方式会更加昂贵。

同构应用程序通过在服务器上执行代码来呈现静态页面，然后让所有负责用户交互的JS由浏览器（用户）运行来解决这个问题。

因此，爬虫可以看到浏览器看到的完全相同的输出，这完全解决了SEO索引问题。所有内容都会呈现，当搜索引擎访问该页面时，它就会存在。

感知加载时间更快

下载JS代码可能需要一些时间，尤其是在互联网连接较慢的区域。将所有下载的代码渲染到DOM，然后等待app/website引导并执行初始AJAX请求也需要一段时间。这通常会导致网站或应用程序的初始加载缓慢，用户不满意，以及网站收入的降低。幸运的是，同构方法解决了这个问题的一部分。

通过在服务器端呈现应用程序标记，不需要大多数AJAX调用，并且客户端上发生的渲染较少（由于服务器上的初始渲染）。这将感知的加载时间减少了大约40％。

没有这样的事情作为免费午餐

正如这句名言所暗示的那样 - mdash;没有什么是免费的。同构方法非常好，因为它解决了SEO索引问题，加快了加载时间，并简化了应用程序堆栈（与使用预渲染服务相比）。此外，它可以为大型代码库带来好处（更易于维护，客户端和服务器代码分离等）。但是，这是有代价的。

你被迫使用某些技术

首先，您的服务器需要支持运行NodeJS应用程序（用于JavaScript的服务器端呈现）。

Zui重要的是，用于构建应用程序的应用程序框架也必须支持这种方法（但是关键的那些做或者有插件来做＆mdash; Angular JS，React JS）。如您所见，列表中没有Ruby on Rails或Django。这些框架不能用于构建同构JavaScript应用程序，但它们可用于构建支持这些JavaScript应用程序的API，这是将数据处理代码与JavaScript支持的用户界面分离的好方法。

所有这些意味着这种方法不太适合现有项目，因为它不是一种即插即用的解决方案。如果它们严重依赖API，它可以很好地与现有的应用程序 配合使用，但仍然需要大量的工作来实现。

你需要专业知识

这仍然是一种相当新的方法，与旧的方法（例如服务器端渲染/jQuery混合）非常不同，需要尖端技术。因此，您需要能够胜任这项工作并愿意使用这些新技术的开发人员;开发人员，他们不怕实验并且沾沾自喜。

有时，现成的图书馆不能很好地协同工作，有时你需要自己解决问题，而且你需要必要的经验才能将应用程序带到终点。

同构JavaScript入门

虽然同构方法尚未广泛流行，但它获得了很大的吸引力。在这一点上，它可能是构建大型动态应用程序的Zui佳方式，该应用程序需要良好，流畅的用户体验，同时不会影响SEO。

对于小型项目而言，这可能不是一个好主意，因为它需要大量的工程和经验才能做到正确，但随着时间的推移，随着新的库和工具的开发需要处理更复杂的流程部分，这将变得更加容易。

总的来说，它是解决搜索引擎优化索引问题的一种非常有前途的方式，这种问题多年来一直困扰着社区。如果您正在构建一个需要很好的SEO兼容性的新的大型应用程序，那么您一定要考虑它。

SEO和＆amp;开发商

在对本文进行研究时，我意识到尽管我们（SEO）认为，开发者社区对于基于JavaScript创建SEO友好型网站感到非常兴奋。

我认为我们需要开始利用同构JavaScript和其他令人敬畏的新技术的潜力。特别感谢Kamil Grymuza，他为这项研究提供了很多帮助（实际上和我共同写了这篇文章）。我想尽快写更多关于JS和SEO的文章，因为有很多有趣的话题要讨论。

 

图片来源

特色图片: lenkaserbina/Depositphotos.com

在岗照片: stockertop/Depositphotos.com

CategorySEO