noscriptタグとは?JavaScriptが無効である場合にのみ表示されるタグ

noscriptaicatch

Webサイト制作やWebサイト開発を行っているときに

ブラウザの種類や設定により、JavaScriptが無効である場合にのみ、表示させたいものがある場合どうすればいいの?

と思うことがあるかもしれません。

ここでは、そういったときに使うnoscriptタグの

・基本的な使い方
・noscriptの内容を検索エンジンはどのように扱うか

について解説します。

是非参考にしてみてください。

noscriptタグとは

noscriptタグの読み方

noscriptタグは「ノースクリプト」タグと読みます。否定の「ノー」+台本や脚本という意味を持つ「スクリプト」を合わせた単語です

プログラムに関した文章でのスクリプトは「プログラム言語によるコンピュータへの命令が書いてある文章」というような意味で使われます。

noscriptタグの説明

noscriptタグは、導入文にもある通りscriptタグが動作しない場合にのみ表示されるタグです

様々なブラウザで、JavaScriptを無効にすることが出来ます。理由は様々ですが、セキュリティ上の理由でJavaScriptを動かさない場合が多いようです。

noscriptタグで利用できる属性

noscriptタグでは、グローバル属性のみ利用可能です。

グローバル属性はすべてのHTMLタグで利用できる属性です。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

noscriptはJavaScriptが動作しないときにだけ表示されるタグです

noscripttag01

noscriptの使い方

noscriptタグは下記のように記述します。JavaScriptが有効であり、scriptタグが動作しない場合のみ表示されます

上記の場合、JavaScriptが有効である場合にはsample.jsに記述したスクリプトが動作し、noscriptタグに書かれてある内容は表示されません。

ただし、ブラウザでソースを見るなどをするとnoscriptタグの内容は見ることが出来ます。

noscriptタグは、bodyタグ内に記述する

noscriptタグは、基本的にはbodyタグ内に記述します。

JavaScriptタグが無効となっている場合に表示されるだけです。下記のように、違うスクリプトを読むようにしようとしても、スクリプト自体が動作しないので意味がありません。

MEMO
noscriptタグはbodyタグ内に記述する

noscriptタグの内容は検索エンジンは無視する

noscripttag02

noscriptタグの内容は検索エンジンは無視します

Googleは以前からnoscriptタグ内のコンテンツを無視するようにしているようです

検索エンジンが今ほど高機能でない時代には、検索キーワードを様々な方法でHTML内に記述する手法がありました。

noscriptタグの中身はユーザーには見えないが、検索エンジンには見えるという点を利用されてきたのでGoogle側が対応済みです。

むしろ、キーワードを列挙した意味のない文章である場合、価値あるWebページではないというマイナス評価もありうるのですが、詳細は公表していないためわかりません。

例外として画像タグは検索エンジンがインデックスします

Webページが画像を読み込む際の手法として、Lazy Loadという方法があります。

これは、Webページを最初に読みこむ際には画像をロードせずに、実際にスクロールして見える範囲に入る時に読み込む方法です。

これにより、Webサイトを最初に表示する速度が速くなり、ユーザーにとっては便利なことに当たります。

しかし、検索エンジンがWebページを評価する際にはスクロールなどはしないため、画像が無いことになってしまいます。

そこで、noscriptタグでその画像URLを記述しておくと、検索エンジンは画像があるという評価をします。

注意
将来的にはGoogleのエンジニアが必要なしと判断したら、読み込まなく可能性があります。

各種ブラウザでJavaScriptを無効にする設定

各種ブラウザは、デフォルトではJavaScriptが有効であるため無効の時の動作を確認するには下記のような手順でJavaScriptを無効にする必要があります。

Chrome

設定メニューから[設定]-[プライバシーとセキュリティのサイトの設定]-[コンテンツのJavaScript]にて許可のチェックを外す

Edge

設定メニューから[設定]-[Cookieとサイトのアクセス許可]-[JavaScript]にて許可のチェックを外す

Firefox

  1. ブラウザのアドレスバーで「about:config」と入力しEnterを押す。
  2. 危険を承知のうえで使用するボタンをクリック。
  3. javascript.enabledと入力する
  4. 右側のアイコンをクリックするとtrue/falseが入れ替わるのでfalseにする

Internet Explorer

インターネットオプションから[セキュリティ]-[レベルのカスタマイズ]-[スクリプト]-[アクティブスクリプト]の設定を、無効にする。

Opera

  1. Privacy and settingsをクリック
  2. プライバシーとセキュリティーでSite Settingsをクリック
  3. JavaScriptのAllowedを無効にする

Safari

設定メニューから[設定]-[Safari]-[詳細]を開きJavaScriptをオフにする。

まとめ

いかがでしたでしょうか。

noscriptタグを利用すると、JavaScriptが動作しないときにだけ表示させる内容を記述することが出来るようになります。

開発するWebページが、JavaScriptが動作する前提である場合などにはこのタグを使いユーザーにお知らせしてください。

この記事が参考になれば幸いです。