spotyou
プロ試験

Domain 168 / 225

PWA は Web アプリでも SEO を維持できる、ただしレンダリングに注意

PWA SEO の要点

PWA はネイティブアプリ風のユーザー体験を Web で実現する技術。manifest.json でインストール可能化、Service Worker でオフライン対応。SSR / SSG と組み合わせれば SEO も維持できる。CSR ベースだと Googlebot のインデックス遅延リスク

なぜこれを学ぶか

PWA を採用する場合、SEO とのトレードオフがある。 Service Worker のキャッシュ戦略 / レンダリング方式の選択を間違えるとインデックスされない。

PWA / SPA を採用するすべての担当者で重要。

学ばないと起きること

よくある事故被害
CSR ベース PWAGooglebot 失敗リスク
Service Worker のキャッシュで古い HTMLインデックス更新遅延
manifest.json なしPWA 認識されず

学ぶメリット

  • PWA + SEO 両立
  • インストール可能化
  • 商談で「PWA SEO」を即答

仕組み

PWA の構成要素

要素役割
manifest.jsonアプリメタデータ（名前 / アイコン / theme_color）
Service Workerオフライン対応 / キャッシュ
HTTPS必須
レスポンシブモバイル対応
インストール プロンプトブラウザがインストール案内

manifest.json の例

{
  "name": "spotyou",
  "short_name": "spotyou",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"},
    {"src": "/icon-512.png", "sizes": "512x512", "type": "image/png"}
  ]
}

HTML でリンク:

<link rel="manifest" href="/manifest.json">

Service Worker の SEO 影響

戦略SEO 影響
Cache First古い HTML 配信リスク
Network First通常 Web と同じ
Stale While Revalidate速度 + 最新性両立
ナビゲーション フォールバックオフラインでもページ表示

Network First または SWR が SEO 安全。

キー概念

レンダリング戦略の選択

戦略PWA + SEO
SSG最高（事前生成 + Service Worker）
SSR良（リクエスト毎 + キャッシュ）
ISR良
CSRリスクあり（Googlebot 失敗可能性）

PWA を採用するなら SSR / SSG ベース推奨。

Googlebot の PWA クロール

公式: Googlebot は:

  • manifest.json を認識
  • Service Worker は実行しない
  • 通常の HTML / JS としてクロール

Service Worker のキャッシュで提供される独自 HTML を見ない。 レンダリング後 HTML が SEO 評価対象。

app 構造化データ

PWA を WebApplication で構造化:

{
  "@type": "WebApplication",
  "name": "spotyou",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web Browser"
}

よくある誤解

よくある誤解実際のところ出典
PWA は SEO に不利SSR / SSG ベースなら問題なしPWA / Service Worker と SEO
Service Worker で Google にも対応Googlebot は Service Worker 実行しない同上

実務での適用

PWA + SEO 実装の標準構成

  1. Next.js / Nuxt で SSR / SSG ベース
  2. manifest.json 配置
  3. Service Worker は Network First or SWR
  4. オフライン用 fallback ページ
  5. WebApplication 構造化データ

Service Worker 安全パターン

// Network First（SEO 安全）
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .catch(() => caches.match(event.request))
  );
});

トラブル別の対処

症状確認すべきこと
PWA インストール案内が出ないmanifest / Service Worker / HTTPS
インデックス遅延レンダリング戦略 / Service Worker キャッシュ

公式ソース

自己テスト

Q1. PWA の構成要素は？

manifest.json / Service Worker / HTTPS / レスポンシブ

Q2. PWA + SEO で推奨されるレンダリング戦略は？

SSR / SSG ベース。CSR は Googlebot 失敗リスク

Q3. Googlebot は Service Worker を実行するか？

実行しない。レンダリング後 HTML を直接クロール

これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。