◀ 7.

HTML noscript要素 完全ガイド（JavaScript 無効時のフォールバック / SEO / 遅延画像との組み合わせ）

編集
この記事の要点
  • noscript 要素はJavaScript が無効、もしくは未対応のブラウザでのみ表示される代替コンテンツを定義する
  • 配置: head / body どちらにも置ける — head 内では link / style / meta のみ
  • SPA 時代の主要用途は SEO 補助 — クローラ向けの最低限のリンクや説明
  • 画像の遅延読み込みフォールバック: <noscript><img></noscript> で JS 無効環境にも対応
  • 近年の JavaScript 無効率は1% 未満だが、SEO / アクセシビリティ / セキュリティポリシー的に依然有用

noscript 要素とは

noscript 要素は、JavaScript が無効化されているか、もしくはブラウザが JavaScript をサポートしていないときだけ表示される代替コンテンツを記述するための要素です。

かつては「JavaScript を有効にしてください」と表示するための定番でしたが、現代では SEO / アクセシビリティ / 遅延読み込みのフォールバックなど、より洗練された用途で使われます。

基本構文

<script>
    document.write('<p>JavaScript で表示されたコンテンツ</p>');
</script>

<noscript>
    <p>このページは JavaScript を有効にするとより便利にご利用いただけます。</p>
</noscript>

配置できる場所

配置使えるコンテンツ
head 内link / style / meta のみ
body 内任意のフローコンテンツ (p / a / img など)
 
<head>
    <link rel="stylesheet" href="styles.css">
    <noscript>
        <link rel="stylesheet" href="no-js-fallback.css">
    </noscript>
</head>

主要な用途

1. ユーザーへの通知

古典的だがいまでも有効な用途。アプリ内蔵ブラウザや厳格なセキュリティ設定の環境で表示されます。

<noscript>
    <div class="alert">
        このサイトを正しく表示するには JavaScript を有効にしてください。
    </div>
</noscript>

2. SEO / クローラ向けの代替コンテンツ

SPA (React / Vue / Angular など) では JavaScript で描画するため、クローラに本文を渡せないケースがあります。最低限のリンクや要約を noscript に書いておくと SEO 補助になります。

<div id="app"></div>
<script src="app.js"></script>

<noscript>
    <h1>サイトタイトル</h1>
    <p>このサイトは JavaScript で動作しています。
       JavaScript なしでも以下のページから情報を取得できます。</p>
    <ul>
        <li><a href="/articles">記事一覧</a></li>
        <li><a href="/about">運営者情報</a></li>
        <li><a href="/contact">お問い合わせ</a></li>
    </ul>
</noscript>

3. 画像の遅延読み込みフォールバック

JS で画像を遅延読み込みする実装では、JS 無効環境で画像が表示されなくなります。noscript に通常の img を入れて回避。

<!-- 遅延読み込みする画像 -->
<img class="lazy" data-src="/photo.jpg" alt="写真">

<!-- JS 無効時のフォールバック -->
<noscript>
    <img src="/photo.jpg" alt="写真">
</noscript>

近年はネイティブの loading="lazy" 属性が普及したため、この用途は減少傾向。

4. アクセス解析のフォールバック

Google Analytics や類似のアクセス解析は JS で動くため、JS 無効環境のアクセスを記録できません。noscript 内に画像ピクセルを入れて代替計測。

<noscript>
    <img src="/track.gif?nojs=1" alt="" style="display:none">
</noscript>

注意点

注意内容
判定基準「JS 無効」だけでなく「JS 未サポート」も対象。ただし現代ブラウザでは未サポートは稀
同時表示はされないscript と noscript はどちらか一方のみ実行される
head 内の制約head 内では link / style / meta 以外を入れるとパースエラー
SEO クローラGooglebot は JS を実行するので noscript 内容は補助的な扱い

CSS で「JS 無効」を表現する別の方法

html 要素に no-js クラスを初期付与しておき、JS が動いたら js に置き換えるパターンも一般的です。

<html class="no-js">
<head>
    <script>
        document.documentElement.classList.remove('no-js');
        document.documentElement.classList.add('js');
    </script>
</head>
<body>
    <p class="show-no-js">JS が無効です</p>
    <p class="show-js">JS が有効です</p>
</body>
</html>
.show-js,
.show-no-js          { display: none; }
.js .show-js         { display: block; }
.no-js .show-no-js   { display: block; }

FAQ

Q: 現代において noscript は必要？
A: JS 無効率は 1% 未満だが、セキュリティ上 JS を切っているユーザー (NoScript 拡張機能利用者など)、クローラ / 旧端末のために、最低限の情報を提供する価値はある。

Q: <noscript> 内に script を入れていい？
A: 仕様上は body 内ならフローコンテンツが入るので問題ないが、意味的に矛盾するので避ける。

Q: SPA のクローリング対策には十分？
A: 不十分。noscript は補助。SSR (Server Side Rendering) / SSG (Static Site Generation) / 動的レンダリングなどを併用すべき。

関連要素

  • script — JavaScript の埋め込み
  • template — JS で複製する HTML 雛形
  • iframe — 別文書の埋め込み
編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. figure要素
  2. template要素
  3. figcaption要素で図に説明を付ける
  4. canvas要素
  5. iframe要素
  6. script要素
  7. noscript要素
2026-06-11 07:07:02 guest 189

人気ページ

最近更新/作成されたページ