跳转到内容

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

发布于

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

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

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

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

<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 的富媒体搜索结果测试工具验证标记:

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 作为网站分发——而不仅仅通过应用商店——是让它保持“可以通过 网页搜索被发现”的方式;应同时保持它作为可被抓取的网站可访问。