AhrefsのブログはWordPressで運営されていますが、サイトはReactのようなJavaScriptで運営されていることをご存知ですか？
ほぼすべてのウェブサイトは、インタラクティブ性を追加し、ユーザー体験を向上させるために、何らかのJavaScriptを使用しています。メニューに使用したり、商品や価格を取り込んだり、複数のソースからコンテンツを取り込んだり、場合によってはサイト上のすべてに使用したりします。現在のウェブサイトの現実は、JavaScriptがどこにでも存在していることです。
Googleのジョン・ミューラーはこう述べています：
SEO担当者がJavaScriptのプログラミングを学ぶ必要があると言っているのではないです。むしろ全くです。SEO担当者が知るべきことは、GoogleがJavaScriptをどのように扱うか、そして、問題のトラブルシューティングの方法です。SEO担当者がコードを触ることさえ許されるケースはほとんどないでしょう。この記事の私のゴールは、あなたが学ぶ手助けをすることです。
テクニカルSEOは初めてですか？
初心者向けテクニカルSEOガイド
JavaScript SEOとは？
JavaScript SEOは、テクニカルSEO（検索エンジン最適化）の一部で、JavaScriptを多用するウェブサイトをクロールしやすく、インデックスしやすく、検索しやすいものにしようとするものです。目標は、これらのウェブサイトが検索エンジンで見つかり、上位に表示されるようにすることです。
JavaScriptはSEOに不利なのか、JavaScriptは悪なのか？そんなことはないです。ただし、一般的なSEOの手法とは異なるため、理解に少し時間を要することがあります。もしかするとより適した解決策がある場合もありますが、人々はしばしば過剰に使用してしまうことがあります。ただし、JavaScriptも完璧ではなく、常に適切なツールとは限りません。HTMLやCSSとは異なり、JavaScriptは逐次解析できず、ページの読み込みやパフォーマンスを遅くすることがあります。多くの場面で、パフォーマンスと機能性をトレードオフに考える必要が出てくることもあります。
GoogleがJavaScriptでページを処理する方法
検索エンジンの黎明期には、ほとんどのページの内容を見るには、ダウンロードしたHTMLレスポンスだけで十分でした。しかし、JavaScriptの普及により、検索エンジンは多くのページをブラウザと同じように表示する必要が生じました。
Googleはページを表示する仕組みを持ち、これをWebレンダリングサービス（WRS）と呼びます。Googleは、このプロセスの動作をわかりやすく説明するために、簡単な図を提供しています。
例えば、URLからプロセスを開始するとしましょう。
1.クローラー
ローラーはサーバーに対してGETリクエストを送信します。サーバーはヘッダーとファイルの内容を返信し、それが保存されます
Googleは現在、モバイルファーストインデックスに取り組んでいるため、このリクエストはモバイルユーザーエージェントからのものである可能性が高いです。Google があなたのサイトをどのようにクロールしているかは、Search Console 内のURL 検査ツールで確認することができます。あるURLに対してこのツールを実行すると、「Crawled as」のカバレッジ情報を確認でき、そのページがデスクトップインデックスかモバイルファーストインデックスのどちらに属しているかが分かるはずです。
リクエストは主に米国カリフォルニア州マウンテンビューから行います、米国外のロケールに適応したページのクロールも行っていることもあります。サイトによっては、特定の国からの訪問者や特定のIPを使用する訪問者をブロックしたり、異なる方法で扱ったりするため、Googlebotにコンテンツが表示されない可能性があるからです。
また、サイトによっては、特定のクローラーにコンテンツを表示するためにユーザーエージェント検出を使用しています。特にJavaScriptのサイトでは、Googleはユーザーとは異なるものを見ている可能性があります。そのため、Google Search Console内のURL検査ツール、モバイルフレンドリーテスト、リッチリザルトテストなどのGoogleツールは、JavaScript SEOのトラブルシューティングに重要です。これらのツールは、Googleが実際にどのような情報を見ているかを示してくれ、コンテンツがブロックされているか、ページの内容を確認できるかをチェックするのに役立ちます。GETリクエストでダウンロードされたもの、そしてレンダリングされたページ、これらのテストツールにはいくつかの重要な違いがあります。そのため、レンダリングに関するセクションでは、これらのテスト方法を詳しく説明します
また、上の画像でグーグルはクロールの出力を「HTML」としているが、実際にはHTML、JavaScriptファイル、CSSファイルなど、ページを構築するのに必要なリソースをクロールして保存している点にも注意が必要だ。
2.加工
画像の「Processing」という言葉で難読化されているシステムはたくさんありますが、その中からJavaScriptに関連するものをいくつか取り上げます。
リソースとリンク
Googleは、ユーザーのようにページからページへ移動することはありません。代わりに、ページを構築するために必要な他のページやファイルへのリンクが存在するかどうかをチェックします。これらのリンクは抽出され、クロールキューに追加されます。
Googleは、<link>タグなどからページを構築するのに必要なリソースリンク（CSS、JSなど）を抽出します。ただし、他のページへのリンクは特定の形式である必要があります。内部リンクも外部リンクも、<a>タグにhref属性を持たせる必要があります。Googleは、リンクとして認識できる形式でなければなりません。また、JavaScriptを使用している場合でも、検索に適した形式に変換する方法がたくさんあります。
良い例：
<a href=”/page”>simple is good</a>
<a href=”/page” onclick=”goTo(‘page’)”>still okay</a>
悪い例：
<a onclick=”goTo(‘page’)”>nope, no href</a>
<a href=”javascript:goTo(‘page’)”>nope, missing link</a>
<a href=”javascript:void(0)”>nope, missing link</a>
<span onclick=”goTo(‘page’)”>not the right HTML element</span>
<option value="page">nope, wrong HTML element</option>
<a href=”#”>no link</a>
Button, ng-click, there are many more ways this can be done incorrectly.
また、JavaScriptで追加された内部リンクは、レンダリングが完了するまで認識されない点も重要です。これは通常比較的短時間で行われるため、ほとんどの場合、心配する必要はありません。
キャッシング
HTMLページ、JavaScriptファイル、CSSファイルなど、Googleがダウンロードするファイルはすべて積極的にキャッシュされます。Googleはキャッシュのタイミングを無視し、必要なときに新しいコピーを取得します。これについては、レンダリングのセクションでもう少し詳しく説明します。
重複排除
レンダリング前に、ダウンロードされたHTMLから重複するコンテンツを削除したり、優先順位を低くすることができます。アプリシェルモデルを使う場合、表示されるコンテンツやコードは非常に限られていることがあります。実際、同じコードが複数のページや複数のウェブサイトで使用されることがあります。このため、ページが重複して扱われ、すぐにレンダリングが行われないことがあります。また、誤ったページやサイトが検索結果に表示されることもあるかもしれません。これは時間が解決する場合もありますが、特に新しいウェブサイトでは問題になることがあります。
最も厳しい指令
Googleは、HTMLとページのレンダリングバージョンの間で最も制限的なステートメントを選択します。もしJavaScriptがコンテンツの記述を変更し、それがHTMLの記述と衝突する場合、Googleは単純に最も制限的な方を優先します。例えば、noindexがindexよりも優先され、HTML内のnoindexはレンダリングを完全にスキップします。
3.レンダーキュー
すべてのページがレンダラーに送られるようになりました。JavaScriptと2段階インデックス（HTMLの後でページがレンダリングされる方法）に関して、多くのSEO担当者が心配することの1つは、ページが数日から数週間もレンダリングされない可能性があるということです。Googleがこれを調査したところ、ページがレンダラーに送られる時間の中央値は5秒で、90パーセンタイルは数分であった。つまり、HTMLを取得してからページがレンダリングされるまでの時間は、ほとんどの場合、気にする必要はないということです。
4.レンダラー
レンダラーは、Googleがページをレンダリングし、ユーザーが何を見るかを確認する場所である。ここでは、JavaScriptと、JavaScriptによってDOM（Document Object Model）に加えられた変更が処理されます。
そのため、Googleはヘッドレス・クローム・ブラウザを使用しています。これは現在「エバーグリーン」であり、最新のクローム・バージョンを採用し、最新の機能をサポートしていることを意味します。以前はGoogleがChrome 41でレンダリングしていたため、多くの機能がサポートされていなかったのです。
Googleはウェブ・レンダリング・サービス（WRS）に関する詳細な情報を提供しており、パーミッションの拒否、ステートレス化、ライトDOMとシャドウDOMのフラット化など、一読の価値があります。
ウェブスケールでのレンダリングは、世界で8番目の驚異かもしれません。真剣勝負であり、膨大なリソースを必要です。大規模のため、Googleはレンダリングプロセスを高速化するために多くのショートカットを採用しています。Ahrefsでは、ウェブページを大規模にレンダリングする唯一の主要なSEOツールであり、リンクインデックスをより完全なものにするために、1日に1億5000万ページをレンダリングしています。これにより、JavaScriptのリダイレクトをチェックしたり、JavaScriptが挿入されているリンクをリンクレポートにJSタグとして表示することができます：
キャッシュ・リソース
グーグルはリソースのキャッシュに大きく依存しています。ページがキャッシュされ、ファイルがキャッシュされ、基本的にすべてがレンダラーに送られる前にキャッシュされるのです。ページを読み込むたびに各リソースをダウンロードするのではなく、キャッシュされたリソースを使用してこのプロセスを高速化しているのです。
これは、以前のファイルバージョンがレンダリングプロセスで使用され、ページのインデックスされたバージョンが古いファイルの一部を含む可能性がある、いくつかの不可能な状態につながる可能性があります。ファイルバージョニングやコンテンツフィンガープリントを使用して、重要な変更があったときに新しいファイル名を生成し、Google がレンダリングの際にリソースの更新バージョンをダウンロードするようにすることができます。
固定タイムアウトなし
よくあるSEO神話に、レンダラーがページを読み込むのに5秒しかかからないというものがあります。サイトを高速化することは常に良いアイデアではあるが、この俗説は、前述のGoogleのファイルキャッシュの方法ではあまり意味をなさないです。Googleは基本的に、すでにすべてをキャッシュした状態でページを読み込んでいます。この俗説は、リソースをライブで取得するURL検査ツールのようなテストツールから来ており、彼らは合理的な制限を設ける必要があります。
レンダラーに固定されたタイムアウトはありません。おそらく、公開されているレンダートロンと同じようなことをしているのでしょう。ネットワークアクティビティが発生しなくなるnetworkidle0のようなものを待ち、また、何かが詰まったり、誰かが自分のページでビットコインをマイニングしようとしている場合に備えて、最大時間を設定している可能性があります。
Googlebotが見るもの
Googlebotはウェブページ上でクリックやスクロールをしない行動を取りますが、これに対処する方法はあります。コンテンツに関しては、DOM（ページの構造）に読み込まれる限り、特別なアクションをしなくてもGooglebotはそれを見ることができます。この点についてはトラブルシューティングのセクションで詳しく説明しますが、基本的には、コンテンツがDOMに存在していて、ただ隠れているだけであれば、Googlebotはそれを検知できます。しかし、クリックしないと表示されないコンテンツは検出できません。
また、Googleはコンテンツを見るためにスクロールする必要がありません。モバイルの場合、411×731ピクセルの画面サイズでページを読み込み、長さを12,140ピクセルにリサイズする。要するに、画面サイズ411×12140ピクセルの非常に長い画面を持つスマートフォンと同じです。デスクトップの場合も同様で、1024×768ピクセルから1024×9307ピクセルに変更されます。
もうひとつの興味深いポイントは、Googleがページのレンダリング中に実際のピクセル描画を行わないことです。ページの読み込みが完了するには時間とリソースが必要です。Googleはページの構造とレイアウトを理解するだけで十分であり、ピクセルを描画するまでもないのです。Googleのマーティン・スプリットはこう述べています：
Google検索では、具体的なピクセル描画には興味を持ちません。私たちは情報とその意味を処理したいので、中間的な状態を介することが重要です。実際にピクセルを描画する必要はありません。
下記の画像は、何がカットアウトされているかを説明するのに役立つかもしれません。Chrome Dev ToolsのPerformanceタブでテストを実行すると、ローディングチャートが表示されます。この緑色の部分は、Googlebotが実際に描画する部分を示しており、Googlebotは描画そのものを行わないため、リソースを節約できます。
グレー= ダウンロード
青= HTML
黄色= JavaScript
紫= レイアウト
緑= 描画
5.クロールキュー
Googleは、クロール予算について少し説明したリソースを用意していますが、各サイトには独自のクロール予算があり、各リクエストには優先順位が付けられていることを知っておく必要がある。Googleは、あなたのサイトとインターネット上の他のサイトとのクロールのバランスを取らなければなりません。一般的に新しいサイトや動的なページが多いサイトは、クロールが遅くなる可能性が高いです。また、更新頻度が低いページや、リクエスト頻度が低いリソースも同様です。
テスト／トラブルシューティング
JavaScriptを使用したウェブサイトには、DOMの一部しか更新できないという「ややこしい点」が存在します。たとえば、ユーザーが別のページに移動しても、DOM内のタイトルタグやカノニカルタグのような一部は更新されないかもしれません。しかし、検索エンジンにとってはこれが問題ではないこともあります。Googleは各ページをステートレス（状態を保持しない）で読み込むため、以前の情報を保持しておらず、ページ間の移動を追跡しないことを覚えておくことが重要です。あるページから別のページに移動した後で、カノニカルタグが更新されないといった現象が発生することがあり、SEO担当者はこれに問題があると誤解してしまうことがありますが、Googleはこの状態を認識しません。開発者は、状態を更新するために「History API」と呼ばれるものを使用して修正できますが、これもまた問題ではない場合もあります。ページを更新して表示内容を確認するか、あるいはGoogleのテストツールを使用して表示内容を確認することをおすすめします。詳細については後ほど説明します。
ビューソース対インスペクト
ウェブページ上で右クリックすると、ページのソースコードを表示する「View Source」と、ページを検査する「Inspect」の選択肢が表示されます。View Sourceは、GETリクエストと同じものを表示します。つまり、そのページの生のHTMLコードを見ることができます。一方で、Inspectは、すでに処理されたDOM（ドキュメント・オブジェクト・モデル）を表示します。これにより、変更が加えられた後の状態が見られ、Googlebotが見る内容に近づくことができます。要するに、最新のアップデートがされたページの内容が表示されます。JavaScriptを含むウェブページを解析する際には、View SourceではなくInspectを使用する方が適切です。
特定のユーザーエージェントに基づいてプリレンダリングされるサイトをトラブルシューティングするには、Chrome DevToolsでカスタムユーザーエージェントを設定する必要があります。
Googleキャッシュ
Googleのキャッシュは、Googlebotが見ているものを確認する信頼できる方法ではありません。レンダリングされたHTMLや古いバージョンであることもあるが、通常は最初のHTMLである。このシステムは、ウェブサイトがダウンしているときにコンテンツを見るために作られたものです。デバッグツールとしては特に役に立ちません。
Googleテストツール
Google Search Console内のURLインスペクターやモバイルフレンドリーテスター、リッチリザルトテスターなど、Googleのテストツールはデバッグに役立ちます。ただし、これらのツールで見る内容は、実際にGoogleが見ているものと若干異なることがあります。すでに説明したように、これらのツールにはレンダラーのような5秒のタイムアウト制限はありません。また、これらのツールはリアルタイムでリソースを取得しており、キャッシュされたバージョンを使用していないため、表示が異なることがあります。これらのツールのスクリーンショットには、ピクセルが描画されたページが表示されます。
これらのツールは、コンテンツがDOMで読み込まれているかどうかを確認するのに便利です。表示されるHTMLは、レンダリングされたDOMです。テキストのスニペットを検索して、それがデフォルトで読み込まれているかどうかを確認することもできます。
このツールは、ブロックされている可能性のあるリソースや、デバッグに便利なコンソールのエラーメッセージも表示します。
Googleでテキストを検索する
JavaScriptを使用しているウェブサイトの中には、すべてのコンテンツがGoogleによって表示されていない可能性があります。簡単な確認方法は、コンテンツの一部をGoogleで検索してみることです。
「あなたのコンテンツのフレーズ」を検索して、そのページが返されるかどうか確認してください。もし表示されるなら、あなたのコンテンツはGoogleに見られた可能性が高いです。デフォルトで非表示になっているコンテンツは、SERPのスニペット内に表示されない可能性があることに注意してください。
Ahrefs
リンクインデックスのレンダリングページとともに、サイト監査のクロールでJavaScriptを有効にすると、監査でより多くのデータを引き出すことができます。私たちは、すべてのページの生とレンダリングされたHTMLを提供し、あなたはどちらかのコンテンツ内で検索することができます。
AhrefsツールバーはJavaScriptにも対応しており、HTMLとレンダリングされたタグを比較することができます。
レンダーオプション
JavaScriptのレンダリングに関しては、たくさんの選択肢があります。Googleが提供する信頼性のあるガイドをご紹介しましょう。サーバーサイドレンダリング（SSR）、静的サイトのレンダリング、プリレンダリングのいずれの設定も、検索エンジンにとっては問題ありません。ただし、問題が生じる可能性があるのは、すべてのレンダリングがユーザーのブラウザ内で完了するフルクライアントサイドレンダリングです。
Googleならクライアントサイド・レンダリングでも問題ないでしょうが、他の検索エンジンをサポートするためには、別のレンダリング・オプションを選択するのがベストです。BingもJavaScriptレンダリングをサポートしているが、その規模は不明です。YandexとBaiduは私が見た限りではサポートが限られており、他の多くの検索エンジンはJavaScriptをほとんどサポートしていません。
また、特定のユーザーエージェント向けにレンダリングするダイナミックレンダリングのオプションもあります。これは基本的に回避策ですが、検索エンジンやソーシャルメディアボットのような特定のボット用にレンダリングするのに便利です。ソーシャルメディアボットはJavaScriptを実行しないので、彼らにコンテンツを提供する前にレンダリングしない限り、OGタグのようなものは表示されません。
古いAJAXクローリング方式を使用していた場合、これは非推奨となっており、サポートが終了している可能性があることに注意してください。
JavaScriptサイトのSEO対策
多くのプロセスは、SEO担当者がすでに見慣れているものと似ているが、若干の違いがあるかもしれ。
オンページSEO
コンテンツ、タイトルタグ、メタディスクリプション、alt属性、メタロボットタグなど、通常のオンページSEOのルールはすべてそのまま適用されます。「オンページSEO：実行可能なガイド」をご覧ください。
デフォルトのタグ付けとタグの上書き
多くの場合、JavaScript開発者は生のHTML で <title> のような要素や <canonical> や meta descriptionのようなタグにデフォルト値を設定します。これらはレンダリングされたHTMLでは上書きされることが多いのですが、ボットには両方見える可能性があります。
タイトルとディスクリプションの場合、Googleは単純に値を上書きするので問題ありません。canonicalタグの場合、2つの異なる値が表示されると、canonicalがまったく設定されていないものとして扱われます。
もうひとつ見落とされがちなのは、画像のalt属性がほとんど設定されていないことです。
クロールを許可する
リソースへのアクセスをブロックしないGoogleは、ページを適切にレンダリングするために、リソースにアクセスしてダウンロードできる必要があります。robots.txtに、必要なリソースのクロールを許可する最も簡単な方法を追加します：
User-Agent: Googlebot
Allow: .js
Allow: .css
また、サブドメインや、APIコールのためのドメインなど、リクエストを行う可能性のある追加ドメインについても、robots.txtファイルを確認してください。
URL
コンテンツ更新時のURL変更History APIについてはすでに触れたが、JavaScriptフレームワークでは、きれいなURLにマッピングできるルーターがあることを知っておくべきです。URL内でハッシュ（#）を使用したくない場合があります。これは特に、Vueや以前のAngularのバージョンではこの問題が起こることがあります。従って、例えば abc.com/#something のようなURLの場合、#以降の部分は通常サーバーによって無視されます。Vueでこの問題を解決するには、以下のような変更が開発者によって行われます：
Vue router:
Use ‘History’ Mode instead of the traditional ‘Hash’ Mode.
const router = new VueRouter ({
mode: ‘history’,
router: [] //the array of router links
)}
重複コンテンツ
JavaScriptでは、同じコンテンツに対して複数のURLが存在することがあり、重複コンテンツの問題につながります。これは、大文字小文字、ID、IDを持つパラメータなどによって引き起こされる可能性があります。つまり、これらすべてが存在する可能性があります：
domain.com/
Abcdomain.com/abc
domain.com/123
domain.com/?id=123
解決策は簡単だ。インデックスさせたいバージョンを1つ選び、canonicalタグを設定する。
SEO「プラグイン」タイプのオプション
JavaScriptフレームワークの場合、これらは通常モジュールと呼ばれます。React、Vue、Angularのような人気のあるフレームワークの多くは、”React Helmet “のようにフレームワーク＋モジュール名で検索するとバージョンが見つかります。Meta tags、Helmet、Head はすべて、SEOに必要な一般的なタグの多くを設定できる、同様の機能を持つ人気のモジュールです。
エラーページ
JavaScriptフレームワークはサーバーサイドではないので、404のようなサーバーエラーを投げることはできません。エラーページにはいくつかの選択肢がある：
- 404ステータスコードで応答するページへのJavaScriptリダイレクトを使用する。
- 失敗しているページにnoindexタグを追加し、”404 Page Not Found “のようなエラーメッセージを表示する。実際に返されるステータスコードは200 OKなので、これはソフト404として扱われる。
サイトマップ
JavaScriptフレームワークは通常、クリーンなURLにマッピングするルーターを持っています。これらのルーターには通常、サイトマップを作成する追加モジュールがあります。”Vueルーターサイトマップ “など、システム＋ルーターサイトマップで検索すると見つかります。レンダリングソリューションの多くにもサイトマップオプションがあります。この場合も、使用しているシステムを見つけて、「Gatsby sitemap」など、システム＋サイトマップでググれば、すでに存在するソリューションが見つかるはずです。
リダイレクト
SEO担当者は301/302リダイレクトに慣れており、これはサーバーサイドで実行されます。しかし、Javascriptは通常クライアントサイドで実行される。Googleはリダイレクトに従ってページを処理するので、これは問題ありません。リダイレクトは依然として、ページランクのようなすべてのシグナルを通過させます。これらのリダイレクトは通常、コード内の “window.location.href “を探すことで見つけることができます。
国際化
通常、hreflangのような国際化に必要な機能をサポートする、異なるフレームワーク用のいくつかのモジュールオプションがあります。それらは一般的に異なるシステムに移植され、i18nやintlを含んでいますし、多くの場合、Helmetのようなヘッダタグに使われる同じモジュールを使って必要なタグを追加することができます。
遅延ローディング
通常、遅延ロードを処理するためのモジュールがあります。まだ気づいていないかもしれませんが、JavaScriptフレームワークで作業するときに必要なほとんどすべてのことを処理するモジュールがあります。Lazy と Suspense は遅延ロードのための最も人気のあるモジュールです。画像を遅延ロードしたいでしょうが、コンテンツを遅延ロードしないように注意してください。これはJavaScriptでも可能ですが、検索エンジンに正しく拾われない可能性があります。
最終的な感想
JavaScriptは賢く使うべきツールであり、SEOが恐れるべきものではないです。この記事がJavaScriptの扱い方を理解する手助けになれば幸いです。あなたのJavaScriptサイトを検索エンジンのために改善する手助けをしてくれる最大の味方になってくれるでしょう。
質問がありますか？ツイッターで教えてください。
著者プロフィール
Patrick Stox
Ahrefsのプロダクトアドバイザー、テクニカルSEO、ブランドアンバサダー。Raleigh SEO Meetup、Raleigh SEO Conference、Beer & SEO Meetup、Findability Conferenceのオーガナイザー、/r/TechSEOのモデレーター。
コメント