PWA SEO の課題: あなたの PWA サイトがランク付けされない原因は何ですか?
公開: 2022-08-24目次
より高速で優れた UI と UX を備えた PWA は、Google Core Web Vitals を向上させ、SEO を改善します。 多くのテクノロジー ブログやニュース (SimiCart を含む) がこれを主張しています。
ただし、これは全体像ではありません。 実際、場合によっては、PWA が Web サイトの SEO に悪影響を与える可能性があります。
PWAサイトを10年以上開発してきた私たちは、実際にSEOのパフォーマンスがPWAによって悪影響を受けているといういくつかのケースに遭遇しました.
PWA の利点については、既に記事を書いています。 さて、氷山の水中部分を見るために、PWA を実装する際にストア オーナーが直面する可能性がある SEO の大きな課題をいくつか紹介します。
PWA SEOの主な問題
これは、基本的な Web サイト開発の知識である HTML と Javascript に戻ります。 テクノロジーにまったく精通していなくても、これら 2 つのコーディング言語については聞いたことがあるはずです。
つまり、HTML は、Web サイトの構造を作成するために使用される最も単純なコーディング言語です。
一方、Javascript はより高度なものであり、より多くの特殊効果を担当します。
したがって、動的なコンテンツが多く、派手なスクロール効果やクールなスライダーなどを備えた Web ページが表示された場合、その Web ページは Javascript を適切に活用しています。
(クレジット: Reddit)
活気のある UI/UX エクスペリエンスで有名な PWA は、ご想像のとおり、多くの Javascript を使用しています。
ここに問題があります。Google や他の多くの検索エンジンは、Javascript の Web サイトをうまくレンダリングできません。 Javascript ベースの Web サイトは、多くの場合、HTML Web サイトよりも複雑で処理が重くなります。 実際、検索エンジンだけでなく、Twitter や Facebook などのソーシャル メディアでも Javascript はあまり好まれていません。
その結果、検索エンジン ボットが PWA サイトのインデックス作成に問題を抱え、SEO パフォーマンスが低下する可能性があります。
したがって、SEO フレンドリーになるように Web サイトを最適化するには、PWA を完全に理解する熟練した専門家が必要です。
PWA を SEO 向けに最適化する際の 6 つの障害。
1.パフォーマンスの問題
「でも、PWAって速いはず？」 – あなたは尋ねるかもしれません.
はい、そうですが、PWA にパフォーマンスの問題がないというわけではありません。
PWA には、まだいくつかの顕著な速度関連の問題があります。 ただし、適切に最適化されていれば、PWA は非常に高速になります。
ウサイン・ボルトと同じように、たとえ彼が生まれながらに超能力を持っていたとしても、彼の能力を理解し、彼をよく訓練するコーチがいなければ、彼はチャンピオンになることはできません.
各問題を詳しく見てみましょう。
問題
Javascript ファイルは、解析、コンパイル、および実行のために多くのリソースを消費します。 さらに、サーバーのパフォーマンスが低いため、検索エンジンのバグにより Javascript ファイルを高速にレンダリングできません。
その結果、First Meaningful Paint や First Contentful Paint などの一部のページ スピード メトリックに影響を与える可能性があります。 これら 2 つの指標は重要なランキング要素であるため、SEO にとっては良くありません。 また、遅れているサイトは、ユーザー エクスペリエンスにとっても決して良いものではありません。
その上、PWA の Service Worker が機能するには HTTPS および SSL 証明書が必要なため、Web サイトが HTTP バージョンよりも遅くなる可能性があります。
ソリューション
速度を改善するための一般的な方法として、PWA とともに AMP (アクセラレーテッド モバイル ページ) を実装することや、HTTPs で HTTP/2 を使用することが挙げられます。
PWA は e コマースの世界では高度でニッチなテクノロジであるため、経験豊富な PWA 開発者にサイトの速度を最適化してもらうことをお勧めします。
2. JavaScript エラー
問題
解析時に、Google Chrome などのブラウザーは、終了タグなどの HTML 構文を自動的に修正できます。 ただし、これは Javascript エラーとは異なります。
その結果、Javascript にエラーがあると、検索エンジンのスパイダーによる Web ページのクロールとインデックス作成が停止する可能性があります。
ソリューション
後で多くの時間のかかる修正を避けるために、開発者にサイト用のクリーンで適切に構造化された Javascript コードを作成してもらうことが重要です。
サイトで Javascript エラーが発生した場合、開発者は手動でエラーを消去し、修正後に検索エンジンに通知する必要があります。
3. コンテンツがクローキングされているため、ハイパーリンク/画像がクロールされない
クローキング コンテンツとは、検索エンジンではなく人間の目で見られるものです。 たとえば、「もっと見る」ボタンの後ろに隠れているテキストや遅延読み込みメニュー リンクなどです。 これらは多くの場合、Javascript で記述された動的コンテンツとリンクです
問題
Google はまだ Javascript を理解するのが難しいため、Google がアクセスできない PWA の Javascript コンテンツが存在する可能性があります。
コンテンツ (重要なリンク、製品画像など) が検索エンジンに表示されない場合、検索エンジンはそれをインデックスに登録できません。 その結果、SEO ランキングに悪影響を及ぼします。
解決
Sitechecker や Small SEO ツールなどのツールを使用して、Web ページにクロークされたコンテンツが含まれているかどうかをいつでも確認できます。 ユーザーに配信されるテキスト、画像、リンクなどのすべての重要なコンテンツが、Googlebot に配信される内容と一致していることを確認してください。
4. モジュールの互換性
問題
比較的新しいテクノロジーである PWA は、多くの場合、最新のモジュールを利用します。 これは、Google やその他のブラウザーと競合する可能性があります。これらのブラウザーは通常、あまり最新でないモジュールに依存しています。 この顕著な例として、ES6、Fetch API、または新しい構文やメソッドがあります。
解決
実装する前に、それらの互換性を確認する必要があります。 PWA の一部のモジュールが Googlebot で動作しなくても大きな問題にはなりません。これを修正するためのツールやポリフィルがあるからです。
ポリフィルは、古いブラウザーが最新の機能をネイティブにサポートしていない場合でも、これらの機能を使用できるようにする Javascript コード行です。
Googlebot が競合するモジュールに基づいて、それ用のトランスパイル ツールも存在する可能性があります。
参考までに、トランスパイル (翻訳 + コンパイル) とは、あるプログラミング言語を別のプログラミング言語に翻訳および解釈することを意味します。 ES6 モジュールを例に取りましょう。Babel のようなサービスは、最新の C6 Javascript ファイルを ES5 にトランスパイルできます。これにより、古いブラウザーをスムーズに実行できます。
5. サーバー側レンダリングの問題
Javascript ベースのウェブサイトをより適切に表示するために、Googlebot はサーバー側とクライアント側の両方のレンダリングを使用します。
要するに、レンダリング プロセスは次のようになります。
- Googlebot があなたのウェブサイトをクロールして、初めてリンクとコンテンツを見つけます
- サーバーは、最初のクロール後に見つかったリンクとコンテンツをレンダリングします。 これらのリンクとコンテンツは、その後すぐにインデックスに登録されます
- Google は Web サイトを 2 回目、3 回目などのようにクロールし続けます。
- これ以降、残りのリンクとコンテンツはクライアントによってレンダリングされます。つまり、ユーザーのデバイスでレンダリングされます。
- レンダリングが完了すると、Google は Web ページをインデックスに登録します。
問題
最初は、Googlebot のレンダリング フローはかなり妥当に思えますが、いくつかの大きな欠点があります。
- 割出し速度が遅い:
Google はサーバー側レンダリングで HTML ファイルを高速にインデックス登録できますが、クライアント側レンダリングで Javascript ファイルをインデックス登録するには数日かかる場合があります
- 間違ったページを優先する:
他のページにリンクしている Web ページがあるとします。 これらは内部リンクと呼ばれます。 Google は、これらの内部リンクの構造に依存して、リンク間の関係と、どのリンクを優先すべきかを理解しています。
ただし、JavaScript で挿入されたリンクの場合、Google はインデックス作成を開始する前に、クライアント側のレンダリングが完了するまで待機する必要があります。 別の言い方をすれば、Google は、クライアント側のレンダリングが完了した後にのみ、Web サイトの内部リンク構造を完全に評価できます。
その結果、クライアント側のレンダリングを必要としない、それほど重要ではないリンクが最初に、そしてより頻繁にクロールされる可能性があります。 したがって、Google はマイナー ページを優先し、販売ページを無視することができます。
- サーバー側のレンダリングとクライアント側のレンダリングの間の競合:
多くの場合、サーバー側のレンダリングとクライアント側のレンダリングの間に問題があります。 たとえば、一部の重要なページ要素 (メタ タグ、正規タグ) はインデックスに登録されていません。 さらに、この 2 つのフェーズでは、混合した信号が Google に送信される可能性があるため、検索エンジンはページの処理方法を認識できません。
解決
より効率的なサーバーは、これらの問題の主要な修正です。 開発者は、ディープ リンク リクエストに即座に応答するようにサーバーを最適化する必要がある場合があります。 また、適切にレンダリングされた HTML ファイル、特にナビゲーション、リンク、コンテンツ、メタタグ、画像などの重要なページ要素で機能する必要があります。
最新のテクノロジーは、Javascript と Web ブラウザーの間の競合を解決するのにも役立ちます。 たとえば、同形技術により、ブラウザーが Javascript ファイルをレンダリングしやすくなります。
6.SEOのよくある間違い
200 を超える SEO ランキング要因があり、その中には canonical タグや rebot.txt などの非常に技術的なものもあります。このため、マーチャントはこれらの構成を簡単に無視し、Web サイトの SEO を損なうことになります。
PWA SEO の修正に取り掛かる前に、現在のサイトが SEO のベスト プラクティスに従っていることを確認することをお勧めします。
>> 詳細: Magento SEO のベスト プラクティス
さて、最もくすぐったい質問に来ます：
PWA にアップグレードする必要がありますか?
…自分のウェブサイトの SEO に悪影響を与えたくない場合。
特にオーガニック検索がウェブサイトの重要なトラフィック チャネルである場合は、PWA の実装を考えているマーチャントにとって非常に混乱するに違いありません。
ただし、これらの課題は、Google ボットが PWA サイトをクロールできないことを意味するわけでも、プログラミング言語のために PWA サイトを異なる方法でランク付けするわけでもありません。
マーチャントは、SEO に適した PWA サイトを実装する際に、いくつかの技術的な課題を認識しておく必要があります。
実際、PWA Web サイトは、同等の非 PWA Web サイトよりも優れていないとしても、検索エンジンで確実に上位にランク付けされます。 前述のように、Web アプリは SEO の Core Web Vitals を改善します。
では、SEO に関して言えば、PWA はヒーローなのかゼロなのか? 開発者が PWA 技術と Web サイト開発を深く理解しているかどうかにかかっています。
取り除く
PWA は、Web サイトの SEO ランキングにとって両刃のナイフになる可能性があります。 一方、その強化された速度と顧客体験は、SEO のコア Web バイタルの向上に役立ちます。 悪い面としては、Javascript コンテンツが豊富な PWA は、Google のような検索エンジンと連携するのがより複雑です。 したがって、PWA を深く理解せずに不適切な実装を行うと、ランキングが急落する可能性があります。
SEO フレンドリーな PWA Web サイトを作成することは完全に可能です。 重要なのは、これらの課題に精通し、迅速に解決する方法を知っている PWA 開発者を見つけることです。
Magento 用のヘッドレス PWA を 10 年間作成してきました