渐进式 Web 应用程序 (PWA) 和搜索引擎优化 (SEO)

已发表: 2021-12-27

Progressive Web App (PWA) 是一种通过 Web 交付的应用软件。 它是使用 HTML、CSS、JavaScript 等标准 Web 技术构建的。PWA 通常用于提高网站的转化率和流量。 从 2021 年起，Google Chrome、Apple Safari、Firefox for Android 和 Microsoft Edge （全部或部分）支持 PWA。

作为一个相对较新的发展，PWA 优化在大多数情况下仍然会产生积极的结果，并且具有惊人的统计数据。 PWA Stats 不断报告实施 PWA 的服务所获得的收益。

总的来说，根据 TOP 30 PWA 报告，“渐进式 Web 应用的平均转化率比原生移动应用高 36%”。

PWA 是在线营销的好帮手。 这就是为什么它们在 SEO 人群中很受欢迎。 但是，就像 React 和 SEO 一样，PWA SEO 组合也有其困难。 在本文中，我们将阐明 PWA 如何与 SEO 协同工作。

目录显示
  • PWA 的示例和主要优点
    • 1. 星巴克
    • 2.品脱
    • 3.优步
  • 搜索引擎优化的重要性
  • 渐进式 Web 应用程序的 SEO：有什么问题？
  • 服务器端渲染和客户端渲染
  • 如何在不丢失搜索引擎优化的情况下实施 PWA？
    • 1. 应用动态渲染
    • 2.结合SSR和CSR
    • 3. 使用 SEO 友好的 JavaScript 框架构建您的 PWA
    • 4. 使用现成的 PWA 解决方案
    • 5. PWA工作室
    • 6.ScandiPWA
    • 7.Vue店面
  • 在 PWA 实施过程中如何避免与 SEO 相关的错误？
  • 底线

PWA 的示例和主要优点

propressive-web-application-apps-pwa-framework

任何 Web 服务都可以是 PWA。 对此有三个主要要求：

  1. 在 HTTPS 下运行。
  2. 包括一个 Web 应用程序清单。
  3. 实现一个服务工作者。

PWA 的主要目的是为每个用户提供卓越的功能。 以下是 PWA 提供的主要优势列表：

  1. PWA 为几乎所有业务带来了新的机会和增长。 它结合了最好的应用程序和网络质量，响应迅速并且能够在任何设备上工作，并且不一定需要快速的网络。
  2. 传输层安全性使其安全。
  3. Service Worker（浏览器在后台运行的特殊脚本）允许 PWA 在离线模式下工作。

让我们看一些采用 PWA 的最佳示例：

为您推荐：用于构建渐进式 Web 应用程序 (PWA) 的最流行框架。

1. 星巴克

星巴克点餐系统的 PWA 简单易用。 它看起来就像他们的原生应用程序，但确实能够在用户浏览菜单并将商品添加到购物车时离线运行。 这种解决方案的最大好处是 PWA 几乎比星巴克的标准应用程序小两倍。 因此，该公司显着增加了网络用户的数量。

2.品脱

在发现只有 1% 的 Pinterest 移动用户因性能不佳而下载应用并登录后，该移动应用在 PWA 技术的基础上进行了重构。 多亏了这一点，花费的时间、广告收入和核心参与度等指标增长了 40% 到 60%。

3.优步

Uber 网络应用程序被重建为 PWA，旨在在低速网络和与本地 Uber 应用程序不兼容的旧智能手机上提供快速服务。 多亏了这一点，一个超轻量级的核心应用程序在 2G 网络上的加载时间约为 3 秒。

搜索引擎优化的重要性

谷歌搜索引擎优化排名seo

SEO 就是针对搜索引擎 (SE) 优化您的网站。 其主要目的是提高网站在搜索结果中的排名并吸引访问者。 它基于 SE 算法并使用关键字来帮助搜索引擎显示相关内容并吸引目标受众访问网站。 这就是 SEO 可以为您的网站带来自然流量的方式，这是同类中最好的。 与直接和付费流量不同，它能够将您的大多数访问者变成您的客户和客户。

渐进式 Web 应用程序的 SEO：有什么问题？

seo 品牌营销统计图表增长业务公司

尽管 PWA 提供了所有好处，但许多网站所有者仍然对实施该技术犹豫不决。 主要原因有两个：

  1. 害怕改变已经运行良好的现有系统。
  2. 对 PWA 如何与 SEO 协同工作的理解不足。
正如 John Mueller（谷歌分析师）所说，“PWA 目前在谷歌搜索中没有任何优势。”

许多 PWA 是使用 JS 框架构建的，这些框架并不以其对 SEO 友好的性质而闻名。

因此，与传统的基于 HTML 的网站不同，依赖 JavaScript 的 PWA 对 SEO 具有挑战性。 这就是为什么它们在可搜索性方面没有提供任何优势。 然而，与流行的看法相反，这并不意味着渐进式网络应用程序不能被搜索引擎索引。 你只需要为此使用不同的技术。

服务器端渲染和客户端渲染

移动应用程序设计开发技术

大多数网站使用服务器端渲染 (SSR)。 这是页面在服务器端呈现而不是在浏览器中呈现的最简单方法。 但是，每次用户请求页面时都会加载整个 HTML，当互联网连接不稳定或速度不够快时，这可能会出现问题。

基于 JavaScript 的 PWA 使用客户端呈现 (CSR)，其中内容在客户端的浏览器中呈现。 每次用户请求页面时，它都不会发送整个 HTML 页面。 JavaScript 文件仅显示客户端浏览器中页面信息的必要部分。 这就是为什么即使在互联网连接不佳的情况下页面加载速度也会更快。

然而，为什么很多站长仍然拒绝使用 CSR？ 问题是谷歌机器人。 它可以在 HTML 文档中完全可见的代码中读取网站的内容。 就其而言，CSR 完全依赖于搜索引擎处理 JavaScript 的能力。 这就是为什么有人认为 CSR 应用程序不能被索引的原因。 然而，事实上，在所有搜索引擎中，谷歌在处理 JavaScript 方面是最好的。

尽管如此，这仍然不代表 JavaScript 和 SEO 的问题就解决了：Google 承认 JS 的处理并不完美。 也就是说，基于 JavaScript 的页面的爬取过程比 HTML 页面的爬取过程需要更多的时间。 事实上，这意味着您将不得不等待更多时间让 JavaScript 内容出现在搜索引擎的结果页面中。

所有这些都使网站所有者难以同时改善访问者的用户体验并使其内容针对搜索引擎进行优化。

如何在不丢失搜索引擎优化的情况下实施 PWA？

pwa-framework-profressive-web-application-apps
您可能会喜欢： Magento PWA Studio：Magento 的渐进式 Web 应用工具！

1. 应用动态渲染

动态呈现向不同来源显示不同版本的内容。 访问者获取 CSR 版本，爬虫获取服务器端渲染版本。 这允许通过 Google bot 改进基于 JavaScript 的页面的索引。 这样，您将为您的客户提供最方便的用户体验，而不会给网站的 SEO 带来风险。

2.结合SSR和CSR

确保爬虫将使用服务器端呈现看到内容的最重要部分（肯定需要传递给搜索引擎）。 爬虫一发现该页面，就会选择此信息。 其余信息将在流程的第二阶段通过客户端渲染自动处理。

3. 使用 SEO 友好的 JavaScript 框架构建您的 PWA

我们非常推荐的是 GatsbyJS。 使用此框架构建 PWA 网站非常容易（以及将现有的 Gatsby 网站变成 PWA）。 即使互联网连接速度很慢，它也会在构建步骤中预渲染您的网站，以获得出色、无延迟的性能。 多亏了这一点，您的访问者可以获得类似应用程序的浏览体验。

4. 使用现成的 PWA 解决方案

今天，PWA 比以往任何时候都更实惠。 所以，如果你不想在 PWA 开发上浪费大量的时间和资源，你可以使用一些根据 SEO 原则制作并经过全面测试的即用型 PWA 解决方案，这样你就可以确定质量的代码。

5. PWA工作室

PWA studio 于 2019 年发布，作为一种 Web 技术标准，旨在提供类似应用程序的体验。 事实上，它并不完全是一个现成的解决方案：它更像是一组用于 PWA 开发的工具和功能。 这个解决方案非常复杂且令人印象深刻，但需要额外的调整。

6.ScandiPWA

ScandiPWA 是一个基于 React 和 Redux 的开源解决方案。 它的设计旨在提高网站的速度和离线工作的能力。 它还不断更新，因此您将始终获得新功能。

7.Vue店面

这是市场上首批可用的 PWA 解决方案之一。 实际上，Vue Storefront 是一种通用的一体化解决方案，但需要额外的维护资源。

在 PWA 实施过程中如何避免与 SEO 相关的错误？

seo-mobile-websites-responsive-design-browser

要开发一个精心设计的 PWA，通过提供改进的用户体验来帮助您在 SEO 中获胜，您应该：

  1. 执行 SEO 审核。 这将有助于发现和解决所有与 SEO 相关的问题。
  2. 咨询 SEO 专家。 当您使用 React（例如）构建 PWA 时，您的 SEO 专家应该确切地知道如何结合 React 和 SEO。 这样，您将避免实施后可能出现的大多数问题。
  3. 在开发 PWA 时坚持基本的 SEO 原则。 在 Google 发布的与 Progressive Web Apps SEO 相关的文章中，该公司提供了有关如何构建可索引 PWA 的提示。 其中一些是这样的：
    • 每个页面都应该可以通过特定的 URL 访问。 多亏了这一点，每个页面都将被独立抓取。
    • 该网站应具有响应式设计并针对移动设备进行优化。
    • 使用渐进增强。 多亏了这种策略，PWA 即使在旧浏览器上也能很好地工作。
    • 定期检查 Google 如何使用 Google Search Console 呈现您的页面。 因此，您将始终知道何时升级或更改某些内容。
    • 密切关注页面加载时间。 谷歌会测量每个页面的加载速度，如果你的页面加载速度变慢，谷歌就会降低它的排名。
您可能还喜欢： React Native vs Flutter vs PWA：趋势移动应用程序框架之战。

底线

结束结论最后的话

PWA 优化为在线营销提供了很多机会，并为绝大多数企业带来了增长。 事实上，PWA 通常应用的最佳 SEO 实践是用户友好的界面：它具有响应性、结构化和快速渲染。 然而，PWA 仍然没有给 SEO 带来直接的优势，而与 SEO 相关的问题是阻止许多商家在其网站上实施 PWA 的原因。 这就是为什么要小心并使用不同的技术（例如动态渲染、SSR 和 CSR 的组合或即用型 PWA 解决方案）非常重要的原因。 您还应该从一开始就让 SEO 专家参与到这个过程中。

如您所见，您可以通过成功组合 SEO 和 PWA 来使用它们。 还应该注意的是，PWA 是一种年轻的、创新的软件类型，因此可以期待改进。 



Author-Image-Ivan-Jones

本文由伊万琼斯撰写。 Ivan 是 Clockwise.Software 的 SEO 专家，在该行业拥有超过 5 年的经验。 他知道多年来帮助他将网站保持在 Google 搜索结果顶部的细微差别。 作为一个狂热的学习者，他热衷于测试可以使 SEO 结果受益的新方法。