为用户和搜索引擎执行渐进式Web应用程序_极简慕枫

现代网络技术使我们能够建立越来越强大的网站，以至于现在我们倾向于将它们称为“网络应用程序”。Web应用程序的特性和功能镜像 - 有时甚至超过本机移动应用程序的特性和功能。

Web应用程序的关键驱动技术之一当然是JavaScript。这种独立于平台的语言在网络上实现了巨大的创新，使我们能够以越来越少的努力创造令人惊叹的体验。

虽然使用像React，Angular或Vue.js这样的JavaScript平台快速构建和启动自己的网络应用程序很诱人，但这也存在风险。创建可能看起来非常适合您的网络应用程序非常容易，但是对于某些最终用户来说会遇到严重问题。

除此之外，如果您有希望在Google等搜索引擎中对您的网络应用内容进行排名，那么您需要注意更多风险，因此您可以尽早解决这些问题。

武汉网页设计

最终用户表现

让我们从Web应用程序成功的最重要方面开始：它们如何为最终用户执行。现在，扩展Web应用程序非常简单，因为您可以将CPU，带宽和存储的负担直接放在最终用户身上。依靠客户端代码意味着您不必在自己的技术上投入大量资金来创建和启动Web应用程序。

但这种诱人的范例意味着您的用户将因此受到影响。

不是每个人都拥有闪亮的iPhone X，其处理能力超过航天飞机。并非所有人都使用150Mbit速度的Wi-Fi或4G连接。不是每个人都有智能手机上的千兆字节存储空间。

构建依赖用户设备完成大部分工作的网络应用程序只会显示您对用户的蔑视。您的应用程序可能适用于大部分用户，但许多其他人会因应用程序对其设备的要求而感到沮丧，这将表现为性能低下。

尊重您的用户并将他们设备的资源视为稀缺。不要让他们做所有繁重的工作 - 相反，优化你的应用程序，这样它不需要强大的CPU或大量的带宽和存储，你将获得成长和忠诚的观众奖励。

您可以使用Chrome中的Lighthouse审核工具来测试您的网络应用的效果。值得检查您的应用程序如何测量，看看您是否可以获得最高分。

Web应用程序和SEO

如果您认真考虑让自己的网络应用在搜索引擎以及用户的移动设备上运行，那么您应该遵循一些最佳做法。但在我们解释这些之前，首先需要对搜索引擎的工作原理有一个基本的了解。

简单地使用像'Googlebot索引JavaScript'这样的一揽子声明非常诱人，因此可以得出结论，您可以随意使用尽可能多的JavaScript。实际上，事情要复杂得多。

虽然Google索引JavaScript是正确的，但搜索引擎不会抓取JavaScript。这是一个重要的区别，您需要掌握爬行和索引之间的区别，以充分理解它。

抓取与索引

当Google抓取网络时，它会以不可思议的规模进行抓取。它的Googlebot抓取工具是一个庞大的多线程软件，每天可以抓取200亿页。由于速度对于有效的网络爬虫至关重要，因此Googlebot针对效率进行了优化。这意味着它对它抓取的网页没有太大作用。

Googlebot抓取工具将通过HTML解析器运行页面，以提取要抓取的新网址（主要来自<a href= ”…”>标记内的链接），并将这些网址添加到其抓取队列中。当爬虫遇到JavaScript时，它会完全忽略它。该页面的原始源代码只需下载并发送给索引器 - 谷歌的一部分，它完成了大部分繁重的工作。

索引器实际上处理页面并从其内容中提取含义以构建人们可以搜索的Web索引。

最初，谷歌的索引器也忽略了页面的JavaScript：首次索引是基于页面的HTML代码。在稍后阶段，索引器将尝试完全呈现页面并执行任何JavaScript。这个第二遍索引使用Google的Web渲染服务，该服务使用Chrome 41作为其渲染引擎。

这是正确的：Google使用旧版Chrome渲染网页。

此外，索引过程的第二阶段并不十分紧迫。在I / O 2018年，在谈论如何使JavaScript网站对搜索引擎友好时，谷歌承认它只在资源变得可用时呈现网页。由于渲染JavaScript可能是一个非常耗费CPU的过程，因此Google缺乏实时执行此操作的资源。在野外，我们通常会看到Google抓取和完全呈现两周或更长时间的网页之间的延迟。

基本上，Google只抓取原始HTML，并且有一个两阶段索引流程，首先查看HTML代码，几周后将呈现一个页面（包括其JavaScript）以查看页面可能包含的其他内容。

了解这一点，您需要做些什么来确保您的网络应用可以轻松地被Google抓取并编入索引？

1.优化爬行

第一步是优化您的网络应用以进行抓取。这意味着确保网络抓取工具可以轻松阅读您的网络应用内容并找到可跟踪的可抓取链接。

可抓取Web应用程序的第一个原则是确保您希望搜索引擎处理的每个页面都有自己唯一的URL。在SEO方面，URL是神圣的。基本上，搜索引擎会在其结果中对网址进行排名。因此，具有排名值的每个内容都应该有自己的URL。

有时，应用会根据单个网址提供其所有内容，依靠用户互动来更新网页内容。这对搜索引擎无效，因为即使在索引阶段，它们也不会执行任何操作。隐藏在用户操作后面的任何内容（例如向下滚动或单击按钮）对于搜索引擎都是不可见的。

因此，请确保您的应用使用网址。此外，请确保这些URL存在于原始（未呈现）的HTML源代码中，最好是以良好的老式链接的形式。Google倾向于提取要从<a href= ”…”>代码抓取的网址。

如果您使用其他方法在页面上嵌入链接，例如onclick事件，请始终确保有一个带有href链接引用的锚标记，供搜索引擎抓取。

2.优化索引

下一步是优化您的Web应用程序以进行索引。在这里，PWA中的'P'绝对至关重要：它代表Progressive，它指的是Progressive Enhancement。

渐进增强意味着您的Web应用程序通过JavaScript增强。注意'增强'，而不是'依赖'。JavaScript应该可以让您的应用完整生活 - 而不是整个应用。

通过渐进增强功能，您的网页有一个基本内容核心，不需要任何JavaScript或其他技术。这会出现在您应用的原始HTML课程代码中，这就是Google首先编制索引的内容。

如果没有基本的核心内容供Google索引，那么您的网络应用的索引可能会严重延迟。依靠网页的完整呈现来加载任何内容意味着Google必须等待资源可用于正确处理您的网页，而且我们知道这可能需要数周时间。对您的网络应用进行抓取和编制索引的整个过程对Google来说变得非常麻烦，这将导致搜索结果的效果不佳。

通过确保您在网页的原始HTML中拥有该核心内容，可以防止Google尝试抓取并为您的应用编制索引时可能出现的大多数潜在问题。

然而，您需要注意的其他一些方面可能会使扳手投入工作：

被阻止的资源

当Google最终完全呈现您的网页时，它将需要下载并处理您所有网页的资源。这包括所有内联代码，还包括CSS文件，图像和外部JavaScript文件等任何其他资源。

有时，Google无法加载此类外部资源，因为它无法访问这些资源。特别是如果网页的资源位于不同的（子）域，则由于robots.txt不允许规则，Googlebot可能无法看到这些资源。

您可以通过在“ 阻止的资源 ”报告中检入您网站的Google搜索控制台，或通过Google的移动友好测试运行网页并检查是否存在任何指示资源的“页面加载问题” 来轻松验证这一点谷歌无法访问：

确保Googlebot可以访问所有页面的关键资源，以便下载这些资源并对其进行处理。

Chrome 41

由于Google使用旧的Chrome 41渲染引擎来索引页面，因此您需要了解该引擎的限制。Chrome 41缺少当前版本Chrome所具有的许多功能，如果您的网络应用依赖这些功能，您可能会遇到问题。

通过CanIUse.com，我们可以看到Chrome 41与当前浏览器相比具有和不支持的功能：

理想情况下，您的网络应用程序并不严重依赖Chrome 41中缺乏支持的功能。如果您的应用程序的某些方面需要最新的浏览器，请检查这不会影响页面上的内容办法。可以使用现代浏览器功能，只要他们的缺席不会破坏您的Web应用程序的核心内容。

检查页面在Chrome 41中的呈现方式可能很难，因为我们的计算机上不会安装旧的浏览器版本。幸运的是，我们可以使用Google的工具来查看Chrome 41渲染引擎如何处理您的网页。

首先，我们可以使用Google Search Console的“ Google抓取 ”功能来了解Google的索引器如何呈现您网页的内容。通过使用此工具并选择“获取和渲染”，我们可以获得完整渲染页面的快照，因为谷歌通过其Chrome 41渲染引擎看到了这一点。

虽然这非常适合检查完全呈现页面的可见方面，但它并没有向我们显示页面的计算DOM代码。在Google看到它时检查页面的计算DOM非常有用，以确保它包含所有正确的链接和其他相关方面。

为此，我们可以使用Google的Rich Results Test。使用此工具，Google将允许我们查看完整呈现页面的源代码（使用Chrome 41）：

使用此工具可以查看完全呈现页面的源代码中存在的内容，以便检查您希望Google查看的所有内容是否确实存在。

Canonical和AMP

最后，您的网页元数据的某些方面需要存在于原始HTML源代码中，无论您的应用程序稍后使用它做什么。这些是页面的rel=canonical链接，如果适用，还有rel=amphtml链接。

Google已声明它只从页面的原始HTML源中提取这些内容，如果稍后使用JavaScript注入或更改这些链接，则不会查看这些链接。因此，如果您使用规范链接（以及您应该）和/或AMP版本的页面，请确保这些引用存在于Web应用程序页面的原始HTML源代码中。

武汉网页设计

简而言之，高性能的PWA

总而言之，使您的Web应用程序具有高性能和可索引性意味着您必须优化代码的各个不同方面。不要让用户和搜索引擎完成所有工作; 在服务器端可以（和应该）做什么，以及需要客户端代码的位置之间找到平衡点。

注意PWA的'Progressive'部分，大多数SEO问题在它们发生之前都会被阻止。

了解Google如何抓取您的网页并为其编制索引，并采取正确的措施来促进这一点。在搜索引擎排名方面，从长远来看，让Google更轻松的生活往往会得到回报。

武汉网页设计