プログレッシブ ウェブ アプリ (PWA) と検索エンジン最適化 (SEO)

Progressive Web App (PWA) は、Web を通じて配信されるアプリケーション ソフトウェアです。 これは、HTML、CSS、JavaScript などの標準的な Web テクノロジーを使用して構築されています。PWA は、Web サイトのコンバージョン率とトラフィックを高めるために一般的に使用されます。 2021 年から、PWA は Google Chrome、Apple Safari、Android 版 Firefox、および Microsoft Edge で (完全または部分的に) サポートされます。

PWA の最適化は比較的新しい開発であるため、依然としてほとんどのケースで良好な結果が得られ、驚くべき統計が得られます。 PWA Stats では、PWA を実装したサービスによって得られる利点について常にレポートします。

一般に、TOP 30 PWA レポートによると、「プログレッシブ Web アプリの平均コンバージョン率は、ネイティブ モバイル アプリの平均コンバージョン率より 36% 高かった」とのことです。

PWA は、オンライン マーケティングにおいて大きな助けとなります。 それが、SEO 集団の間で人気がある理由です。 ただし、React と SEO と同様に、PWA SEO の組み合わせにも困難があります。 この記事では、PWA が SEO とどのように連携するかについて説明します。

PWA の例と主な利点

あらゆる Web サービスを PWA にすることができます。 そのためには 3 つの主な要件があります。

1. HTTPS で実行されます。
2. Web アプリ マニフェストが含まれます。
3. サービスワーカーを実装します。

PWA の主な目的は、すべてのユーザーに優れた機能を提供することです。 PWA によってもたらされる主な利点のリストは次のとおりです。

1. PWA は文字通りあらゆるビジネスに新たな機会と成長をもたらします。 アプリと Web の最高の品質を兼ね備えており、応答性が高く、あらゆるデバイスで動作することができ、必ずしも高速なネットワークを必要としません。
2. トランスポート層のセキュリティにより安全になります。
3. Service Worker (ブラウザがバックグラウンドで実行する特別なスクリプト) を使用すると、PWA がオフライン モードで動作できるようになります。

PWA 導入の最大の例をいくつか見てみましょう。

あなたにおすすめ:プログレッシブ Web アプリ (PWA) を構築するための最も人気のあるフレームワーク。

1. スターバックス

スターバックスの注文システムの PWA はシンプルで使いやすいです。 ネイティブ アプリとまったく同じように見えますが、ユーザーがメニューを参照してカートに商品を追加すると、オフラインで実行する機能があります。 このようなソリューションの最大の利点は、PWA がスターバックスの標準アプリよりもほぼ 2 倍小さいという事実です。 そのおかげで、同社は Web ユーザーの数を大幅に増加させました。

2.ピンタレスト

Pinterest モバイル ユーザーのわずか 1% だけが、パフォーマンスが悪いためにアプリをダウンロードしてサインインしていることが判明した後、モバイル アプリは PWA テクノロジーに基づいて再構築されました。 そのおかげで、滞在時間、広告収入、コアエンゲージメントなどの指標が最大 40% ～ 60% 増加しました。

3. ウーバー

Uber Web アプリは、低速ネットワークやネイティブ Uber アプリと互換性のない古いスマートフォンで高速サービスを提供することを目的として、PWA として再構築されました。 そのおかげで、超軽量のコア アプリは 2G ネットワーク上で約 3 秒でロードされます。

SEOの重要性

SEO とは、検索エンジン (SE) 向けに Web サイトを最適化することです。 その主な目的は、検索結果における Web サイトのランキングを向上させ、訪問者を引き付けることです。 これは SE アルゴリズムに基づいており、キーワードを使用して検索エンジンが関連コンテンツを表示し、対象ユーザーを Web サイトに引き付けるのに役立ちます。 これは、SEO があなたのウェブサイトに最高のオーガニックトラフィックをもたらす方法です。 直接トラフィックや有料トラフィックとは異なり、訪問者のほとんどをクライアントや顧客に変えることができます。

プログレッシブ Web アプリの SEO: 問題は何ですか?

PWA によってもたらされるあらゆる利点にもかかわらず、多くの Web サイト所有者は依然としてこのテクノロジーの導入を躊躇しています。 その主な理由は次の 2 つです。

1. すでにうまく機能している既存のシステムを変更することへの恐怖。
2. PWA が SEO とどのように連携するかについての理解が不十分です。

John Mueller (Google のアナリスト) が述べたように、「現在、PWA は Google 検索において何の利点もありません。」

多くの PWA は、SEO に適した性質であるとは知られていない JS フレームワークを使用して構築されています。

したがって、従来の HTML ベースの Web サイトとは異なり、JavaScript に依存する PWA は SEO にとって困難です。 そのため、検索性の点で何のメリットもありません。 ただし、一般に信じられていることに反して、これはプログレッシブ Web アプリが検索エンジンによってインデックス付けできないという意味ではありません。 そのためにはさまざまなテクニックを使用する必要があります。

サーバー側レンダリングとクライアント側レンダリング

ほとんどの Web サイトはサーバーサイド レンダリング (SSR) を使用します。 これは、ページがブラウザーでレンダリングされるのではなく、サーバー側でレンダリングされる最も単純なアプローチです。 ただし、ユーザーがページをリクエストするたびに HTML 全体が読み込まれるため、インターネット接続が安定していない、または十分に高速でない場合には問題が発生する可能性があります。

JavaScript ベースの PWA はクライアント側レンダリング (CSR) を使用し、コンテンツはクライアントのブラウザーでレンダリングされます。 ユーザーがページをリクエストするたびに HTML ページ全体が送信されるわけではありません。 JavaScript ファイルは、クライアントのブラウザのページの情報のうち必要な部分だけを表示します。 そのため、インターネット接続が悪くてもページの読み込みが速くなります。

しかし、多くの Web サイト所有者が依然として CSR の使用を拒否しているのはなぜでしょうか? 問題はGoogleボットです。 HTML ドキュメントで完全に表示されるコード内の Web サイトのコンテンツを読み取ることができます。 CSR の場合、JavaScript を処理する検索エンジンの機能に完全に依存しています。 そのため、CSR アプリにはインデックスを作成できないという意見があります。 しかし、実際には、Google はすべての検索エンジンの中で JavaScript の処理が最も優れています。

それにもかかわらず、これは JavaScript と SEO の問題が解決されたことを意味するものではありません。Google は、JS の処理が完璧ではないことを認めています。 つまり、JavaScript ベースのページをクロールするプロセスは、HTML ページのクロールプロセスよりも時間がかかります。 実際、これは、JavaScript コンテンツが検索エンジンの結果ページに表示されるまでにさらに時間がかかることを意味します。

これらすべてにより、Web サイト所有者が訪問者のユーザー エクスペリエンスを向上させ、コンテンツを検索エンジン向けに最適化することが困難になります。

検索エンジンの最適化を失わずに PWA を実装するにはどうすればよいですか?

あなたは好きかもしれません: Magento PWA Studio: Magento 用のプログレッシブ Web アプリ ツール!

1. ダイナミックレンダリングを適用する

動的レンダリングでは、さまざまなソースに対するさまざまなバージョンのコンテンツが表示されます。 訪問者は CSR バージョンを取得し、クローラーはサーバー側でレンダリングされたバージョンを取得します。 これにより、Google ボットによる JavaScript ベースのページのインデックス作成が改善されます。 こうすることで、Web サイトの SEO を危険にさらすことなく、クライアントに最も便利なユーザー エクスペリエンスを提供できます。

2. SSRとCSRを組み合わせる

クローラーがサーバー側レンダリングを使用して、コンテンツの最も重要な部分 (検索エンジンに確実に渡す必要がある部分) を確実に認識できるようにします。 この情報は、ページを検出するとすぐにクローラーによって選択されます。 残りの情報は、プロセスの第 2 段階でクライアント側のレンダリングを介して自動的に処理されます。

3. SEO に優しい JavaScript フレームワークを使用して PWA を構築する

私たちの大きなお勧めは GatsbyJS です。 このフレームワークを使用して PWA Web サイトを構築するのは非常に簡単です (既存の Gatsby Web サイトを PWA に変えることも同様です)。 インターネット接続が遅い場合でも、構築ステップで Web サイトを事前レンダリングし、遅延のない素晴らしいパフォーマンスを実現します。 そのおかげで、訪問者はアプリのようなブラウジング体験を得ることができます。

4. すぐに使える PWA ソリューションに頼る

現在、PWA はかつてないほど手頃な価格になりました。 したがって、PWA 開発に多くの時間とリソースを無駄にしたくない場合は、SEO の原則に従って作成され、徹底的にテストされた、すぐに使用できる PWA ソリューションを使用することができます。そのため、品質を保証できます。コードの。

5.PWAスタジオ

PWA Studio は、アプリのようなエクスペリエンスを提供するように設計された Web テクノロジー標準として 2019 年にリリースされました。 実際、これはすぐに使えるソリューションというわけではなく、むしろ PWA 開発のためのツールと機能のコレクションです。 このソリューションは非常に複雑で印象的ですが、追加の調整が必要です。

6.スカンジPWA

ScandiPWA は、React と Redux をベースにしたオープンソース ソリューションです。 Web サイトを高速に改善し、オフラインで作業できるようにすることを目的として設計されています。 また、常に更新されるため、常に新しい機能が追加されます。

7. Vue ストアフロント

これは、市場で入手可能な最初の PWA ソリューションの 1 つです。 実際、Vue Storefront はユニバーサルなオールインワン ソリューションですが、追加のメンテナンス リソースが必要です。

PWA の導入中に SEO 関連の間違いを回避するにはどうすればよいですか?

改善されたユーザー エクスペリエンスを提供することで SEO での勝利に役立つ、綿密に作成された PWA を開発するには、次のことを行う必要があります。

1. SEO監査を実施します。 これは、SEO 関連の問題をすべて特定して修正するのに役立ちます。
2. SEOの専門家に相談してください。 たとえば、React を使用して PWA を構築する場合、SEO スペシャリストは React と SEO を組み合わせる方法を正確に知っている必要があります。 こうすることで、実装後に発生する可能性のある問題のほとんどを回避できます。
3. PWA を開発するときは、基本的な SEO 原則に固執してください。 Google が発行した Progressive Web Apps SEO に関連する記事の中で、同社はインデックス可能な PWA を構築する方法についてのヒントを提供しています。 そのうちのいくつかは次のとおりです。
   • 各ページは特定の URL からアクセスできる必要があります。 そのおかげで、各ページは独立してクロールされます。
   • Web サイトはレスポンシブ デザインで、モバイル デバイス向けに最適化されている必要があります。
   • プログレッシブエンハンスメントを使用します。 その戦略のおかげで、PWA は古いブラウザでもうまく動作します。
   • Google Search Consoleを使用して、Googleがあなたのページをどのようにレンダリングするかを定期的に確認してください。 したがって、何かをアップグレードまたは変更する時期がいつでもわかります。
   • ページの読み込み時間に注意してください。 Google はすべてのページの読み込み速度を測定しており、ページの読み込み速度が遅くなった場合、Google はそのページのランクを下げます。

こちらもお勧めです: React Native vs Flutter vs PWA: トレンドのモバイル アプリ フレームワークの戦い。

結論

PWA の最適化は、オンライン マーケティングに多くの機会を提供し、大部分のビジネスに成長をもたらします。 実際、PWA によって通常適用される SEO のベスト プラクティスは、応答性が高く、構造化され、高速に表示されるユーザー フレンドリーなインターフェイスです。 しかし、PWA は依然として SEO に直接的なメリットをもたらしておらず、SEO 関連の問題が多くの販売業者の Web サイトへの PWA の導入を妨げています。 そのため、ダイナミック レンダリング、SSR と CSR の組み合わせ、すぐに使用できる PWA ソリューションなど、さまざまなテクニックを注意して使用することが重要です。 また、最初から SEO スペシャリストをプロセスに参加させる必要があります。

このように、SEO と PWA をうまく組み合わせることで、両方を活用することができます。 また、PWA は新しく革新的なタイプのソフトウェアであるため、改善が期待されることにも注意してください。

 この記事はアイヴァン・ジョーンズによって書かれています。 Ivan は、Clockwise.Software の SEO スペシャリストであり、業界で 5 年以上の経験があります。 彼は、ウェブサイトを Google 検索結果の上位に長年維持するのに役立ってきたニュアンスを知っています。 熱心な学習者である彼は、SEO の結果に利益をもたらす新しいアプローチをテストすることに熱心です。