JavaScriptサイトにnoscriptタグは役に立たない、必要であればプリレンダリングしたコンテンツを配信

[レベル: 初級&上級]

<noscript> タグで作成されたコンテンツを Google は無視します。
<noscript> 内のコンテンツはインデックスされない、つまりランキングには影響を与えないし、スニペットに使われることもありません。

JavaScript を多用するページでは、プリレンダリングした HTML を準備しておくのも適した手段です。

JavaScript だけのページに noscript タグ

JavaScript を多用したウェブサイトの Google 検索における問題をディスカッションするフォーラムJohn Mueller(ジョン・ミューラー)氏が先日開設しました(参加には申請が必要。でも基本的には誰でも参加可能)。

このディスカッションフォーラムで次のような質問が投稿されました。

JavaScript だけで構成するウェブサイトを公開するとします。主要なコンテンツやリンクなどはすべて JavaScript で作成されレンダリングされます。

このような場合、レンダリングした後に作られる生の HTML ソースを <noscript> で設置しておいたほうがいいでしょうか?

<noscript> は JavaScript を実行できない環境のもとで、代わりに表示する内容を設定するための HTML タグです。
質問者のサイトはすべてのコンテンツを JavaScript で生成するので、もし JavaScript を実行できなかったとするとブラウザはもちろんのこと、Googlebot もコンテンツを認識できません。
そこで、<noscript> であらかじめコンテンツを埋め込んでおくという予防策はどうだろうか? と尋ねたのです。

ミューラー氏は次のようにアドバイスしました。

<noscript> に関しては、そのタグの中にあるものをすべて私たちは無視しようとする。スニペットにもインデックスに対してもだ。

したがって、少なくとも Google 検索においては、JavaScriptでレンダリングするコンテンツと <noscript> のコンテンツの両方を提供することは、JavaScript でレンダリングするコンテンツだけを提供することと何ら変わらない。

(JavaScript に頼らない)カスタマイズした HTML を配信したいのであれば、完全なコンテンツをプリレンダリングするといいかもしれない。より高速なページ表示も実現できる。

こうした設定は、React では Isomorphic JavaScript と、Angular では Universal JavaScript と呼ばれる。

可能であれば、一般的には、こうした構成を私たちは推奨する。すべてのクライアントに最初のアクセス時に完全にレンダリングした HTML ページを配信して、すばやくページを表示する。一方で、クローラに対しては、静的な HTML ページのように扱ってもらえる。

そのままかプリレンダリングで

初歩的なことと上級者向けのことの両方が、ミューラー氏のコメントには含まれています。

初歩的なことは、Google は <noscript> を無視することです。
これは新しい情報ではありません。

ほぼ2年前に、『noscript タグ をGoogle はインデックスしない』という記事をこのブログで書いています。
知らなかったとしたら、こちらの記事を読んでください。

ということで、<noscript> は役に立ちません(「Google検索 においては」という意味であって、あらゆる場面で役に立たないということではないですよ)。

上級向けのことは、プリレンダリング(事前レンダリング)の使用です。

Googlebot による JavaScript コンテンツのレンダリングに関しては、Googlebot が想定どおりにレンダリングできるのであれば、何もする必要はないでしょう。
Googlebot のレンダリング結果は、おなじみの Fetch as Google で検証できますね。

Googlebot のレンダリングに問題があったり不安があったりする場合には、事前レンダリングしたページを準備しておいて配信するといいだろうというのが、ミューラー氏のアドバイスです。
静的な HTML ファイルなので、Googlebot はコンテンツを問題なく認識できます。

これにプラスして、ユーザー見地に立てば、ブラウザは JavaScript を実行する必要がないので、ページ表示が速くなるというメリットも出てきます。

Googlebot は JavaScript の認識能力を格段に向上させています。
とは言っても、完璧ではありません。
JavaScript をどのようにウェブサイトで構成しているかにも大きく依存します。
Fetch as Google を検証用に上手に使って、必要であればプリレンダリングのような代替策も検討しましょう。
ただし代替策には、<noscript> は役立ちません。