brタグのSEO効果とは？HTMLで適切に改行する方法を解説

brタグは、HTMLにおいてテキストの改行箇所に打つタグです。ユーザーが見やすいコンテンツを作成するには、適切な改行がポイントです。

本記事では、brタグの役割や注意点、SEO効果への影響などを解説します。

ユーザビリティの高いコンテンツを作成したい方は、ぜひ参考にしてみてください。

brタグはSEO対策に有効なのか

HTMLタグを適切に使用したコーディングは、SEO対策にも効果的といわれています。検索エンジンは、HTMLでコンテンツの内容を判断するためです。

しかし、brタグ自体にサイトのSEO評価を高める効果はありません。

とはいえ、ユーザー目線で読みやすく、HTMLタグが適切に使用されているコンテンツは検索エンジンからの評価が高まります。

適度に改行があることで文章にメリハリが生まれ、熟読率が向上します。ユーザー目線を意識してコンテンツを見やすく整えることが、SEOにプラスの影響をもたらします。

brタグの役割

brタグ（<br>）はBreakの略で改行タグとも呼ばれ、コンテンツの文章や画像をブラウザ上で改行したいときに使用します。

例えば、以下のようなときに使うことが多いです。

• 長い文章をひと区切りしたいとき
• 句点で区切るとき
• 会話文を入れるとき
• 入力フォームなどの短いテキスト（名前、住所、電話番号など）

なお、一般的な改行方法であるEnterキーで改行してもHTMLコードの中では反映されず、ブラウザ上では半角スペースで反映されます。

brタグ使用の注意点

ここでは、brタグを使用する際の注意点を2つ解説します。

• 空白行の挿入に使わない
• 連続での多用は非推奨

それぞれ、参考にしてください。

空白行の挿入に使わない

画像と文章の間に空白行を挿入する際、brタグを使用する方もいるのではないでしょうか。例えば、以下のような形です。

brタグはあくまで改行目的のタグであり、空白行を入れる目的の使用は想定されていません。

GoogleのクローラーはHTMLの内容でサイトの見やすさを判断するため、正しい用途で使用しなければ改行の意図が理解できません。

そのため、検索エンジンから設計が不十分なサイトだと認識されたり、ブラウザや端末によっては行間が変わったりする恐れがあります。

連続での多用は非推奨

brタグを使いすぎると、スマートフォンでは見づらくなることがあります。例えば、以下のようにbrタグを打ったとします。

上記をスマートフォンで閲覧すると、以下のように表示される可能性があります。

行頭ですぐにまた改行され、不自然に見えます。端末によって一行におさまる文字数が違うため、端末ごとの見え方には注意が必要です。

br以外の改行できるHTMLタグ

ここでは、br以外の改行できるタグを3つ紹介します。どのタグも用途に合わせて使用することでユーザー・検索エンジンの双方にとってわかりやすい文章となります。

• pタグ
• preタグ
• <br />タグ

中には使用を推奨しないものもありますので、それぞれ詳しく見ていきましょう。

pタグ

pタグ（<p></p>）とはParagraphの略で、段落や文章のひとまとまりで区切るときに使用します。

例えば、話題や時間軸が変わるとき、文章同士の関連性が薄いときなどです。

pタグで囲んだ要素は画面幅に合わせて改行されます。そのため、区切りがいい箇所とまではいかなくても、どのような画面幅の端末で見てもbrタグで強制改行するよりは見やすくなります。

文章のまとまりごとに改行したい場合はpタグを使用するのがおすすめです。

preタグ

preタグ（<pre></pre>）とはpreformatted textの略で、整形済みテキストという意味です。

タグで囲んだ要素内の改行や半角、全角のスペースがそのまま反映され、HTMLコードと同じブラウザ表示になります。

しかし、スマートフォンなどの狭い画面幅で見るとpreタグ内の要素は自動で改行されず、テキストが中途半端に途切れてしまいます。

また、preタグ内の要素には自動で等幅フォントが適用されるため、他のテキストと異なるフォントになるのです。

<br />タグ

<br />は古いHTML仕様の「XHTMl1.0」「XHTML1.1」などで使用されていた改行タグです。

2021年からは「HTML Living Standard」が標準仕様となっており、<br>の使用が推奨されています。

brタグで改行されない原因と対処法

brタグを打っても改行が反映されない場合は、以下のケースが当てはまるかもしれません。

• スペルミス
• brタグと別にCSSで改行ルールが定義されている

まずはスペルミスをしていないかを確認。スペルミスでない場合は、CSSファイルで改行ルールが定義されていないか見てみましょう。

CSSには改行やスペースの設定をする「white-space」プロパティや、禁則処理のルールを設定する「line-break」プロパティがあります。

こうしたプロパティによってbrタグが反映されない場合もあります。

brタグを効果的に使用して見やすいサイトを作ろう

brタグは使用頻度が高い改行タグですが、適切なタイミングで使用しないと端末によっては見づらくなりユーザーの離脱を招く可能性があります。

段落や文章のひとまとまりで改行する場合はpタグを使うなど、用途によって使い分けましょう。

弊社のSEOサービス「ランクエスト」では、お客様ごとに専任のコンサルタントがつき、戦略立案からコンテンツ制作、効果測定まで、すべて対応いたします。SEO対策にお悩みの方は、お気軽にご相談ください。

磯崎慎平

株式会社eclore　Web Director / Marketing Director
デザイン専門学校を卒業後、2012年に入社。Web領域を中心に、コーポレートや採用サイト、メディアサイトなどのデザイン、コーディング業務に従事。また、リスティングを中心とした広告運用も担当。SEO・広告の観点で優位性のあるWeb制作を得意としています。Web制作数 年間100以上 / 広告運用額 年間2億円以上。