brタグは、HTMLにおいてテキストの改行箇所に打つタグです。ユーザーが見やすいコンテンツを作成するには、適切な改行がポイントです。
本記事では、brタグの役割や注意点、SEO効果への影響などを解説します。
ユーザビリティの高いコンテンツを作成したい方は、ぜひ参考にしてみてください。
＜SEO対策について詳しく知りたい方はこちら＞SEO対策とは？SEO対策のメリット・デメリットと対策方法を詳しく解説
目次
brタグはSEO対策に有効なのか
HTMLタグを適切に使用したコーディングは、SEO対策にも効果的といわれています。検索エンジンは、HTMLでコンテンツの内容を判断するためです。
しかし、brタグ自体にサイトのSEO評価を高める効果はありません。
とはいえ、ユーザー目線で読みやすく、HTMLタグが適切に使用されているコンテンツは検索エンジンからの評価が高まります。
適度に改行があることで文章にメリハリが生まれ、熟読率が向上します。ユーザー目線を意識してコンテンツを見やすく整えることが、SEOにプラスの影響をもたらします。
brタグの役割
brタグ（<br>）はBreakの略で改行タグとも呼ばれ、コンテンツの文章や画像をブラウザ上で改行したいときに使用します。
例えば、以下のようなときに使うことが多いです。
- 長い文章をひと区切りしたいとき
- 句点で区切るとき
- 会話文を入れるとき
- 入力フォームなどの短いテキスト（名前、住所、電話番号など）
なお、一般的な改行方法であるEnterキーで改行してもHTMLコードの中では反映されず、ブラウザ上では半角スペースで反映されます。
関連記事：SEO対策に有効なコーディングとは？HTMLタグの書き方も解説
brタグ使用の注意点
ここでは、brタグを使用する際の注意点を2つ解説します。
- 空白行の挿入に使わない
- 連続での多用は非推奨
それぞれ、参考にしてください。
空白行の挿入に使わない
画像と文章の間に空白行を挿入する際、brタグを使用する方もいるのではないでしょうか。例えば、以下のような形です。
|
検索上位を狙うSEO対策には、内部対策と外部対策があります。<br> |
brタグはあくまで改行目的のタグであり、空白行を入れる目的の使用は想定されていません。
GoogleのクローラーはHTMLの内容でサイトの見やすさを判断するため、正しい用途で使用しなければ改行の意図が理解できません。
そのため、検索エンジンから設計が不十分なサイトだと認識されたり、ブラウザや端末によっては行間が変わったりする恐れがあります。
関連記事：クローラー（Crawler）とは？上位化のための対策を紹介
連続での多用は非推奨
brタグを使いすぎると、スマートフォンでは見づらくなることがあります。例えば、以下のようにbrタグを打ったとします。
|
SEO対策には、2種類の対策があります。<br> |
上記をスマートフォンで閲覧すると、以下のように表示される可能性があります。
|
SEO対策には、2種類の対策があります。 |
行頭ですぐにまた改行され、不自然に見えます。端末によって一行におさまる文字数が違うため、端末ごとの見え方には注意が必要です。
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億円以上。
