在 PWA （Progressive Web App）开发中，我们通常会面临一些 SEO 不友好的情况，例如搜索引擎无法读取通过 JavaScript 动态渲染的内容，或者无法正确索引动态路由等等。在本文中，我们将介绍一些 PWA 开发中的 SEO 优化技巧，以确保我们的应用程序对搜索引擎的友好度最大化。
静态化页面内容
搜索引擎无法爬取由 JavaScript 动态生成的内容，这意味着我们必须确保我们的应用程序在客户端和服务器端都能够正常地呈现网页内容。为此，我们可以使用静态生成的方案，该方案通过在服务器上生成 HTML 片段并将其发送到客户端来工作。
静态生成（SSG）
静态生成是构建时从模版生成 HTML 的过程。这是生成静态 HTML 的最常用技术。常见的实现方式是使用静态网站生成器（如 Gatsby， Next.js 或 Nuxt.js）。
使用 GatsbyJS 和 Netlify，则可以将许多复杂页面的静态 HTML 简单地部署到 CDN 并轻松获得极佳的 SEO 算法。
服务器端渲染（SSR）
使用 SSR，每次针对请求生成HTML。经过渲染后的 HTML 会返回给浏览器。最终用户看到的仍是已渲染的 HTML 代码，其在服务器上渲染后始终显示相同。
对于 SSR 用的最多的框架是 Next.js。Server-Side Rendering 有很好的灵活性和SEO，但是通常比静态生成具有更高的传输成本。
动态路由生成静态页面
PWA 可以拥有无限数量的页面，因此动态生成的路由显得非常重要。但是，这样做常常会带来 SEO 难题，因为搜索引擎无法正确地索引这些页面。
为了解决这个问题，我们应该确保为每个动态路由生成一个静态网页，这将使搜索引擎能够正确地索引并排名每个网页。此外，我们还应该使用在搜索引擎抓取期间动态导出的 Sitemap，以帮助搜索引擎了解我们的网站的整体结构。
以下是一个示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -------------------- ----- ----- ---- -- - ----- ---- - ----- ----------------------- --------------------------- --- ---------------- -- -- - ------------------- -- -- -- ---- ------- ---
在上面的示例中，我们处理了一个名为 /post/:id 的动态路由，该路由生成一个静态网页，其中包含与特定 post ID 相关联的内容。当搜索引擎抓取这个路由时，它将检索该页面的静态内容，并将其索引。
带有正确元数据的动态内容
在前端应用程序中，我们通常使用动画效果、加载标记和其他动态效果来增强用户体验。但是，搜索引擎无法读取这些动态内容，这意味着在一些情况下，我们需要为每个动态内容元素创建元数据标记。
通常，我们需要在动态内容元素中包含有关内容的基本信息，例如题目、描述、作者、发布日期和其他关键词。这些元数据标记向搜索引擎提供了有关页面内容的更多信息，从而使其更容易索引和优化。
以下是一个示例代码：
<article itemscope itemtype="https://schema.org/EducationalOrganization">
<h1 itemprop="name">{{ name }}</h1>
<p itemprop="description">{{ description }}</p>
<time datetime="{{ published }}">{{ published }}</time>
</article>在上面的示例中，我们在 HTML 元素中使用了 itemprop 属性，该属性允许我们为每个内容元素添加元数据标记。这些标记向搜索引擎提供更多关于内容的信息，从而使其更容易读取和索引。
结论
在 PWA 开发中，SEO 优化可以极大地改善我们的网站的可搜索性和排名。通过对我们的应用程序使用静态化技术、生成静态路由和为动态内容添加元数据标记，我们可以确保搜索引擎可以正确地索引和优化我们的网站内容。
最后，我们强烈建议您遵循最佳实践和使用验证工具，以确保我们的 PWA 应用程序尽可能优化和可发现。这样可以确保我们的应用程序尽可能具有SEO友好性并能够获得最佳搜索引擎排名。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f28803a44b36ee5766400a