# 可发现性：PWA 的 SEO 与结构化数据

> 结构化数据（JSON-LD）与可抓取的 HTML 如何让搜索引擎理解 PWA 内容并获得增强搜索展示，以及上线前如何用富媒体搜索结果测试验证。

**一句话：** 根据 MDN 的说明，把 PWA 以网站形式分发（而不仅仅通过应用商店）使它
"可以通过网页搜索被发现"；根据 Google 的说明，结构化数据能为搜索引擎提供关于页面内容
含义的"明确线索"。

## 这是什么

根据 MDN 的 PWA 可安装性指南，以网站形式发布 PWA "意味着你可以把 PWA 作为网站分发，使其
可以通过网页搜索被发现，同时也可以在应用商店中分发，让用户在那里找到它"。根据 Google
Search Central 的说明，"结构化数据是一种用于提供页面信息并对页面内容进行分类的标准化
格式"，Google 表示它"利用在网络上找到的结构化数据来理解页面的内容"。

## 搜索引擎与平台支持情况

结构化数据是标记，而不是浏览器 API，因此不存在针对它的逐浏览器支持矩阵。Google Search
Central 将 JSON-LD 记录为其推荐格式，描述为"位于 `head` 和
`body` 元素中的 `<script>` 标签"。
[schema.org](https://schema.org/WebApplication) 在 `Thing > CreativeWork >
SoftwareApplication > WebApplication` 层级下定义了 `WebApplication` 类型（通用描述为
"Web applications."）——用于描述 PWA 的页面可以使用这一类型——并提供了
`browserRequirements` 属性，schema.org 将其描述为"以人类可读文本说明浏览器要求，例如
'requires HTML5 support'"。

## 如何使用

添加一个使用 schema.org `WebApplication` 类型描述应用的 JSON-LD 区块：

```html
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "WebApplication",
  "name": "My PWA",
  "browserRequirements": "Requires JavaScript. Requires HTML5."
}
</script>
```

根据 Google 的指导，只描述该页面上实际存在且可见的内容——"不要为了放置结构化数据而创建
空白页面，也不要为用户不可见的信息添加结构化数据，即使这些信息是准确的"。

## 运行时检测

上线前，读取自己页面输出的 JSON-LD 区块并确认它能被正确解析——这能发现 JSON 格式错误
之类的模板 bug，但不能替代用 Google 的富媒体搜索结果测试工具验证标记：

```js
function readStructuredData() {
  if (!("querySelector" in document)) {
    // 没有 DOM Selectors API——无法读回内容，视为不存在。
    return null;
  }
  const script = document.querySelector('script[type="application/ld+json"]');
  if (!script) {
    return null;
  }
  try {
    return JSON.parse(script.textContent);
  } catch {
    // 格式错误的 JSON-LD 会在 Google 的富媒体搜索结果测试中失败——应该提前
    // 发现它，而不是发布无法解析的标记。
    return null;
  }
}
```

## 实用清单

- 根据 Google Search Central 的指导原则，不要为了放置结构化数据而创建空白页面。
- 根据 Google 的说明，不要在结构化数据中描述该页面上用户不可见的信息，即使它是准确的。
- 上线前用 Google 的富媒体搜索结果测试工具验证标记——Google 将其描述为"一个用于验证
  结构化数据的简单实用的工具"。
- 根据 MDN 的说明，把 PWA 作为网站分发——而不仅仅通过应用商店——是让它保持"可以通过
  网页搜索被发现"的方式；应同时保持它作为可被抓取的网站可访问。

## 相关参考

- [让应用可安装](/zh/guides/installable/)
- [选择缓存策略](/zh/guides/offline/caching-strategies/)