如何进行网页页面设置 (2)

  “当你在没有服务器端渲染的情况下使用React时会发生什么情况,爬虫会在第一页停止,因为它看不到任何要跟随的超链接...它使爬行过程非常缓慢和低效。这就是为什么网站基于React(以及类似的JavaScript平台)构建在Google上的表现比主要为爬虫程序提供纯HTML的网站更糟糕......纯HTML网站可以非常有效地被抓取,新添加和更改的内容将被更快地抓取和索引,并且Google可以更好地评估此类网站上各个网页的抓取优先级。“

  虽然他没有为此提供任何证据,但它似乎与其他排名决定者的理念一致,如页面速度。

  如果SEO是至关重要的,该怎么办

  最重要的是,如果SEO很关键,您不能依赖SPA的客户端呈现,并且必须确保您的网页中包含内容。

  但这并不意味着您需要放弃SPA架构。有两种技术,服务器端渲染和预渲染,它们都可以实现预期的结果。

  服务器端渲染

  服务器端呈现(SSR)是Web服务器作为服务器请求/响应周期的一部分呈现页面的位置。在Vue.js和其他类似框架的情况下,这是通过针对虚拟DOM执行app来完成的。

  虚拟DOM的状态将转换为HTML字符串,然后在发送到客户端之前注入到页面中。当页面到达浏览器时,JavaScript应用程序将无缝地挂载在现有内容上。

  SSR保证您的页面将是爬虫友好的,因为无论爬虫如何运行JavaScript,或者甚至是否运行JavaScript,页面内容都是完整的。

  SSR有其缺点:

  您需要将代码设计为“通用”,即它必须在浏览器和基于服务器的JavaScript环境中工作。这意味着任何期望浏览器API和对象

  window

  可用的代码都不起作用。

  您的应用将在每次向服务器发出请求时运行,增加额外的负载并减慢响应速度。缓存可以部分缓解这种情况。

  实施SSR既复杂又耗时,因此项目需要更多的开发人员时间。

  它只适用于Node.js后端。SSR可以使用非节点后端完成,例如,通过使用PHP扩展v8js,但是这样的解决方案非常有限。

  如果您希望在Vue.js SPA中实现服务器端呈现,则应从官方指南开始:Vue.js服务器端呈现指南。我还写了一篇关于使用Laravel和Vue.js实现SSR的指南:使用Laravel和Vue.js 2.5进行服务器端渲染。

  提示:像Nuxt.js这样的框架带有开箱即用的服务器端渲染。

  预呈现

  如果由于上述原因之一而无法使用SSR,则还有另一种方法:预渲染。使用此方法,您可以在开发环境中使用无头浏览器运行应用程序,对页面输出进行快照,并使用此快照将HTML文件替换为服务器的响应。

  它与SSR的概念几乎相同,只是它是在部署前完成的,而不是在实时服务器上完成的。它通常使用像Chrome这样的无头浏览器来执行,并且可以与Webpack,Gulp等合并到构建流程中。

  预呈现的优点是它不需要Node.js生产服务器,也不会向生产服务器添加负载。

  然而,预渲染也有缺点:

  它对于显示更改数据的页面不起作用,例如,Vue HackerNews。

  它不适用于具有用户特定内容的页面,例如具有用户个人详细信息的帐户页面。然而,这些类型的页面对SEO不太重要; 你通常不希望索引的帐户页面。

  您需要单独预渲染应用中的每条路线,这可能会占用大量网站的大量时间。

  如果你热衷于在Vue.js应用程序中实现预渲染,我已经在这个博客上写了一个指南:Pre-Render A Vue.js App(带节点或Laravel)

  提示:为prerendering for SEO可以从prerender.io作为服务购买

  结论

  许多开发人员看到谷歌2014年关于JavaScript渲染的公告是对SEO内容的SEO担忧的终结。实际上,无法保证Googlebot会正确呈现网页,如果确实如此,它仍然可能会将网页排名低于竞争网站中的静态HTML网页。

  我的建议:如果您打算使用SPA架构,请确保提供服务器呈现或预呈现的页面。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/44eff05a10efc7ee8f34ca9676087002.html