Web担当者ForumでのJavaScriptについての記事です。
イマドキのSEOでJavaScriptに関して最低限知っておきたい調査テクニック（前編）
イマドキのSEOでJavaScriptに関して最低限知っておきたい調査テクニック（前編）[Web担当者Forum]
JavaScriptやSEOのトピックに関して有能なコンサルタントになるには、次の3つの質問に答えられる必要がある。
1.対象のドメイン名またはページは、オンページコンテンツやリンクを読み込んだり変更したりするのに、ブラウザ側のJavaScriptを利用しているか？
2.利用している場合、JavaScript経由で読み込まれるコンテンツは、Googlebotに正しく見えているか？
3.利用していない場合、理想的な解決策は何か？
いくつか簡単に検索してみたところ、僕は、重要なコンテンツを読み込むのにJavaScriptを利用している3つのランディングページの例が見つった。
*Sitecore Symposiumのページ
https://symposium.sitecore.com/
*Huluのオリジナルドラマ『The Path』のランディングページ
https://www.hulu.com/series/the-path-0886112f-e00f-44c4-8bca-a6a59e864355
*ロレアルのホームページ
https://www.lorealparisusa.com/JavaScriptに関する問題を分析する第一歩は、SEOに影響を及ぼし得る重要なコンテンツ（オンページコンテンツやリンク）を読み込むのに、そのサイトがJavaScriptを使用しているかどうかを確認することだ。理想を言えば、新規クライアントを獲得するたびに（初期の技術監査の段階で）、あるいはクライアントがサイトの新機能を再設計または公開するたびに確認するとよい。
では、どうやるのか？ 次のような手法がある。
*クライアントに聞く
*手作業で確認する
*クロールしてみる
イマドキのSEOでJavaScriptに関して最低限知っておきたい調査テクニック（後編）
イマドキのSEOでJavaScriptに関して最低限知っておきたい調査テクニック（後編）[Web担当者Forum]
ウェブサイトのある部分でJavaScriptを利用している場合（僕たちの例では利用している）、僕たちの仕事は、実際にグーグルがそうしたページをどのように見ているかを再現してみることだ。僕たちは、「グーグルは僕たちが望むようにページまたはサイトを見ているか？」という質問に答えなければならない。
Googlebotが見ている内容をより正確に描写するには、ページをクロールする方法を真似してみる必要がある。
では、どうやるのか？ 次のような手法がある。*グーグルの新しいモバイルフレンドリーテストツールを使用する
*表示されているコンテンツをグーグルで検索する
*ツールを使ってクロールする現時点で、Googlebotがサイト上で見ている内容を最も素早く正確に再現できる方法は、グーグルの新しいモバイルフレンドリーツールを使用することだ。
僕の同僚ドムは最近、Google Search ConsoleのFetch as Googleにある「取得してレンダリング」、Googlebot、モバイルフレンドリーツールを比較して詳細な記事を書いた。ドムの調査結果によると、ほとんどの場合、Googlebotとモバイルフレンドリーツールは同じ結果になったという。
グーグルのモバイルフレンドリーツールを使うには、次のようにする。
1.モバイル フレンドリー テストのページをブラウザで表示する
2.確認したいページのURLをテキストボックスに入力する
3.［テストを実行］ボタンを押して、待つ
4.テストが完了したら、ウィンドウの右側にある「ソースコード」をクリックする
このHTMLソースコードを使用して、オンページコンテンツ（title要素やURL正規化タグなど）またはリンクを検索できる。このソースコードにコンテンツやリンクが含まれていれば、グーグルがそのコンテンツを見ている可能性はきわめて高い。現在、ほとんどのクロールツールはJavaScriptをクロールする機能を備えている。
たとえば、Screaming Frogでは、［Configuration］＞［Spider］＞［Rendering］と進み、ドロップダウンから「JavaScript」を選択して保存を押せばJavaScriptが有効になる。
DeepCrawlとSiteBulbも、この機能を備えている。
これらのツールにドメイン名またはURLを入力し、選択したツールがクロールを完了したら、レンダリングされたページまたはコードを確認できる。キーワードは、「実装する」ではなく、「推奨する」ことにある。問題についてクライアントに注意を促し、なぜその問題が重要なのかを（考えられる影響とともに）説明し、理想の解決策を強調することは、完全に僕たちの仕事だ。
一方で、手持ちのスタックやリソースなどを使用して理想の解決策を見つけ出す開発者の仕事をやろうとすることは、まったく僕たちコンサルタントの仕事ではない。
どうやるのか？
サーバーサイドのレンダリングが必要
現時点でグーグルにSitecoreのランディングページが見えていない主な理由は、Sitecoreのランディングページがユーザー（僕たちやGooglebot）に対し、ページ上でJavaScriptを読み込むという大変な作業をするよう求めているからだ。つまり、ブラウザ側のJavaScriptを使用しているのだ。
Googlebotは文字通りページに上陸し、できる限り適切にJavaScriptを実行しようと試みた後、コンテンツを目にする機会を得る前に去らなければならない状況になっている。
ここで修正できるのは、Sitecoreのランディングページをブラウザ側でJavaScriptを使って生成するのではなくSitecoreのサーバーから正しく読み込めるようにすることだ。つまり、Googlebotにかかる重い負担を取り除き、Sitecoreのサーバーに置くということだ。
そうすることで、Googlebotがページを訪れても大変な作業をする必要はなく、代わりにレンダリングされたHTMLをクロールできるようになる。
このシナリオでは、Googlebotはページを訪れ、すでにHTML（およびすべてのコンテンツ）を見ている。
SEOコンサルタントの感想
記事のポイント
▼クライアントがJavaScriptを使用しているかどうかを確認する。
●聞く
●JavaScriptを無効にして確認（Google ChromeのWeb Developerプラグインを使用）
●JavaScriptを無効にしてコンテンツは読み込まれなかったらJavaScriptが使われている。
▼Googlebotの見ているサイトを再現する。
●モバイル フレンドリー テストを使用
●Googleで検索する
⇒「site:＜表示されているテキスト＞」で検索する
⇒表示されていなければそのコンテンツをGoogleはインデックス化していない
●ツールを使ってクロールする
▼Googlebotにコンテンツが正しく見えていない場合の対処
●JavaScriptを使って生成するのではなくSitecoreのサーバーから読み込むように修正。
▼SEOの上級者を目指すには、JavaScriptを勉強をすべきだという事を
Google の John Mueller（ジョン・ミューラー）氏がコメントしています。
【SEO】Google「テクニカルSEOの上級者になりたいならJavaScriptを勉強しろ」
『今後数年にわたって、これまでの SEO の20年よりももっと多くの JavaScript に出くわすことになるだろう。テクニカル SEO に懸命になりたいなら、HTML は終わりにして JS をもっともっと学ぶ必要があるだろう。
しゃれた静的な HTML のサイトには利点があるから、なくなることはなさそうだ。しかしながら、実際のところは、 JS のフレームワークはいたるところで今日は使われている。静的な HTML のテクニカル SEO を十分に把握している SEO 施策者の数を考えると、自分自身を差別化したいのなら――明らかにテクニカル SEO を理解することに加えて――JS に関して次のようなことを理解すればあなたのサービスをさらに価値あるものにできる。
●どのように JS が機能するのか
●どこで JS がSEO と協調するのか
●どこで JS がSEO を阻害するのか
●他の検索エンジンとクライアントにはどんな影響を JS は与えるのか
コーディングはみんなが好きなものではないし、SEO に関係しないものもたくさんある。しかし、SEO に懸命になるなら JavaScript は大きなチャンスになる。』
SEO・IT漫画「ウェブマブ！」
DAYS NEO -デイズ ネオ-
「ウェブマブ！」TOP
「ウェブマブ！」 第5話（9-10P）「面白いマンガとは？」
マンガボックスインディーズ
「ウェブマブ！」 第5話（9-10P）「面白いマンガとは？」
LINEマンガインディーズ
「ウェブマブ！」TOP
「ウェブマブ！」 第5話（9-10P）「面白いマンガとは？」
マガジンデビュー
「ウェブマブ！」 第5話（9-10P）「面白いマンガとは？」
少年ジャンプルーキー
「ウェブマブ！」TOP
「ウェブマブ！」 第5話（9-10P）「面白いマンガとは？」
マンガハック
「ウェブマブ！」 第5話（9-10P）「面白いマンガとは？」