如何结合JavaScript和SEO与同构JS
百度声称他们现在在抓取和索引JavaScript方面要好得多。不幸的是,目前的结果仍远未实现。有很多例子证实了这一点,其中一个是Hulu.comJavaScriptSEO失败。您在浏览器中看到的内容是已处理,呈现的内容。因此,爬虫可以看到浏览器看到的完全相同的输出,这完全解决了SEO索引问题。将所有下载的代码渲染到DOM,然后等待app/website引导并执行初始AJAX请求也需要一段时间。
基于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重要的是,用于构建应用程序的应用程序框架也必须支持这种方法(但是关键的那些做或者有插件来做— Angular JS,React JS)。如您所见,列表中没有Ruby on Rails或Django。这些框架不能用于构建同构JavaScript应用程序,但它们可用于构建支持这些JavaScript应用程序的API,这是将数据处理代码与JavaScript支持的用户界面分离的好方法。
所有这些意味着这种方法不太适合现有项目,因为它不是一种即插即用的解决方案。如果它们严重依赖API,它可以很好地与现有的应用程序 配合使用,但仍然需要大量的工作来实现。
你需要专业知识这仍然是一种相当新的方法,与旧的方法(例如服务器端渲染/jQuery混合)非常不同,需要尖端技术。因此,您需要能够胜任这项工作并愿意使用这些新技术的开发人员;开发人员,他们不怕实验并且沾沾自喜。
有时,现成的图书馆不能很好地协同工作,有时你需要自己解决问题,而且你需要必要的经验才能将应用程序带到终点。
同构JavaScript入门虽然同构方法尚未广泛流行,但它获得了很大的吸引力。在这一点上,它可能是构建大型动态应用程序的Zui佳方式,该应用程序需要良好,流畅的用户体验,同时不会影响SEO。
对于小型项目而言,这可能不是一个好主意,因为它需要大量的工程和经验才能做到正确,但随着时间的推移,随着新的库和工具的开发需要处理更复杂的流程部分,这将变得更加容易。
总的来说,它是解决搜索引擎优化索引问题的一种非常有前途的方式,这种问题多年来一直困扰着社区。如果您正在构建一个需要很好的SEO兼容性的新的大型应用程序,那么您一定要考虑它。
SEO和&开发商在对本文进行研究时,我意识到尽管我们(SEO)认为,开发者社区对于基于JavaScript创建SEO友好型网站感到非常兴奋。
我认为我们需要开始利用同构JavaScript和其他令人敬畏的新技术的潜力。特别感谢Kamil Grymuza,他为这项研究提供了很多帮助(实际上和我共同写了这篇文章)。我想尽快写更多关于JS和SEO的文章,因为有很多有趣的话题要讨论。
图片来源
特色图片: lenkaserbina/Depositphotos.com
在岗照片: stockertop/Depositphotos.com
CategorySEO