NoteStack

This page is a beginner-friendly note that clarifies a surprisingly tricky point: meta descriptions are plain text, so HTML tags don’t “work” there. If you still want to show a tag name like <br> as a literal string, you must escape it correctly.

「あれ、効かない…?」メタディスクリプションに<br>を書きたいときの正しい書き方

メタディスクリプション(<meta name="description">)に、うっかり <br> を書いてしまったことがあります。

「改行したい」と思って書いたのに、検索結果では改行されない。しかも、記事の内容(本文)を説明したいだけなのに、タグが混ざっていると気持ち悪い。

さらにややこしいのが、「改行したい」ではなく「<br> というタグ名を、文字として見せたい」場合です。HTMLの学習メモでは、タグ名そのものを例として載せたくなりますよね。

このページは、そのときに迷いやすい <br>&lt;br&gt; のどっちが正しい? を、初心者向けに、判断の理由ごと整理したメモです。

このページのゴール
このページでは“まだ深入りしないこと”

先に結論:<br> ではなく &lt;br&gt;

メタディスクリプションの content は、HTMLとして解釈される場所ではありません。ただの文字列です。

だから、タグを「タグとして効かせる」ことはできません。逆に、タグ名を「文字として見せたい」なら、HTMLの特殊文字としてエスケープします。

迷ったときの判断
  • 改行したい → そもそもメタディスクリプションで改行はできない(<br> でも無理)
  • <br> という文字を見せたい&lt;br&gt; を書く

なぜ <br> は「正しくない」扱いになるの?

まず、メタディスクリプションは、HTML本文とは別物です。

HTML本文はブラウザが「タグ」として解釈しますが、メタディスクリプションは検索エンジン等が文章(テキスト)として読み取ります。

起きやすい誤解
  • 本文で <br> は改行できる → だからメタディスクリプションでも改行できるはず
  • タグだから目立つ(<strong> など) → メタディスクリプションでも強調できるはず

でも、メタディスクリプションの content は「HTMLを組み立てる場所」ではないので、タグとしては効きません

さらに、「効かない」だけならまだしも、クローラや表示側の都合で、タグっぽい文字列が混ざると扱いが不安定になることがあります。

「タグ名を文字として見せたい」なら、エスケープする

ここが本題です。

メタディスクリプション内で <br> を「文字列」として入れたいなら、記号の意味を変えるためにエスケープします。

エスケープの意味(やさしい説明)

<> は、HTMLでは「タグの開始/終了」に見えてしまいます。

なので、文章として扱いたいときは、&lt;(小なり)と &gt;(大なり)に置き換えます。

エスケープの意味(正確な説明)
  • &lt; は「<」という文字そのものを表すHTMLエンティティ
  • &gt; は「>」という文字そのものを表すHTMLエンティティ
  • よって &lt;br&gt; は「<br>」という文字列になる

コピペ用:正しい書き方 / 間違いやすい書き方

やりたいこと:タグ名 <br> を文字として入れたい

こう書けばOK(推奨)

<meta name="description" content="改行タグは &lt;br&gt; を使います">
結果としてどう見える?

表示やクローラの読み取り上は、文章の中に <br> という文字が含まれている状態になります。

ただし、検索結果で必ずその通りに見えるかは状況次第です(本文が採用される場合もあります)。

これは避ける(非推奨)

<meta name="description" content="改行タグは <br> を使います">
なぜ避ける?
  • 「タグっぽい文字列」が混ざり、読み取り側で意図しない解釈や加工が起きる可能性がある
  • 改行目的なら、そもそもメタディスクリプションで改行はできない
  • 文字列として見せたいなら、エスケープして意図を固定した方が安全

&lt;br&gt;」をさらにエスケープしたくなる問題

学習メモを書いていると、次のように「エスケープ文字列そのもの」を見せたくなることがあります。

見せたいもの
  • &lt;br&gt;(エスケープ済みの表現そのもの)

この場合は、さらに & をエスケープして &amp;lt; の形にします。

こう書けばOK(「&lt;」という文字列を見せたいとき)

<meta name="description" content="文字として書くなら &amp;lt;br&amp;gt; と書きます">
ひとこと注意

メタディスクリプションは「検索結果に出るかもしれない文章」なので、記号が多いと読みづらくなることがあります。
“見せたい理由があるときだけ”使うのが安全です。

実務メモ:メタディスクリプションでやると事故りやすいこと

事故1:改行したくて <br> を書く

改行はできません。文章として、読点・中黒・「—」などで区切るのが現実的です。

事故2:強調したくて <strong> を書く

強調は効きません。強調したいなら「言い切り」「具体語」「先頭に置く」など文章で勝負します。

事故3:記号が多くなり、文章が読みにくくなる

検索結果の一瞬で伝える用途なので、基本は普通の文章を優先。タグ名は最小限が安心です。

動作チェック(手元で確認できる範囲)

検索結果の見え方は環境やタイミングで変わるので、まずは「HTMLとして正しく書けているか」を確認します。

チェック1:HTMLバリデータでエラーが出ない

メタディスクリプションはタグではなく属性値なので、<> を直接書くと、文法として不安定になりがちです。

チェック2:ページのソースで content="...&lt;br&gt;..." になっている

ブラウザの「ページのソースを表示」で確認できます。

チェック3:メタディスクリプションを“本文の要約”として読んで違和感がない

記号が多すぎると、要約としての読みやすさが落ちやすいので、文章として自然かを最後に見直します。

よくある質問(FAQ)

Q. <br> を書いたら絶対にダメですか?

A. “目的”によります。改行目的なら意味がないので避けます。タグ名を文字として見せたいなら、&lt;br&gt; にして意図を固定する方が安全です。

Q. じゃあ、メタディスクリプションは何のために書くんですか?

A. 検索結果や共有カードで「どんなページか」を短く伝えるための“文章”です。装飾ではなく、内容の分かりやすさが主役になります。

Q. 検索結果に必ずメタディスクリプションが出ますか?

A. 必ずではありません。検索語句やページ内容によって、本文の一部が採用されることもあります。だからこそ、本文と矛盾しない、自然な要約として書くのが安全です。

Q. &lt;br&gt; が検索結果で <br> にならず、変に見えることはありますか?

A. あり得ます(表示側の都合)。ただ、<br> を直接書くよりは、意図を明確にできる分だけ事故りにくいです。気になるなら、タグ名は本文側(例:見出し直下の説明)に寄せるのも手です。

抜けチェック(公開前の最終確認)