<noscript>

対応:		HTML 4（1997）

『noscript』はJavaScriptが無効または非対応のブラウザに対して、代替コンテンツを表示するための要素です。

構文

<!-- head内に記述する場合（link / style / meta のみ使用可） -->
<head>
  <noscript>
    <link rel="stylesheet" href="no-js.css">
  </noscript>
</head>

<!-- body内に記述する場合（任意のHTML要素を使用可） -->
<body>
  <noscript>
    <p>このページを正しく表示するには、JavaScriptを有効にしてください。</p>
  </noscript>
</body>

使用できる場所

配置場所	概要
head内	子要素として『link』・『style』・『meta』のみ使用できます。スクリプトが無効な場合にのみ適用されるCSSなどを指定します。
body内	任意のHTML要素を記述できます。スクリプトが無効な場合に表示するメッセージや代替コンテンツを記述します。

サンプルコード

sample_noscript.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>noscriptサンプル</title>

  <!-- JSが無効な場合にのみ読み込まれるCSS -->
  <noscript>
    <style>
      .js-only { display: none; }
      .no-js-message { display: block; }
    </style>
  </noscript>
</head>
<body>

  <!-- JavaScriptが有効な場合に表示する要素 -->
  <div class="js-only">
    <button id="loadBtn">コンテンツを読み込む</button>
    <div id="content"></div>
  </div>

  <!-- JavaScriptが無効な場合のフォールバック -->
  <noscript>
    <div class="no-js-message">
      <p>このページはJavaScriptを使用しています。</p>
      <p>ブラウザの設定でJavaScriptを有効にしてから再度お試しください。</p>
    </div>
  </noscript>

  <script>
    document.getElementById("loadBtn").addEventListener("click", function() {
      document.getElementById("content").textContent = "読み込みました！";
    });
  </script>

</body>
</html>

実行結果

JavaScriptが有効な場合はボタンが表示され、クリックするとテキストが現れます。JavaScriptが無効な場合はボタンの代わりにメッセージが表示されます。

サンプルページはこちら

概要

現代のブラウザはほぼすべてJavaScriptに対応していますが、ユーザーがセキュリティ上の理由でJavaScriptを無効にしていたり、古いブラウザを使用している場合があります。『noscript』を活用すると、そのような環境でも最低限のコンテンツを提供できます。

Googleなどの検索エンジンのクローラーもJavaScriptを完全には実行しないことがあります。重要なコンテンツをJavaScriptのみで表示している場合、SEO（検索エンジン最適化）に影響することがあります。重要なコンテンツはJavaScriptに依存せず、HTMLとして提供することを推奨します。

『noscript』は『script』要素とセットで考えるとわかりやすいです。『script』で動的な機能を提供しつつ、『noscript』でその機能が使えない環境へのフォールバックを用意するという設計が理想的です。

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

3 以降 ○

2 以前 ×

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 以降 ○

14 以前 ×

モバイル

iOS Safari

2 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

実践的な使い方

『<noscript>』の現代的な主な用途は次の3つです。

用途	説明
アクセシビリティ・SEO対策	SPAや動的コンテンツのフォールバックとして静的コンテンツを提供し、クローラーが読めるようにする
ユーザーへの警告	JavaScriptが必須のアプリでJS無効ユーザーに「JSを有効にしてください」と案内する
プログレッシブエンハンスメント	JavaScriptなしでも基本機能が動作するよう設計し、JS有効時に機能を強化するアーキテクチャ

<!-- SPAのフォールバック: JS無効でも基本情報を表示 -->
<div id="app"></div>
<noscript>
  <div class="no-js-warning">
    <h2>JavaScriptが無効になっています</h2>
    <p>このサイトを正しく利用するには、JavaScriptを有効にしてください。</p>
    <p>JavaScriptを有効にする方法:
      <a href="https://www.enable-javascript.com/ja/" target="_blank" rel="noopener">こちらをご覧ください</a>
    </p>
  </div>
</noscript>

<!-- Google Analytics などのトラッキング用noscript（headの外） -->
<noscript>
  <img height="1" width="1" style="display:none" alt=""
    src="https://www.example.com/track?noscript=1">
</noscript>

現代のウェブでJavaScriptを完全に無効にしているユーザーは非常に少ないですが、企業ネットワーク・ブラウザ拡張によるJSブロック・SEOクローラーなどのケースがあるため、重要なコンテンツはJSに依存しない形で提供することが推奨されます。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典