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

已发表: 2021-12-27

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

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

一般来说，根据 TOP 30 PWA 报告，“渐进式网络应用的平均转化率比原生移动应用高 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 的例子和主要好处

progressive-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-brand-marketing-statistics-graph-growth-business-company

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

  1. 害怕改变已经运行良好的现有系统。
  2. 对 PWA 如何与 SEO 协同工作理解不足。

正如 John Mueller（谷歌分析师）所说，“PWA 目前在谷歌搜索中没有任何优势。”

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

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

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

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

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

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

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

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

所有这些都使得网站所有者很难既改善访问者的用户体验，又使他们的内容针对搜索引擎进行优化。

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

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

1.应用动态渲染

动态呈现向不同来源显示不同版本的内容。 访问者获得 CSR 版本，爬虫获得服务器端渲染版本。 这允许改进 Google 机器人对基于 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-移动网站-响应式设计-浏览器

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

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

底线

end-conclusion-final-words 最终结论

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

如您所见，您可以通过成功结合使用 SEO 和 PWA。 还应该指出的是，PWA 是一种年轻的创新型软件，因此可以期待改进。 

作者-形象-Ivan-Jones 本文由 Ivan Jones 撰写。 Ivan 是 Clockwise.Software 的 SEO 专家，在该行业拥有超过 5 年的经验。 他知道多年来帮助他将网站保持在谷歌搜索结果顶部的细微差别。 作为一个狂热的学习者，他热衷于测试有利于 SEO 结果的新方法。