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