PWA 应用中不可避免的 SEO 问题的解决方案-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 Google 对 PWA（Progressive Web App）的推广，越来越多的网站开始尝试将自己变成 PWA，以提高用户体验，减少页面加载时间等方面得到好处。然而，在过渡到 PWA 的过程中，很多前端工程师会遇到一些 SEO 的问题，本文将介绍在构建 PWA 时可能遇到的 SEO 问题，并提供一些解决方案。

SEO 问题

搜索引擎无法抓取动态路由

在构建 PWA 时，我们会使用动态路由来实现页面的加载和切换，但是搜索引擎无法抓取动态路由的页面，它们只识别静态的 HTML 页面。这就意味着，我们无法让搜索引擎了解我们网站中的动态页面，也就无法将其收录。

离线状态下的 SEO

在 PWA 中，我们可以让用户在离线状态下使用应用，但是搜索引擎只会检查在线状态下的网页内容，所以，我们需要找到一种方法，让搜索引擎知道离线状态下的内容。

SPA（Single Page Application）的 SEO

PWA 应用通常使用 SPA 技术来实现页面无刷新效果，但是大多数搜索引擎并不能正确地渲染 SPA 应用程序，因为搜索引擎需要使用 JavaScript 来渲染页面，而 SPA 应用程序使用 JavaScript 来动态生成页面。

解决方案

使用服务器端渲染（SSR）

为了解决动态路由和离线状态下的 SEO 问题，我们可以使用 SSR 来生成静态 HTML 页面。SSR 可以在服务器端执行 JavaScript 代码，并将生成的 HTML 页面返回给客户端。这样，搜索引擎就能够抓取我们的动态页面，并将其收录。我们可以使用框架如 Next.js 或 Nuxt.js 来实现 SSR。

Nuxt.js 示例代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

export default {
  head: {
    titleTemplate: '%s - My App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'My awesome PWA' }
    ]
  },

  plugins: [
    { src: '~/plugins/vue-lazyload.js' }
  ],

  modules: [
    '@nuxtjs/pwa'
  ],

  manifest: {
    name: 'My App',
    short_name: 'My App',
    lang: 'en'
  },

  workbox: {
    runtimeCaching: [
      {
        urlPattern: 'https://api.myapp.com/**',
        handler: 'networkFirst'
      }
    ]
  },

  router: {
    middleware: ['index'] // Add middleware to `pages/index.vue`
  },

  render: h => h(App)
}

使用预渲染（Prerender）技术

如果我们不想使用 SSR，那么可以使用预渲染技术来生成静态 HTML 页面。预渲染技术是在构建时将我们的页面渲染为 HTML 文件，这些文件可以直接提供给搜索引擎抓取。我们可以使用框架如 Prerender.io 或者 rendertron 来实现预渲染。

使用 Universal Link

为了解决离线状态下的 SEO 问题，我们可以使用 Universal Link 技术，它可以在用户离线的情况下，使用原生应用打开应用程序。这样用户体验更好，同时搜索引擎也能够了解离线状态下的应用内容。

使用 Meta 标签

为了解决 SPA 的 SEO 问题，我们可以使用 Meta 标签来告诉搜索引擎有关我们网站的信息，如标题、关键词、描述等。这样，搜索引擎就可以在不渲染 JavaScript 的情况下了解我们网站的内容。

<head>
  <title>My PWA</title>
  <meta name="description" content="My awesome PWA" />
  <meta name="keywords" content="PWA, JavaScript, SEO" />
  <meta name="author" content="John Doe" />
</head>

总结

随着 PWA 的普及，SEO 的问题逐渐浮现出来，本文介绍了一些解决方案来处理这些问题，包括使用 SSR、预渲染技术、Universal Link 和 Meta 标签。不同的方案适用于不同的情况，选择适合自己的解决方案是非常重要的。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65abbd0cadd4f0e0ff568064