イマドキのSEOでJavaScriptに関して最低限知っておきたい調査テクニック（後編）

質問2
ページでJavaScriptを利用している場合、JavaScript経由で読み込まれるコンテンツは、Googlebotに正しく見えているか？

ウェブサイトのある部分でJavaScriptを利用している場合（僕たちの例では利用している）、僕たちの仕事は、実際にグーグルがそうしたページをどのように見ているかを再現してみることだ。僕たちは、「グーグルは僕たちが望むようにページまたはサイトを見ているか？」という質問に答えなければならない。

Googlebotが見ている内容をより正確に描写するには、ページをクロールする方法を真似してみる必要がある。

では、どうやるのか？ 次のような手法がある。

• グーグルの新しいモバイルフレンドリーテストツールを使用する
• 表示されているコンテンツをグーグルで検索する
• ツールを使ってクロールする

グーグルの新しいモバイルフレンドリーテストツールを使用する

現時点で、Googlebotがサイト上で見ている内容を最も素早く正確に再現できる方法は、グーグルの新しいモバイルフレンドリーツールを使用することだ。

僕の同僚ドムは最近、Google Search ConsoleのFetch as Googleにある「取得してレンダリング」、Googlebot、モバイルフレンドリーツールを比較して詳細な記事を書いた。ドムの調査結果によると、ほとんどの場合、Googlebotとモバイルフレンドリーツールは同じ結果になったという。

グーグルのモバイルフレンドリーツールを使うには、次のようにする。

1. モバイル フレンドリー テストのページをブラウザで表示する
2. 確認したいページのURLをテキストボックスに入力する
3. ［テストを実行］ボタンを押して、待つ
4. テストが完了したら、ウィンドウの右側にある「ソースコード」をクリックする

このHTMLソースコードを使用して、オンページコンテンツ（title要素やURL正規化タグなど）またはリンクを検索できる。このソースコードにコンテンツやリンクが含まれていれば、グーグルがそのコンテンツを見ている可能性はきわめて高い。

表示されているコンテンツをグーグルで検索する

感覚的に確認するのは常に良いことだ。Googlebotがページ上のコンテンツをインデックス化したかどうかを素早く確認できるもう1つの方法は、ページ上に表示されるテキストを選択し、グーグルでこのテキストを引用符で囲んで「site:」検索をすることだ。

今回取り上げているサイト（前編を参照）では、ページ上に次のようなテキストが表示されている。

Whether you are in marketing, business development, or IT, you feel a sense of urgency. Or maybe opportunity?

（マーケティング、事業開発、またはITのどこに身を置いていても、感じるのは切迫感だ。あるいは機会だろうか？）

これとまったく同じフレーズで「site:」検索をしてみる。具体的には、次のような検索になる。

site:https://symposium.sitecore.com/ "Whether you are in marketing, business development, or IT, you feel a sense of urgency. Or maybe opportunity?"

すると、グーグルは何も表示しない。つまりグーグルは、コンテンツをインデックス化していないということだ。

ツールを使ってクロールする

現在、ほとんどのクロールツールはJavaScriptをクロールする機能を備えている。

たとえば、Screaming Frogでは、［Configuration］＞［Spider］＞［Rendering］と進み、ドロップダウンから「JavaScript」を選択して保存を押せばJavaScriptが有効になる。

DeepCrawlとSiteBulbも、この機能を備えている。

これらのツールにドメイン名またはURLを入力し、選択したツールがクロールを完了したら、レンダリングされたページまたはコードを確認できる。

例：

この質問に答えようとする場合は、グーグルのモバイルフレンドリーツールにURLを入力し、ソースコードをコピーして、重要なオンページ要素（title要素、h1要素、本文など）を検索することから始めるよう推奨する。

また、Diff Checkerなどのツールを使用して、レンダリングされたHTMLと元のHTMLを比較するのも有用だ（Screaming Frogにも、並べて比較できる機能がある）。

ここでは僕たちの例として、モバイルフレンドリーツールで出力された画面を掲載する。

調査してみると、ここで重要なオンページ要素が欠けていることが明らかになる。

僕たちはさらに2回目のテストを行い、グーグルがこのページにあるbodyコンテンツをインデックス化していないことも確認した。

この時点での影響は、Googlebotは僕たちが望むようにはコンテンツを見ていないということであり、これは問題だ。

先に進んで、クライアントに何を推奨できるか見てみよう。

質問3
Googlebotにコンテンツが正しく見えていないことが確実な場合は、どうすればいいか？

サイトがJavaScriptを使用して重要なコンテンツを読み込んでいること、そしてGooglebotがそうしたコンテンツを見ていない可能性が非常に高いことが分かった。最後のステップは、クライアントに理想の解決策を推奨することだ。

キーワードは、「実装する」ではなく、「推奨する」ことにある。問題についてクライアントに注意を促し、なぜその問題が重要なのかを（考えられる影響とともに）説明し、理想の解決策を強調することは、完全に僕たちの仕事だ。

一方で、手持ちのスタックやリソースなどを使用して理想の解決策を見つけ出す開発者の仕事をやろうとすることは、まったく僕たちコンサルタントの仕事ではない。

どうやるのか？

サーバーサイドのレンダリングが必要

現時点でグーグルにSitecoreのランディングページが見えていない主な理由は、Sitecoreのランディングページがユーザー（僕たちやGooglebot）に対し、ページ上でJavaScriptを読み込むという大変な作業をするよう求めているからだ。つまり、ブラウザ側のJavaScriptを使用しているのだ。

Googlebotは文字通りページに上陸し、できる限り適切にJavaScriptを実行しようと試みた後、コンテンツを目にする機会を得る前に去らなければならない状況になっている。

ここで修正できるのは、Sitecoreのランディングページをブラウザ側でJavaScriptを使って生成するのではなくSitecoreのサーバーから正しく読み込めるようにすることだ。つまり、Googlebotにかかる重い負担を取り除き、Sitecoreのサーバーに置くということだ。

そうすることで、Googlebotがページを訪れても大変な作業をする必要はなく、代わりにレンダリングされたHTMLをクロールできるようになる。

このシナリオでは、Googlebotはページを訪れ、すでにHTML（およびすべてのコンテンツ）を見ている。

さらに具体的な選択肢がある（Isomorphic設定など）

やや複雑になるが、折衷型の解決策もある。現時点で最高の策は、Isomorphic（同型）と呼ばれるものだ。

このモデルでは、最初のリクエストはサーバー側で生成し、その後のリクエストはすべてブラウザ側で行う ―― そのどちらにも同じJavaScriptを使って。

こうすると、Googlebotがページを訪れるたときに最初に目にするHTMLは、ページの重要な要素に必要な最初のJavaScriptをサーバー側で実行した結果になる（それ以降はすべてブラウザ側で処理される）。

これを解決策として推奨しようとする場合は、AirbnbのエンジニアがIsomorphic設定について詳しく取り上げている記事を読んでみてほしい。

AJAXクロールソリューション（#!）はうまくいかない

これについては詳細まで踏み込まないが、グーグルがJavaScript向けに提供していた以前のAJAXクロールソリューション（#!形式のURL）はその後廃止され、結局のところうまくいかことを知っておいてほしい。この方法を推奨してはいけない。

（ただし、このソリューションを最近実装した人がいれば、ぜひケーススタディを聞いてみたい。グーグルはどう反応しただろうか？ また、これについて僕の同僚ロブが書いた素晴らしい記事もある）

まとめ

あまりにも単純化しすぎるリスクを承知で、2018年にJavaScriptやSEOに取り組み始めるために必要なことを以下に挙げる。

1. クライアントのサイトがいつ、どこでブラウザ側のJavaScriptを使用して、オンページコンテンツやリンクを読み込んでいるのかを知る。

   • 開発者に聞く。
   • JavaScriptを無効にして、ページテンプレートごとに手作業でテストする。
   • JavaScriptクローラーを使用してクロールする。

2. Googlebotが僕たちの意図した通りにコンテンツを見ているかどうかを確認する。

   • グーグルのモバイルフレンドリーチェッカーを利用する。
   • ページに表示されるコンテンツを「site:」検索をする。
   • JavaScriptクローラーを使用してクロールする。

3. クライアントに理想的な推奨事項を提示する。

   • サーバーサイドのレンダリング
   • 折衷型ソリューション（Isomorphic）
   • AJAXのクロールは不可

さらなるリソース

• The Ultimate Guide to JavaScript SEO
• JavaScript and SEO: The Difference Between Crawling and Indexing
• Core Principles of SEO for JavaScript
• How to Audit JavaScript for SEO
• JavaScript SEO Resources
• View Source: Why it Still Matters and How to Quickly Compare it to a Rendered DOM

JavaScriptやSEOに関するみんなの経験について、何でもいいのでぜひ聞いてみたい。うまくいったケースはどのような場合だろうか？ あまりうまくいかなかったケースは？ Isomorphic設定を実装した人がいれば、それがGooglebotによるサイトの見方にどう影響したか教えてほしい。