PWA SEO 挑战：是什么阻止了您的 PWA 网站排名？

凭借更快的速度和更好的 UI 和 UX，PWA 可以提升您的 Google Core Web Vitals，从而改善您的 SEO。 许多技术博客和新闻（包括 SimiCart）都声称这一点。

然而，这还不是全部。 事实上，在某些情况下，PWA 可能对您网站的 SEO 不利。

在开发 PWA 网站 10 多年的时间里，我们遇到了几个案例，SEO 性能实际上受到 PWA 的负面影响。

我们已经写过一篇关于 PWA 好处的文章。 现在，为了让您看到冰山的水下部分，以下是店主在实施 PWA 时可能面临的 SEO 的一些重大挑战。

PWA SEO 的主要问题

这可以追溯到基本的网站开发知识：HTML 和 Javascript。 我们敢打赌，即使您根本不精通技术，您也一定听说过这两种编码语言。

简而言之，HTML 是最简单的编码语言，用于创建网站结构。

同时，Javascript 是一个更高级的，它负责更多的特殊效果。

因此，例如，如果您看到一个网页包含大量动态内容、精美的滚动效果或酷炫的滑块，则该网页正确地使用了 Javascript。

（信用：Reddit）

PWA 以其生动的 UI/UX 体验而闻名，您可能已经猜到了，它使用了大量的 Javascript。

问题是：谷歌和许多其他搜索引擎不能很好地呈现 Javascript 网站。 基于 Javascript 的网站通常比 HTML 网站更复杂，处理起来也更繁重。 事实上，不仅搜索引擎，Twitter 或 Facebook 等社交媒体也不太喜欢 Javascript。

因此，搜索引擎机器人在索引您的 PWA 网站时可能会遇到一些问题，从而导致 SEO 性能不佳。

因此，它需要一位对 PWA 有深入了解的熟练专家来优化网站，使其对 SEO 友好。

为 SEO 优化 PWA 时的 6 个障碍。

1.性能问题

“但是 PWA 应该很快？” ——你可能会问。

是的，是的，但这并不意味着 PWA 没有一些性能问题。

PWA 仍然存在一些与速度相关的突出问题。 但是，如果优化得当，PWA 可以快如闪电。

就像尤塞恩·博尔特一样，尽管他天生就是超级天才，但如果没有一个了解他能力并训练他的教练，他也无法成为冠军。

让我们仔细看看每个问题：

问题

Javascript 文件在解析、编译和执行时占用了许多资源。 此外，由于服务器性能不佳，搜索引擎错误无法快速呈现 Javascript 文件。

因此，它可能会影响某些页面速度指标，例如 First Meaningful Paint 和 First Contentful Paint。 由于这两个指标是重要的排名因素，这对 SEO 不利。 此外，落后的网站也永远不会有利于用户体验。

最重要的是，由于 PWA 的 service worker 需要 HTTPS 和 SSL 证书才能运行，它可能会使您的网站比其 HTTP 版本慢。

解决方案

一些提高速度的常见做法是实现 AMP（加速移动页面）和 PWA，以及将 HTTP/2 与 HTTPs 一起使用

由于 PWA 是电子商务领域的一项先进和利基技术，因此最好让经验丰富的 PWA 开发人员优化您的网站速度。

2. Javascript 错误

问题

解析时，Google Chrome 等浏览器可以自动更正 HTML 语法，例如结束标签。 但是，这与 Javascript 错误不同。

因此，Javascript 中的任何错误都可能阻止搜索引擎蜘蛛抓取和索引您的网页。

解决方案

让开发人员为您的网站编写干净且结构良好的 Javascript 代码非常重要，以避免以后进行许多耗时的修复。

如果网站遇到任何 Javascript 错误，开发人员将需要手动清理它们并在修复它们后通知搜索引擎。

3. 由于隐藏内容，超链接/图像未抓取

隐藏内容是人眼看到的内容，而不是搜索引擎看到的内容。 例如，隐藏在“显示更多”按钮或延迟加载菜单链接后面的文本。 这些通常是用 Javascript 编写的动态内容和链接

问题

由于 Google 在理解 Javascript 方面仍有一些困难，因此可能会有一些 PWA 的 Javascript 内容不会被 Google 访问。

如果您的内容（例如重要链接、产品图片）对搜索引擎不可见，他们无法对其进行索引。 因此，这将对您的 SEO 排名产生不良影响。

解决方案

您始终可以依靠 Sitechecker 或 Small SEO 工具等工具来查看您的网页是否包含任何隐藏的内容。 确保提供给用户的所有关键内容（如文本、图片和链接）与提供给 Googlebot 的内容相匹配。

4.模块兼容性

问题

作为一项相对较新的技术，PWA 经常利用最新的模块。 这可能与谷歌或其他浏览器发生冲突，这些浏览器通常依赖于不太现代的模块。 一些值得注意的例子是 ES6、Fetch API 或新的语法或方法。

解决方案

在实施之前，您应该检查它们的兼容性。 如果您的 PWA 的某些模块无法与 Googlebot 一起使用，这不是什么大问题，因为有工具或 polyfill 可以解决这个问题。

Polyfill 是一些 Javascript 代码行，它们可以允许旧浏览器使用现代功能，即使它们本身不支持这些功能。

根据 Googlebot 与哪些模块冲突，也可能有一个转译工具。

供您参考，转译（翻译 + 编译）意味着将一种编程语言翻译和解释为另一种。 我们以 ES6 模块为例，像 Babel 这样的服务可以将现代 C6 Javascript 文件转译为 ES5，这使得旧版浏览器可以顺利运行。

5.服务端渲染问题

为了更好地呈现基于 Javascript 的网站，Googlebot 使用服务器端和客户端呈现。

简而言之，渲染过程是这样的：

1. Googlebot 第一次抓取您的网站以查找链接和内容
2. 服务器将呈现第一次抓取后找到的链接和内容。 这些链接和内容将在不久后编入索引
3. 谷歌第二次、第三次等继续爬取网站
4. 从现在开始，剩余的链接和内容将由客户端呈现，这意味着它们将呈现在您用户的设备上。
5. 渲染完成后，Google 会为您的网页编制索引。

问题

起初，Googlebot 的渲染流程似乎很合理，但也有一些主要缺点：

• 较低的分度速度：

Google 可以使用服务器端渲染快速索引 HTML 文件，但使用客户端渲染索引 Javascript 文件可能需要几天时间

• 优先处理错误的页面：

想象一下，您有一个链接到其他页面的网页。 这些被称为内部链接。 谷歌依靠这些内部链接的结构来了解链接之间的关系以及它们应该优先考虑哪些链接。

但是，对于插入 Javascript 的链接，Google 需要等待客户端渲染完成才能开始索引。 换句话说，谷歌只有在客户端渲染完成后才能全面评估网站的内部链接结构。

因此，一些不需要客户端渲染的不那么重要的链接可能会首先被爬取，而且会更频繁地被爬取。 因此，Google 可以优先考虑您的次要页面并忽略销售页面。

• 服务端渲染和客户端渲染的冲突：

服务器端渲染和客户端渲染之间经常存在问题。 例如，一些重要的页面元素（元标记、规范标记）未编入索引。 此外，这两个阶段可能会向 Google 发送一些混合信号，因此搜索引擎不知道如何处理您的页面。

解决方案

更高效的服务器是解决这些问题的主要方法。 开发人员可能需要优化服务器，以便它立即响应深度链接请求。 此外，它们需要处理渲染良好的 HTML 文件，尤其是那些用于关键页面元素的 HTML 文件，例如导航、链接、内容、元标记和图像。

现代技术也可以帮助我们解决 Javascript 和网络浏览器之间的冲突。 例如，同构技术可以使浏览器更容易呈现 Javascript 文件。

6. SEO常见错误

SEO排名因素有200多个，其中一些技术含量很高，例如规范标签，rebot.txt等。因此，商家可能很容易忽略这些配置，从而最终损害其网站的SEO。

在修复您的 PWA SEO 之前，最好确保您当前的网站遵循最佳 SEO 实践。

>> 查看更多：最佳 Magento SEO 实践

现在，来到最棘手的问题：

我应该升级到 PWA 吗？

…如果我不想损害我网站的 SEO。

对于考虑实施 PWA 的商家来说，这一定是非常令人困惑的，尤其是当有机搜索是一个重要的网站流量渠道时。

但是，这些挑战并不意味着 Google bot 无法抓取 PWA 网站，也不会因为其编程语言而对 PWA 网站进行不同的排名。

只是商家在实施对 SEO 友好的 PWA 网站时需要注意一些技术挑战。

事实上，PWA 网站绝对可以在搜索引擎中排名靠前，如果不比同等的非 PWA 网站更好的话。 如前所述，Web 应用程序改进了 SEO 的核心 Web Vitals。

那么，就 SEO 而言，PWA 是英雄还是零？ 这取决于他们的开发人员是否深入了解 PWA 技术和网站开发。

带走

PWA 可以成为您网站 SEO 排名的双刃刀。 另一方面，其增强的速度和客户体验可以帮助提升 SEO 的核心网络生命力。 在不利的一面，PWA 具有丰富的 Javascript 内容，对于像谷歌这样的搜索引擎来说更复杂。 因此，没有深入了解 PWA 的糟糕实施可能会导致排名下降。

完全有可能创建一个对 SEO 友好的 PWA 网站。 关键是要找到熟悉这些挑战并知道如何快速解决它们的 PWA 开发人员。

我们有 10 年的时间为 Magento 创建无头 PWA