框架或视图库,比如 Angular 或 React。如果是这种情况,你会想看看一些 Angular.JS 或React SEO建议。如果您使用其他东西,简短的版本是您需要在服务器上预渲染页面,然后在加载时使用您的应用程序。这使您能够拥有这些工具为您提供的所有好东西,同时还提供谷歌等人可以理解的东西。尽管他们最近建议他们越来越擅长渲染这种应用程序,但我们仍然看到很多例子,当他们爬取沉重的 JS 内容时,它们会非常糟糕。 假设您处于聪明的 JS 前端技术的世界中,为了确保您以 PWA 方式做事,您还需要提供使页面与 HTML 一起工作所需的 CSS 和 JS 。不仅包括script带有 <code>src 属性的标签,还包括整个文件,内联。 显然,这意味着您将增加您发送的页面的大小,但它的好处是页面将立即加载。
不仅如此,所有的 JS(提取所需)和 CSS(理解设计所需)都立即交付,浏览器将能够呈现您的内容并交付看起来正确且可以直接运行的内容。 同样,由于我们将在内容到达后使用服务工作者来缓存内容,因此这不会产生太大影响。我们还可以单独缓存 号码表 所有需要的 CSS 和 JS 外部文件,并从缓存存储中加载它们,而不是每次都获取它们。这确实使 PWA 在用户第一次尝试请求您的网站时失败的可能性稍大一些,但您仍然可以使用错误消息或默认内容优雅地处理这种情况,然后在下一页重试看法。 人们还可能遇到其他潜在问题。例如,华盛顿邮报建立了他们网站的 PWA 版本,但它只能在移动设备上运行。显然,这意味着该网站可以被谷歌的移动机器人很好地抓取,但不能被桌面机器人抓取。
尊重首字母缩略词的 P 部分很重要——网站应该启用用户可以使用的功能,但对于那些使用不支持这些功能的浏览器的人来说,仍然可以正常工作。这是关于逐步增强功能,而不是要求人们升级他们的浏览器。 所有这一切唯一有点棘手的是,为了获得最佳体验,您需要为离线优先体验设计应用程序。上面 Jake 的演讲中提到了这是如何完成的。沿着这条路线走的唯一问题:只有在有人到达您的网站并等待足够长的时间才能加载所有内容时,您才会提供内容。显然,在谷歌的情况下,这不会很好地工作。所以这就是我的建议... 而不是仅仅发送您的应用程序外壳,然后使用 AJAX 在加载时请求内容,然后拾取,而是使用以下工作流: 用户到达现场 站点发回应用程序外壳(使一切立即运行所需的最低 HTML、JS 和 CSS),以及... ...内容 AJAX 响应,作为应用程序的状态预加载 应用程序立即加载,然后拿起前端。