SEOとインバウンドマーケティングの実践情報イマドキのSEOでJavaScriptに関して最低限知っておきたい調査テクニック(前編)GooglebotはJavaScriptを実行できるが、必ずしもちゃんとインデックスされているとは限らない。noteで書くこの記事の内容はすべて筆者自身の見解であり(ありそうもないことだが、筆者が催眠状態にある場合を除く)、SEOmozの見解を反映しているとは限らない。いくらかでもSEOに関わる仕事をしている人なら特に、JavaScriptについて、またそれがクロールやインデックス作成に及ぼす影響について、ますます多くのことを耳にしているだろう。言ってGooglebotはそれに苦しんでいるし、多くのウェブサイトは今日、重要なコンテンツを読み込むのに最新のJavaScriptを活用している。そのため、僕たちが効果を発揮するには、このトピックが話題になった時にそれについて論じられるだけの知識を身につけておく必要がある。Googlebotは現在クロール・インデックス時にJavaScriptやCSSを含めてレンダリングしている。41相当であるため、必ずしも最新のブラウザと同様にJavaScriptを実行できるわけではない。そのため、意図した状態で正しくインデックスされるとは限らないのだ。Googlebotは最新版Chrome相当のレンダリングを行うようになっている。この記事の狙いは、そのために必要な最低限の実践的な知識を身につけてもらうことだ。この記事では、本質的な詳細まで掘り下げたり、経緯を説明したり、具体的なことについて細かく説明したりはしない。それは多くの素晴らしい記事がすでにやっていることだからだ。深く知りたい人は、そうした記事を読んでみることをおすすめする(記事の最後に、僕が好きな他の記事へのリンクを挙げている)。JavaScriptやSEOのトピックに関して有能なコンサルタントになるには、次の3つの質問に答えられる必要がある。対象のドメイン名またはページは、オンページコンテンツやリンクを読み込んだり変更したりするのに、ブラウザ側のJavaScriptを利用しているか?利用している場合、JavaScript経由で読み込まれるコンテンツは、Googlebotに正しく見えているか?利用していない場合、理想的な解決策は何か?いくつか簡単に検索してみたところ、僕は、重要なコンテンツを読み込むのにJavaScriptを利用している3つのランディングページの例が見つった。Symposiumのランディングページを使い、これらの各論点を通じて、上で挙げた質問への回答を示そう。「どのようにやるのか」という側面を取り上げて、最後にいくつかの中核的コンセプトに展開し、さらなるリソースへのリンクを挙げる。質問1対象のドメイン名は、オンページコンテンツやリンクを読み込んだり変更したりするのに、ブラウザ側のJavaScriptを利用しているか?JavaScriptに関する問題を分析する第一歩は、SEOに影響を及ぼし得る重要なコンテンツ(オンページコンテンツやリンク)を読み込むのに、そのサイトがJavaScriptを使用しているかどうかを確認することだ。理想を言えば、新規クライアントを獲得するたびに(初期の技術監査の段階で)、あるいはクライアントがサイトの新機能を再設計または公開するたびに確認するとよい。次のような手法がある。いや、真面目な話、コンサルタントとして君にできる最も気軽かつ簡単にできることの1つは、問い合わせ窓口(またはアカウント担当の開発者)に連絡して聞くことだ。私たちは現在、貴サイトの技術的な大掃除をしております。1点確認したいのですが、貴サイトでは重要なコンテンツ(リンクやオンページコンテンツ)をJavaScript経由で読み込んでいますでしょうか。以下の質問にお答えいただければ幸いです。貴サイトでは、ブラウザ側のJavaScriptを使用して重要なコンテンツを読み込んでいますか?その場合、JavaScript経由で読み込まれるコンテンツの場所と内容について、箇条書きのリストをいただけますか?手作業で確認する数百万ページもある大規模なEコマースサイトでも、通常、重要なページテンプレートはほんの少ししかない。僕の経験では、手作業で確認しても最大で1時間しかかからないはずだ。Developerプラグインを使用して、そこからJavaScriptを無効にする(Chrome自体の設定でも[詳細設定]>[コンテンツの設定]>[JavaScript]からでもいい)。その状態で、サイトの重要なテンプレート(ホームページ、カテゴリーページ、製品ページ、ブログ記事など)を手作業で確認してくのだ。Symposiumのページの表示が、JavaScriptの状態でどう変わるかを示している。JavaScriptを無効にしてページを再読み込みすると、空白ページが表示されてしまっていることが分かる。調査では、サイトの主要ページそれぞれを確認しながら、次のような点についてメモを取っていく。読み込まれないコンテンツおかしな具合に読み込まれるコンテンツ内部リンクが正しく動作しないコンテンツこのステップの最後に、対象のサイトがオンページコンテンツまたはリンクの読み込みや変更でJavaScriptを利用しているかどうかを確認する必要がある。答えが「はい」の場合は、これが(ホームページ、カテゴリーページ、特定のモジュールなどの)どこで起こるかも知る必要がある。FrogやSitebulbなどのツールを使用して)サイトをクロールした後に、JavaScriptを有効にして同じクロールを実行し、内部リンクやオンページ要素の違いを比較してもいい。JavaScriptによるレンダリングを無効にしてサイトをクロールすると、title要素が表示されないことがあるかもしれない。その場合、僕なら(手作業で確認するだけでなく)JavaScriptによるレンダリングを有効にしてサイトをクロールし、title要素が表示されるかどうかを確認してみる。僕たちの例では、先に進んで手作業で確認した。下のスクリーンショットで分かるように、JavaScriptを無効にするとコンテンツは読み込まれない。言い換えれば、このページの最初の質問に対する答えは「はい、サイトの不可欠な部分を読み込むためにJavaScriptが使われている」となる。この記事は、前後編の2回に分けてお届けする。後編では、ページでJavaScriptを使っている場合に、そのコンテンツがグーグルに正しく見えているのかを確認する方法と、うまく見えていない場合はどうすればいいのかを解説する。掲載された以下の記事を、Mozの許諾を得て日本語訳したものです。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!私は変人コレクター。12:12記事初出当時は記載のとおりだったのですが、すでにGooblebotのレンダリングは最新版Chrome相当のものになっております。https://webtan.impress.co.jp/e/2019/05/24/32731#item01記事本文の編注も修正しました。【プロモーションを手掛ける企業】今話題の地方創生にかかわる、プロモーション担当募集です。ビジネス成果に貢献する5つのTips売上が伸びるECサイトの必須条件。行動ターゲティングネット広告の種類の1つ。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。