随着移动互联网的普及，PWA（Progressive Web Apps）作为一种新的开发方式，已经逐渐成为了前端开发中的一种趋势，并可以极大地提升用户体验。同时，作为一名前端开发人员，还需要考虑如何通过 SEO 方式，让 PWA 对搜索引擎友好。本文将介绍如何将 PWA 和 SEO 相结合。
PWA 简介
首先，我们先了解一下 PWA 是什么。PWA 是一种使用 Web 技术，开发出类似于 Native APP 体验的 Web 应用。主要包括以下几个特点：
- 可离线访问: PWA 可以将部分资源缓存到本地，使得用户即使离线也能够访问应用的内容。
- 支持推送通知: PWA 提供了类似于 APP 的推送通知功能，可以及时提醒用户。
- 快速响应速度: PWA 的加载速度快，并且在用户和应用程序之间有近乎零延迟的响应。
- 类似于 Native APP 的交互体验: PWA 可以实现类似于 Native APP 的交互效果，可以嵌入到手机主屏幕中等等。
PWA 和 SEO 相关的问题
虽然 PWA 拥有以上所述的诸多优点，但在 SEO 方面可能存在以下问题：
- URL 问题: PWA 可能不像常规网页那样拥有明确的 URL 信息。
- 渲染问题: PWA 经常需要等到 JavaScript 文件下载完成后才会开始渲染，这会影响渲染速度，从而影响 SEO。
- 缺少内容: PWA 在某些情况下，例如关键字标记和元描述等方面可能存在问题。
那么怎么解决这些问题呢？下面我们将一一介绍。
URL 问题
PWA 的 URL 是以 Web APP Manifest 资源的 URL 作为标准。Web APP Manifest 可以在 html 的 head 中设置。这个文件包含了一些具体的元数据信息，例如名称、图标、相关网页的 URL 等等。此外，为了更加友好地让搜索引擎解析该文件，建议在 Web APP Manifest 文件中添加 start_url 属性，表明该 Web App 所提供的默认网页的 URL。
<head> <link rel="manifest" href="manifest.json"> </head>
-- -------------------- ---- -------
-
------- -------- -----
------------- ------
------------ ----
-------- --
------ ---------------
-------- ----------
------- -----------
--
-渲染问题
解决 PWA 的渲染问题，需要借助 SSR（Server-Side Rendering）来提高首屏加载速度。实现起来比较复杂，下面我们简述如何实现。
1. 使用一些现有的解决方案
我们可以使用像 Next.js 和 Nuxt.js 等 SSR 框架来解决这个问题。这些框架拥有完整的构建和渲染功能，可以在服务端渲染页面并响应 HTML 和 CSS，从而使搜索引擎可以正确地解析该页面。
2. 自己实现 SSR
自己实现 SSR 的步骤如下：
- 从服务器端加载 Web APP 的资源，并将 HTML 页面发送给客户端。
- 在早期下载阶段内，尽可能加载主要的依赖，例如 Vue、React 和 Angular 等类库，以提高页面加载速度。
- 使用 HTML 和 CSS 生成静态全面内容，通过 Document Object Model（DOM）和 Cascading Style Sheets Object Model（CSSOM）渲染页面。
- 运行 JavaScript，并为异步和后续更新预取数据和资源。
- 设置 IndexedDB 缓存，以便离线使用。
缺少内容
在 PWA 中，我们还可以使用诸如 <meta> 协议、ALT 文本和结构化数据等 SEO 方案，以帮助搜索引擎更好地理解我们的 PWA。
<meta name="description" content="A description of the PWA"> <meta property="og:title" content="My PWA"> <meta property="og:description" content="A description of the PWA"> <meta property="og:url" content="https://example.com/pwa"> <meta property="og:image" content="https://example.com/img/social-media-thumbnail.png"> <img src="myImage.png" alt="An image of a PWA">
总结
- PWA 可以在某些情况下提高用户的体验，但也存在一些 SEO 方面的问题。
- 通过 Web APP Manifest，我们可以为 PWA 设置 URL 信息。
- 可以使用 SSR 来解决 PWA 的渲染问题。
- 我们可以使用诸如
<meta>协议和 ALT 文本等 SEO 方案，以帮助搜索引擎更好地理解我们的 PWA。
希望大家可以从本文中了解到 PWA 与 SEO 各方面的相关问题，以及解决问题的具体方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/665810abd3423812e4dd3e13