タイトル: コメント
SEOタイトル: HTML コメントの書き方（<!-- --> / 入れ子の罠 / 条件付きコメント / SEO への影響 / セキュリティ）
| この記事の要点 |
|
HTML コメントとは
コメントは HTML ソース上のメモ書きで、ブラウザの表示には現れません。<!-- で始まり、--> で終わります。コード内の説明や、一時的に無効化したい部分を残しておくのに使います。
基本構文
<!-- これは 1 行のコメント -->
<!--
複数行のコメントもOK。
ブラウザ上には表示されません。
-->
<p>本文</p>
<!-- TODO: 後でリンクを直す -->
<a href="#">テキスト</a>ブラウザでの扱い
| 場所 | コメントは見えるか |
|---|---|
| ブラウザの描画画面 | 見えない |
| 「ページのソースを表示」（Ctrl+U） | 見える |
| デベロッパーツールの Elements パネル | 見える |
| 検索エンジンのインデックス | クロールされるが、ランキング要素にはほぼ無関係 |
重要: コメントはユーザーに見える可能性があるため、API キー / パスワード / 内部 URL などを書いてはいけません。よく <!-- TODO: パスワードを後で本番のものに差し替え --> のような書き方で漏洩する事例があります。
入れ子の罠 — HTML コメントは入れ子にできない
HTML のコメントは入れ子にできません。コメント内に -- が含まれるとそこで終端と見なされ、表示が崩れます。
<!-- 外側のコメント
<!-- 内側のコメント -->
ここ以降は意図せず本文扱いになる！
-->大きなブロックを一時的に無効化したいときは外側に <script type="text/x-suspend"> を巻くか、HTML を別ファイルに退避させるなど別の手段を使うのが安全です。
条件付きコメント（過去の話）
IE 10 までは条件付きコメントという独自仕様で、IE のバージョン別に HTML を切り替えられました。
<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" href="modern.css">
<!--<![endif]-->これは IE の独自拡張。IE 11 から条件付きコメントは廃止され、現在は IE 自体がサポート切れのため、ほぼレガシーコードでしか見ない記法になりました。新規コードでは使う必要はありません。
SEO とコメント
検索エンジンはコメント内のテキストをランキング要素として扱いません。ただしクローラーはコメントを読み取ってログに残すため、内部システムの URL や開発メモが漏洩しないようにしましょう。本番デプロイ時に minify ツール（HTMLMinifier 等）でコメントを除去するのがプロフェッショナルな実装パターンです。
JavaScript / CSS のコメントとの違い
| 言語 | 1 行コメント | 複数行コメント |
|---|---|---|
| HTML | なし | <!-- ... --> |
| CSS | なし | /* ... */ |
| JavaScript | // ... | /* ... */ |
<style> や <script> タグの内部では、その言語のコメント記法を使うのが正しい書き方です。
<style>
/* CSS のコメントはここ */
.x { color: red; }
</style>
<script>
// JS の 1 行コメント
/* JS の複数行コメント */
console.log('hi');
</script>実践: ブロックの無効化
テスト中に一部のマークアップを一時的に消したい場合、コメントで囲むのが手軽です。
<!--
<div class="banner">
<p>キャンペーン中！</p>
</div>
-->ただしコメント化したコードを長期間残すのはアンチパターン。Git で履歴管理してから消す方が、ソース全体が読みやすくなります。
セキュリティに関する注意点
HTML コメントはブラウザ画面に出ないだけで、HTTP レスポンスには含まれて送信されている点が見落とされがちです。実際に過去に発生した情報漏洩事例:
- 本番デプロイ時にデバッグ用 API キーをコメントに残したまま公開してしまい、悪用された
- 「TODO: 後で本番DBに繋ぐ」のコメントから内部 DB ホスト名が漏洩
- 古いプロモーションコードをコメントアウトして残していたら、ソース表示で発見されて利用された
これらを防ぐためにも、本番ビルドではコメントを minify ツールで除去するのが標準的な運用です。Webpack / Vite / Next.js などのモダンビルドツールは既定でコメント除去が有効になっていることが多いですが、サーバサイドレンダリングの HTML 文字列内のコメントは別途対応が必要です。
テンプレートエンジンのコメントとの違い
EJS / Blade / Twig などのテンプレートエンジンには、サーバ側でのみ消えるコメントがあります。これらは出力 HTML にも残らないため、機密情報を書いても漏洩しません（ただしソースコードに残ることは要注意）。
{# Twig: 出力されないコメント。安全 #}
<!-- HTML コメント: ブラウザのソースに残る -->FAQ
Q: コメントの中に HTML タグを書ける？
A: 書けます。タグはコメント内では単なるテキストとして扱われます。ただし -- が含まれているとそこで終端扱いになる点に注意。
Q: コメントは何文字まで書ける？
A: HTML 仕様には文字数制限はありません。ただしファイルサイズが増えてダウンロードが遅くなるので、本番では minify するべきです。
Q: ブラウザに表示しないだけで通信されるのでは？
A: その通りです。コメントもサーバから送信される HTML の一部。「画面に出ないから安心」ではなく、ソースは誰でも見られる前提で書きましょう。
関連
- HTML — ハイパーテキストマークアップ言語
- DOCTYPE 宣言 — ドキュメントタイプの宣言
- script 要素 — JavaScript を埋め込む
- style 要素 — CSS を埋め込む
- HTML minify — コメントや空白を削減して軽量化