この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:4
ページ更新者:guest
更新日時:2026-06-11 07:07:02

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

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

noscript 要素とは

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

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

基本構文

配置できる場所

配置使えるコンテンツ
head 内link / style / meta のみ
body 内任意のフローコンテンツ (p / a / img など)

主要な用途

1. ユーザーへの通知

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

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

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

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

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


写真

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

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

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

注意点

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

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

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



    


    
JS が無効です

    
JS が有効です



.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:

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

関連要素

  • script — JavaScript の埋め込み
  • template — JS で複製する HTML 雛形
  • iframe — 別文書の埋め込み