近年、JavaScriptとその検索パフォーマンスへの影響について耳にすることが多くなり、SEO担当者のなかには、効果的な仕事をするためにJavaScript開発者になる必要があると考えているかもしれません。
SEO担当者がJavaScriptのコーディング方法は知る必要はありませんが、JavaScriptがどのように使用され、どのような場合に検索パフォーマンスに影響を与えるかを理解することには多くのメリットがあります。
なぜ最近、多くのSEO担当者がJavaScriptを話題にしているのか？
JavaScriptは以前から存在していましたが、SEOの世界では最近頻繁に登場するようになりました – それはなぜでしょうか？
JavaScriptがWebサイトのコーディングによく使われるようになったのには、いくつかの理由があります。
- プロダクトチーム：最もインタラクティブに製品情報を提供できるから
- 開発者：大規模で複雑なWebサイトではHTMLよりはるかに使いやすいから
- インフラと経理担当：より安価だから
という理由で、JavaScript を好みます。
JavaScriptの中にはSEOを難しくするものもありますが、通常は理由があって実装されているのです（インタラクティブ性の向上、時間の節約、お金の節約など）。
すべてのJavaScriptはSEOに不利か？
そんなことはありません。
JavaScriptはさまざまな方法で使用できるため、その使用方法によって検索に与える影響も異なります。
ここでは、JavaScriptを使ったWebサイトを大きく3つに分類し、SEOに影響するかどうかを解説します。
- 部分的なJavaScript（JSで生成された要素はSEOに関係ない） SEOに影響を与えない要素を読み込むためにJavaScriptを使用しているサイト。このようなサイトでは、HTMLのみの解析で、サイトの構造や内容を確認すればよいでしょう。しかし、大規模サイトの場合はJavaScript要素が、Googleのクロールバジェットに悪影響を与えていないかどうかは、確認しておくとよいでしょう。
- 部分的なJavaScript（JSで生成された要素がSEOに重要）リンクやコンテンツなどSEOに重要な要素を読み込むためにJavaScriptを使用しているサイト。各ページのHTMLのみのバージョンとJavaScriptでレンダリングされたバージョンを比較し、リンクやコンテンツの質などの違いに注目するとよいでしょう。また、JavaScriptを使用している他のサイトと同JavaScriptのパフォーマンスを総合的に分析するのもよいでしょう。
- 完全なJavaScript（サイト全体がJavaScriptで生成されている） 完全にJavaScriptで構築されているサイト。SEO担当者は、JavaScriptがサイトパフォーマンスに与える影響を分析する必要があります。プリレンダリングソリューションを使用しているサイトでは、サーバーサイドとクライアントサイドのレンダリングを確認します。
JavaScriptがGoogleでレンダリングできるのであれば、なぜ問題があるのか？
レンダリングは時間がかかります。
Googleはインデックスを２回に渡って行います。最初のインデックスでは、ページのHTMLしか見ず、すぐに終わります。その後、GoogleはJavaScriptをレンダリングするための第2段階のインデックスを作成しますが、これは数日から数週間後になる可能性があります。
しかし今のところ、Googleは依然としてJavaScriptのウェブサイトを2段階でインデックスしており、JavaScriptで読み込んでいるコンテンツやリンクを最初は見逃してしまう可能性があることを意味しています。コンテンツが頻繁に更新されるようなページの場合、GoogleがあなたのページのコンテンツをJSを含めて見たときには、すでに内容が変わっている可能性があるということです! これは、ニュース速報のようなタイムリーなコンテンツを掲載している出版社や、常に在庫が変動するEコマースサイトでは特に重要な考慮事項です。
また、Googleが検索エンジンシェアの大半を占めているものの、Bingなど他の主要な検索エンジンでは、JavaScriptのレンダリングがさらに困難であることも理解しておくべきでしょう。
クライアントサイド、サーバーサイド、プリレンダリング、ダイナミックレンダリング
ウェブサイトのコンテンツを表示する方法には、大きく分けて、クライアントサイズ、サーバーサイド、プリレンダリング、ダイナミックレンダリングの4つがあります。それぞれを見ていきましょう。
クライアントサイドレンダリング：SEO的に最も不利な選択肢
クライアントサイドレンダリングは、すべてのレンダリングオプションの中で最もSEOに適していませんが、適切に行われた場合には、ユーザーエクスペリエンスの面でいつかの利点があります。
クライアントサイドレンダリングとは、コンテンツのレンダリングにかかるすべての負担が「クライアント」、つまり訪問者側にかかることを意味します。ページがサーバーで組み立てられてブラウザに送信されるのではなく、ページが分解されてブラウザに送信され、コンテンツの読み込みはすべてブラウザに任されます。つまり、ブラウザはサーバーを何度も往復して、ページ上のすべてのコンテンツを取得し、読み込まなければならないのです。
サーバーサイドレンダリング：SEO的に好ましい選択肢
ほとんどの SEO 担当者は、サーバーサイドレンダリングを好みます。なぜなら、重要なコンテンツはすべてウェブサイトのサーバーでレンダリングされるため、インデックスの 第二波のタイミングに左右されないからです。ユーザーとボットの両方が、リソースを追加で要求することなく、完全に読み込まれたページを受け取ることができます。
サーバーサイドレンダリングは、ページのレンダリングの負担をユーザー（ブラウザ）から取り除き、ウェブサイトのサーバーに委ねるものです。
プリレンダリング：回避策オプション
プリレンダリングは、ウェブサイトによっては有効なオプションとなり得ますが、やや場当たり的な方法となります。それは次のような仕組みです。
- ウェブサイトがリクエストを受ける（または一定時間経過する）
- サービスがページをレンダリングする
- 検索エンジンのみがプリレンダリング版のページを受信する
プリレンダリングは検索エンジンのためのソリューションであるため、ユーザーにとって実益はありません。またprerender.ioのようなサードパーティのプリレンダリングソリューションは、高価で、バグが発生しやすく、時には壊れる可能性もあります。
また、プリレンダリングは、ページが頻繁に変更されるウェブサイトには向いていないかもしれません。たとえば、あるEコマースサイトでは、プリレンダリングによって商品価格が同期されず、Googleには表示される価格と、ユーザーに表示される価格とが違っていました。これは頻繁に変更されないサイトや完全に静的なサイトで使用すると効果的と言えるでしょう。
ダイナミックレンダリング：ユーザーとボットの扱いを変える
ダイナミックレンダリングとは、ページにアクセスしようとする相手に応じて、異なるレンダリングプロセスを使用する方法です。検索エンジンのクローラーは、サーバーでレンダリングされた完全なHTMLを受け取りますが、人間は最初のHTMLを受け取り、自身の方ですべての追加リクエストを行います。
この方法では、検索エンジンは完全に読み込まれたページを即座に見ることができますが、ユーザーにはページの読み込みの負担を強いていることになります。
ページを「レンダリング」するとは？
ここまで来て、まだレンダリングの意味がよくわからないという方も、問題ないのでご安心ください。レンダリングは、開発者以外にはなじみのない概念ですが、一度分解してみれば、簡単に理解できます。
レンダリングとは、携帯電話、コンピュータ、タブレット、その他のデバイスのブラウザが、実際にウェブページを「構築」するために行うプロセスのことです。
ほとんどの場合、サイトが意図したとおりにページを動作させるために、お使いのコンピューターが何百ものさまざまなリソースを取得する必要があります。
この「レンダリング」プロセスは、ブラウザが取得しなければならないさまざまなリソースのサイズと量に応じて、長い時間がかかることがあります。
これは、あなた（電池、スピード、データなど）だけでなく、検索エンジンにも負担をかけることになります。
SEO解析のためにJavaScriptをクロールする方法
すべてのJavaScriptのWebサイトが同じように作られているわけではないことを忘れないでください。多くの場合、JavaScriptを使用しているWebサイトには、コンテンツやリンクのレンダリングに必ずしも使用されていないリソースがたくさんあります。
SEO分析のためにサイトをクロールする場合、無視したいリソースがあります。
CSS – “cascading style sheets “の略。CSSは、色やフォントなど、ウェブサイトの要素をスタイル設定するために使用されます。
トラッキングタグ – ユーザーの追跡と収益化の目的で使用されます。GoogleタグマネージャやGoogle Adsのコンバージョントラッキングタグがその良い例です。
JavaScriptの強化 – このタイプのJavaScriptは、サイトをナビゲートする際に見栄えを良くし、スムーズに表示するために使用されますが、コンテンツやリンクに変更を加えることはありません。
SEO分析の目的でサイトをクロールする場合、主に検索エンジンの体験をシミュレートすることに興味があるはずです。そのため、コンテンツ（テキスト）と他のページへの内部リンクを見るようにクローラーを設定するのがよいでしょう。
JavaScriptによるSEOクロールの設定
Botifyでは、しばしばお客様と一緒に、ページ上にロードされるWebサイトのリソースのうち、適切なSEO分析を行うために必要なものはどれか（ある場合）を決定します。不要なリソースを排除することで、SEOに重要な要素だけを見ることができ、分析に重要でないものをクロールして時間を浪費することがなくなります。
SEOのためのJavaScriptクロールはどのように行われるのですか？
Botifyは、JavaScriptを含むWebサイト全体をクロールすることができます!
- すべての JavaScript コード (内部および外部の両方) を実行します
- 実行または無視する JavaScript リソースを選択できます (上記のとおり)
- 外部リソースのキャッシュを有効にします
- あなたのウェブサイトの robots.txt の指示に従いますが、これらはあなたが指定した他の指示に置き換えることもできます
- ロード時間をチェックできます
この機能が重要なのは、JavaScriptによって引き起こされる最も一般的なSEOの問題を、サイト規模に関わらず特定することができるからです。
JavaScript Crawlの結果としてBotifyは以下のことを行います。
- JavaScriptでサイトに挿入されたリンク（< a >タグ）をクロールする
- JavaScriptでサイトに挿入されたタグを検索する
- JavaScript を使用して挿入されたページ コンテンツを表示する
- JavaScriptのリソースが主要なページセグメントにおいてパフォーマンスにどのような影響を及ぼしているかを明らかにする
詳しく知りたい方はお気軽に、デモリクエストをお申し込みください。
