当前位置:首页 > 内容营销 > 正文

构建不会破坏您的 SEO 的渐进式 Web 应用程序

构建不会破坏您的 SEO 的渐进式 Web 应用程序

PWA 简化了开发并提供了曾经只能在本机应用程序上使用的功能。 以下是您需要了解的 SEO 陷阱。...

传统的 Web 应用程序在服务器上呈现 HTML。 WordPress、Magento、Ruby on Rails 以及最常见的 Web 应用程序和框架都以这种方式工作。

服务器端渲染是 SEO 的理想选择:完整的页面被交付给浏览器和爬虫,从客户端的角度来看,导航看起来与静态站点上的非常相似。

在过去几年中,在客户端呈现的基于 JavaScript 的 Web 应用程序变得越来越流行。 最初用于具有丰富功能的复杂应用程序(如 Google Docs),开发人员越来越多地转向 JavaScript 和框架(如 React 和 Vue)来构建曾经在服务器上呈现的 Web 应用程序。

资料来源:Unsplash 上的 Fabian Grohs

渐进式 Web 应用程序是这一趋势的顶点。 PWA 利用 Web 技术(例如 Service Workers、Web App Manifests 和 Cache API)来提供类似于本机应用程序的 Web 体验。 渐进式 Web 应用程序在移动设备上提供改进的感知性能、无缝页面转换、离线功能和主屏幕安装。

这些好处推动了渐进式 Web 应用程序的广泛采用。 Pinterest 将其 Web 应用程序重建为 PWA,参与度增加了 60%,用户生成的广告收入增加了 40%。 优步的移动站点是一个 50kb 的 PWA,在 2G 网络上加载时间不到三秒。 如果 SEO 处理得当,采用渐进式 Web 应用程序会带来真正的商业优势。

基本的 PWA 加载过程如下所示:

  • HTML 应用程序外壳与应用程序的 JavaScript 一起交付给浏览器。
  • 应用程序外壳和关联的脚本文件被缓存。
  • 运行 JavaScript 代码,从服务器获取内容。
  • HTML 被渲染并显示在浏览器中。
  • 页面转换由 JavaScript 应用程序处理,它也可能在幕后预取、延迟加载和缓存内容。

在实际的应用程序中,这个过程更加复杂:我在这里没有提到 Service Workers,因为 Google 的爬虫不支持它们,但对于设计良好的 Web 应用程序来说,这通常不会成为 SEO 问题。

客户端 JavaScript 和 SEO

首先要了解的是,PWA 不会仅仅因为它是 PWA 就带来任何 SEO 优势。 如果您的企业对其当前站点提供的体验感到满意,则没有理由实施渐进式 Web 应用程序。 实施 PWA 的唯一原因是利用它可以提供的开发、业务和用户体验优势。

资料来源:Unsplash 上的 Artem Sapegin

谷歌处理 JavaScript

几年来,Google 的抓取工具已经能够执行 JavaScript 并为 JavaScript 生成的内容编制索引。 爬虫跟踪 JavaScript 生成的内容中的链接,PageRank 会通过这些链接。 他们还能够处理和索引元数据,例如由 JavaScript 生成的标题标签和元描述标签。

Google 的抓取工具在涉及较新的 JavaScript 时有一些限制,测试以查看您的应用程序中使用的特定 JavaScript 功能是否受支持始终是明智之举——我们将在本文后面讨论这一点。 如果您发现 Google 不支持您的应用程序中使用的 ES6 或其他现代 JavaScript 功能,请考虑使用 Babel 之类的工具将 JavaScript 文件转换为更广泛支持的版本,或者使用服务器端渲染向爬虫呈现预渲染的页。

在处理复杂的 JavaScript 页面时,Google 的抓取工具比以前更加复杂,但网站所有者在客户端呈现内容时需要牢记一些问题。

确保爬虫可以访问 JavaScript 和 CSS 文件

一些 SEO 认为最好的做法是阻止 Googlebot 访问 JavaScript 和 SEO 文件。 当内容由 JavaScript 呈现时,这显然不是一个好主意。

谷歌不是唯一的搜索引擎

Google 可能会正确抓取您的 JavaScript 网络应用程序。 DuckDuckGo、百度、Yandex 和其他搜索引擎并非如此。 如果这些搜索引擎对您的业务很重要,请务必阅读本文的下一部分,我将在其中讨论 JavaScript 应用程序的服务器端呈现。

在某些情况下,页面导航可能会出现问题

在大多数情况下,页面导航在处理客户端路由的 JavaScript 应用程序中运行良好。 一种例外是包含片段的 URL。 为了获得最佳兼容性,请避免在 URL 中使用 #。

使用规范链接避免重复内容问题

企业通常会部署渐进式 Web 应用程序,同时保留原始桌面或移动站点。 如果页面没有正确规范化,这可能会导致重复的内容问题。 在 PWA 页面上,包含一个带有规范属性的链接,该链接指向页面的桌面版本或其他首选版本。

避免在生产中使用 ES6 代码

Google 的爬虫基于 Chrome 41 浏览器,该浏览器在 ES6 之前发布。 转译依赖 ES6 特性(如箭头函数)的代码,或完全避免使用它。

资料来源:Unsplash 上的 freestocks.org

JavaScript 和服务器端渲染

客户端代码执行和页面呈现是渐进式 Web 应用程序的许多优点的原因,但也有几个主要缺点。

首先,正如我已经提到的,替代搜索引擎爬虫没有复杂的 JavaScript 处理能力。 其次,PWA 的初始渲染速度可能比理想情况慢,因为在下载和渲染内容之前必须先下载应用外壳、JavaScript 代码和相关库。

对于低带宽连接的移动用户来说,缓慢加载的 PWA 是一个特殊问题:一旦初始加载完成,PWA 将比传统的服务器端应用程序更快,但这对于必须等待数十秒的用户来说并不舒服在网站可用之前。

这两个问题的解决方案是一样的:在服务器上渲染初始视图。 可以在客户端和服务器上呈现的 Web 应用程序通常称为同构应用程序或通用应用程序。 初始视图在服务器上呈现并与显示它所需的 JavaScript 模块一起发送到浏览器; 其余的 JavaScript 代码和内容根据需要加载。

在服务器上渲染 React 或 Vue 页面比简单地提供应用程序外壳和一些 JavaScript 文件更复杂,但使用 Next.js 等现代工具创建 React 应用程序相对简单,这些应用程序在初始加载时提供出色的性能和 SEO PWA 的好处。 Next.js 是一个 JavaScript 框架,默认情况下为初始加载、自动代码拆分和基于页面的客户端路由提供服务器端渲染。

服务器端渲染并不是解决 PWA 性能问题的灵丹妙药:它显着增加了服务器负载,增加了开发过程的复杂性,并且可能会导致其自身的性能问题,因为初始 HTML 下载量更大,延迟增加。 开发人员应根据具体情况考虑服务器端渲染的优缺点。

资料来源:Phil Desforges 在 Unsplash 上

动态渲染

在最近的一项开发中,Google 引入了动态渲染作为 JavaScript 应用程序的一个选项。 当浏览器请求一个页面时,它会像往常一样在客户端呈现。 但是当 Googlebot 抓取应用程序时,它会在服务器上呈现。 这对 Google 和 Web 应用程序所有者具有优势。 Google 不必使用其资源来呈现 JavaScript 应用程序,并且应用程序所有者可以确保 Googlebot 按预期看到他们的页面。

Google 建议 Web 应用程序应该对内容较多、变化迅速或依赖于比版本 41 更新的 Google Chrome 版本支持的现代 JavaScript 功能的应用程序使用动态呈现。

测试 JavaScript 应用 SEO

本文中的建议将帮助您实施 JavaScript Web 应用程序,而不会在搜索结果中对您的网站造成不利影响。 但是,网站所有者应始终检查 JavaScript 生成的页面是否正在被抓取和编入索引。 Googlebot 擅长处理 JavaScript,但它并不完美。

Fetch as Google 工具是测试 Google 如何看待您的网络应用程序的最佳方式。 请务必使用“Fetch and Render”功能,否则将不会处理 JavaScript 代码。

总之

不久前,客户端 Web 应用程序还是 SEO 的噩梦。 如今,企业可以安全地采用渐进式 Web 应用程序和其他 JavaScript Web 应用程序,而不会对 SEO 产生负面影响。

注意:本文所表达的观点是作者的观点,并不一定代表卡菲昂及其员工或合作伙伴的观点。

,

最新文章