設定
当社はプライバシーを重視しており、ウェブサイトの基本機能に必要のない特定のストレージを無効にするオプションを提供しています。カテゴリーをブロックすると、ウェブサイトでの体験に影響が出る可能性があります。詳細はこちら
当社はプライバシーを重視しており、ウェブサイトの基本機能に必要のない特定のストレージを無効にするオプションを提供しています。カテゴリーをブロックすると、ウェブサイトでの体験に影響が出る可能性があります。詳細はこちら
プログレッシブウェブアプリ（PWA）は、ウェブサイトのリーチとネイティブアプリの体験を組み合わせます。その仕組みと、SEO にとっての意味を学びましょう。
ツール
要約
プログレッシブウェブアプリとは、ウェブ技術で作られながら、インストールされたネイティブアプリのように動作するアプリです。1 つのコードベースで複数のデバイスに対応し、オフラインでも動き、検索でも見つけられる状態を保ちます。
さらに詳しく知るには、こちらに質問
プログレッシブウェブアプリ（PWA）とは、ウェブプラットフォームの技術で作られ、特定のプラットフォーム向けアプリに近い体験を提供するアプリケーションです。ウェブサイトと同じように、PWA は 1 つのコードベースで多くのプラットフォームやデバイス上で動作します。ネイティブアプリと同じように、デバイスにインストールでき、オフラインやバックグラウンドでも動作し、OS やほかのアプリと連携できます。
この組み合わせこそが魅力です。プラットフォームごとに別々のビルドを維持しなくても、ウェブのリーチと見つけやすさに加えて、ネイティブアプリの洗練された体験の多くを得られます。マーケターにとって最も重要なのは、PWA の本質がウェブサイトのままであるため、クロールされ、インデックスされ、検索に表示され続けるという点です。
PWA とは、従来のウェブサイトの機能と、ネイティブのモバイルアプリの機能や操作感を組み合わせたウェブアプリケーションです。ホーム画面から起動し、ブラウザの UI なしで全画面表示でき、インストールされたソフトウェアのように動作しますが、アプリストアではなくウェブを通じて提供されます。「プログレッシブ」という言葉は、ブラウザやデバイスが対応している機能に応じて自らを段階的に強化することを表しています。
中身はあくまでウェブなので、PWA はリンク可能な実際の URL を持ち続け、共有、ブックマーク、検索での発見が可能です。これが、ストアの中に閉じ込められたネイティブアプリとの大きな違いです。PWA は 2 つの世界に同時に存在しています。
すべての PWA には、少なくともウェブアプリマニフェストとサービスワーカーの 2 つが必要です。マニフェストはアプリを説明する JSON ファイルで、name や short name、192 ピクセルと 512 ピクセルのアイコン、開始 URL、standalone などの表示モードといったメンバーを含みます。これらのプロパティによって、ブラウザはインストールを提案し、アプリをネイティブのソフトウェアのように起動できます。
3 つ目の要件は HTTPS です。PWA は安全な接続で配信しなければなりません。ユーザーを守るためでもあり、HTTPS がないとサービスワーカーが登録されないためでもあります。したがって、安全な配信は、PWA の適切なテクニカル SEO の設定における基本要素です。
サービスワーカーは PWA のエンジンです。サービスワーカーとは、ブラウザとネットワークの間でプロキシとして働く JavaScript ファイルです。インストールされると、自分のスコープ内のリクエストを横取りしてキャッシュからレスポンスを返せます。これによって PWA は瞬時に読み込まれ、オフラインや通信状態の悪い環境でも動作し続けます。
サービスワーカーの役割はキャッシュだけではありません。後回しにしたタスクのバックグラウンド同期、大きなダウンロードのバックグラウンド取得、再エンゲージメントのためのプッシュ通知を担い、バックグラウンドで静かにアプリを更新するので、ユーザーはアプリストアを待たずに常に最新版を使えます。この信頼性は、優れたページエクスペリエンスに直接貢献します。
ネイティブアプリと比べると、PWA は 1 つのコードベースで動くため開発と保守のコストが低く、アプリストアの審査や承認待ちもありません。デバイスとの最も深い連携ではネイティブアプリが依然として優位ですが、多くの製品では PWA がその差の大部分を埋めます。通常のウェブサイトと比べると、PWA は標準的なページにはないインストール、オフライン対応、バックグラウンド機能を加えます。
実務上の利点はエンゲージメントです。PWA は高速な読み込みとアプリのような動作を兼ね備えているため、従来のモバイルサイトよりエンゲージメントが高く、直帰率が低い傾向があるとされています。そのため、小売企業やメディアが PWA に投資してきました。
ストアの中に隠れたネイティブアプリとは異なり、PWA は検索エンジンに表示され、ほかのウェブサイトと同じようにインデックスされます。この二面性によって、1 つの PWA がオーガニック検索結果で上位表示されると同時にユーザーのホーム画面にも置かれ、両方向から需要を獲得できます。したがって、コンテンツをクローラーが到達できる状態に保つことが不可欠であり、PWA には丁寧なクロールとインデックスの管理が欠かせません。
生成 AI にも同じ考え方が当てはまります。AI アシスタントはクロールして解析できるコンテンツを表示するので、クロール可能な形でコンテンツをレンダリングする PWA は、従来の検索だけでなく AI の回答でも露出を得られます。PWA をまずウェブサイトとして扱い、適切なキーワード調査とコンテンツ計画と組み合わせることで、どこでも見つけられる状態を保てます。
典型的なリスクはクライアントサイドレンダリングです。PWA はブラウザ上で JavaScript を使ってコンテンツを構築することが多いため、初期の検索エンジンはインデックスに苦労しました。現在の検索エンジンは成熟し、リンク可能な URL を生成する History API にも対応していますが、それでもクローラーがコンテンツを見られるようにする必要があります。重要なページには、サーバーサイドレンダリングやプリレンダリングを使うのが理想的です。
レンダリング以外にも、意味のあるビューごとに実際の URL を与え、適切なタイトルとメタデータを出力し、重要なページがインデックス可能であることを確認しましょう。アプリ専用のナビゲーションの奥にコンテンツを隠す PWA は、ネイティブアプリに対する最大の強みの一つである検索での露出を手放すことになり、検索から初めて訪れるユーザーのユーザー体験を損なうおそれもあります。
PWA は、ウェブでの見つけやすさとアプリのようなエンゲージメントの両方が役立つ製品に向いています。EC ストア、ニュースやメディアのサイト、旅行ツール、ソフトウェアのダッシュボードなどです。オフラインのキャッシュと軽量な読み込みによって体験を使える状態に保てるため、ユーザーの通信環境が不安定な場合や、性能の低いデバイスを使っている場合に特に価値があります。
別々のネイティブアプリを開発、保守するコストが高すぎる場合にも、PWA は有力な選択肢です。1 つの PWA でモバイルとデスクトップに対応し、必要に応じてインストールでき、検索でも見つけてもらえます。多くの場合、ネイティブアプリの価値の大部分を、わずかなコストで実現できます。AMP のような従来の手法と比べると、PWA は速度を保ちながら、はるかに豊かなインタラクティブ性を提供します。
プログレッシブウェブアプリは、ウェブのリーチとネイティブアプリの体験を融合させたもので、1 つのコードベースで作られ、インストールでき、オフラインでも動き、検索でも見つけられます。その中核はマニフェスト、サービスワーカー、HTTPS であり、ネイティブアプリに対する最大の戦略的な強みは、検索エンジンと AI アシスタントの両方にクロールされ、インデックスされ、表示されることです。
その強みを守るために、クローラーが読める形でコンテンツをレンダリングし、すべてのビューに実際の URL を与え、PWA を適切なページエクスペリエンスと Sorank の調査とコンテンツ計画のツールに合わせましょう。参考資料：MDN Web Docs、Positional、Seobility。
出典
PWA は、正しく作られていれば SEO にとって良いものです。ストアに閉じ込められたネイティブアプリと違い、根本的にはウェブサイトのままで、ほかのサイトと同じようにクロールされインデックスされるからです。主なリスクは、クライアントサイドのレンダリングがクローラーからコンテンツを隠してしまうことです。サーバーサイドのレンダリングか事前レンダリングを使い、各画面に実際の URL を与え、重要なページがインデックス可能であることを確認しましょう。
PWA には最低限、ウェブアプリマニフェスト、サービスワーカー、HTTPS が必要です。マニフェストは名前、アイコン、開始 URL、表示モードでアプリを説明し、ブラウザーがインストールを提案できるようにします。サービスワーカーはオフライン対応とバックグラウンドの機能を可能にし、サービスワーカーは安全でない接続では登録されないので HTTPS は必須です。
PWA は 1 つのウェブのコードベースからプラットフォームをまたいで動き、検索で見つけてもらえます。一方、ネイティブアプリはプラットフォームごとのもので、アプリストアを通じて配布されます。PWA は作るのも保守するのも安く、ストアの審査の遅れも避けられます。ネイティブアプリは今も端末とのより深い統合を提供しますが、多くの製品では PWA がその差の大部分を埋めています。
先行導入企業のご紹介
“2年間、クライアントの100%がLinkedIn経由でした。毎日の投稿、コメント、DMでのフォローアップ…完全にアルゴリズム頼みでした。SEOに取り組むべきだとわかっていても、時間がかかる、技術的すぎる、自分の仕事ではないと、いつも後回しにしていました。Sorankでようやく一歩を踏み出しました。4か月で、何も投稿しなくても毎月15件のオーガニックリードを獲得しています。まだLinkedInと半々ではありませんが、自動で育つ2つ目のリード源ができたことで安心して眠れるようになりました。”
Valentin Thomyコールドメール専門エージェンシー“Sorankは、クライアントに提供する成果を大きく変えてくれました。AIが実際に使っているキーワードを特定し、特定の競合が引用される理由を理解し、以前は完全に見落としていたチャンスを見つけられるようになりました。クライアントは、より早い順位上昇、AIの回答での可視性向上、そしてすべての施策のROIがより明確になったことを実感しています。”
Benjamin Rouxovirank.com
“私はマーケターではなく開発者です。私のShopifyテーマは口コミと広告だけで売れていました。Sorankのおかげで、SEOの組み立て方と上位表示される記事の書き方がようやくわかりました。監査で商品ページが遅すぎることも判明しました。2か月でオーガニックトラフィックは2倍になり、ShopifyテーマについてChatGPTで検索されたときの回答にも表示され始めています。しかも、週に約2時間の作業だけです。”
Thème FullStackthemefullstack.com“Sorankのおかげで、私たちのSEOエージェンシーの働き方は大きく変わりました。すべてが一元化・自動化されたため、クライアント1社あたりにかける時間が大幅に減りました。以前は何時間もかかっていた作業が今では数分で終わり、ようやくビジネスの中で働くのではなく、ビジネスそのものに取り組めるようになりました。”
Océane Bondismaison-leverage.com
