コンテンツを作成するときに、必ず使用するpタグ
なんとなく使用している人が多くいますが、実はSEOにも影響するほど非常に重要なタグであることをご存知でしたか?
今回はpタグを使いこなしていただくために、pタグの概要から正しい使用方法まで徹底的に解説していきます。

pタグとは

Pの文字が入ったごみ箱
pタグとは、テキストの段落を指定するためのタグです。
”paragraph(段落)”を表しており、pタグで囲まれたテキストはひとつの段落であることを意味します。pタグを使うことでテキストが見やすくなり、行間の調整に有効的です。pタグの使用頻度は非常に高く、最も多く使われるタグではないでしょうか。
pタグの使用例を紹介します。

”今日は雨が降っていました。本当は外で野球をしたかったのですが、風邪を引いてしまうと思ったので、家で推理小説を2冊読みました。とても読みごたえがあり、面白かったです。明日の天気予報は晴れなので、友達と〇×公園で野球をしようと思います。とても楽しみです。”

上記の例文では、「今日の出来事」「明日の予定」の2つの段落に分かれますね。なので、”今日は雨が~面白かったです。”と”明日の天気~楽しみです。”をそれぞれpタグで囲むことで、下記のようなテキストに変わります。

“今日は雨が降っていました。本当は外で野球をしたかったのですが、風邪を引いてしまうと思ったので、家で推理小説を2冊読みました。とても読みごたえがあり、面白かったです。

明日の天気予報は晴れなので、友達と〇×公園で野球をしようと思います。とても楽しみです。”

段落に分けることで、文章が読みやすくなりましたね。ユーザーにとって読みやすいことがGoogleからの評価にもつながるので、pタグを正しく使いこなすことはSEOにとっても非常に重要です。

pタグとbrタグの違い

はてなが浮かぶ少年
pタグで「段落」をつけることでユーザーにとって読みやすい文章になることを説明しましたが、「改行」を表すbrタグとの使い分けができていない人が多数います。pタグとbrタグは同じような役割に思えますが実は全くの別物なので、良質なコンテンツを作成するためにも、ここでしっかりと覚えておきましょう。

段落と改行

pタグとbrタグを使い分ける上で理解しておきたいことは、そもそも段落と改行がどう違うかということ。

段落同じ内容の文章で区切ってまとめたもの
改行長い文章を区切って、意図的に行を変えること

段落は文章全体の中から内容で区切ることで、同じ内容の文章を1個のまとまりにします。そのため、異なる内容の文章(段落)との間には自然と改行が発生します。
対して改行は、同じ内容の文章でも長さによって読みにくいため、意図的に新しい行を加えます。

下の例文で、段落と改行の使い方を見てみましょう。

”今日、雨が降っていました。学校の同じクラスの友達5人と野球をする約束をしていましたが、雨で濡れて風邪を引いてしまうと困るので、急遽中止になってしまいました。やることがなくなってしまったので、家で推理小説を1冊読みました。普段から本はあまり読まない人間ですが、今日読んだ推理小説はとても読みごたえがあり、面白かったです。続編もあるそうなので、今度読んでみようと思います。明日の予定は特に決まっていませんでしたが、天気予報は晴れなので、友達に連絡して今日できなかった野球をしたいと思っています。”

この文章に「段落」を加えてみます。

”今日、雨が降っていました。学校の同じクラスの友達5人と野球をする約束をしていましたが、雨で濡れて風邪を引いてしまうと困るので、急遽中止になってしまいました。

やることがなくなってしまったので、家で推理小説を1冊読みました。普段から本はあまり読まない人間ですが、今日読んだ推理小説はとても読みごたえがあり、面白かったです。続編もあるそうなので、今度読んでみようと思います。

明日の予定は特に決まっていませんでしたが、天気予報は晴れなので、友達に連絡して今日できなかった野球をしたいと思っています。”

なかなか読みやすい文章になりましたね。この文章に、さらに「改行」を加えてみましょう。

”今日、雨が降っていました。
学校の同じクラスの友達5人と野球をする約束をしていましたが、
雨で濡れて風邪を引いてしまうと困るので、急遽中止になってしまいました。

やることがなくなってしまったので、家で推理小説を1冊読みました。
普段から本はあまり読まない人間ですが、今日読んだ推理小説はとても読みごたえがあり、面白かったです。
続編もあるそうなので、今度読んでみようと思います。

明日の予定は特に決まっていませんでしたが、天気予報は晴れなので、
友達に連絡して今日できなかった野球をしたいと思っています。”

さらに読みやすくなりましたね。文章を調整する際は、まずは段落に分ける。その後、文章が読みにくい場合は改行を加える。この流れで行いましょう。

brタグの多用はNG

brタグ(改行)の使い方について説明しましたが、実はHTMLの構造上brタグの使用はあまり推奨されておりません。その理由は、媒体事に横一列に表示できる文字数が違うことにあります。むやみにbrタグを使って改行してしまうと、パソコンでは読みやすくてもスマートフォンでは読みにくくなることがあります。読みにくい文章はユーザーの離脱にもつながりますので、なるべくbrタグは使用せずpタグでの調整をオススメします。

pタグの記述方法

光るキーボード
pタグの記述方法は非常に簡単です。ひとつの段落にしたい文章を、<p>と</p>で囲むことで段落ができます。また、pタグのデフォルトスタイルでは、上下に”margin”による余白が指定されています。なので実際にWebブラウザ上で見た場合に、段落間に余白ができます。

HTML
<p>ここに文章を書いてください。</p>
表示結果

ここに文章を書いてください。

pタグを使う際の注意点

「pタグを使って、余白を作ろう!」なんてことは、絶対にしないでください。たまに、下記のようにpタグを使用する方がいますが、Googleクローラーから空欄の段落があると捉えられて、低評価を受けるリスクがあります。

HTML
<p>ここに文章を書いてください。</p>
<p></p>
<p></p>
<p></p>
<p>ここに文章を書いてください。</p>

デザイン的に余白を追加したい場合は、CSSでの設定をおすすめします。下記をCSSに追加して、”em”の数値を自分好みになるように調整すればOKです。

CSS
p {
margin:0 0 3em;
}
※emとはCSSで使用される単位で、文字の高さを1emとしています。なので3emの場合は、段落テキストの下に2文字分の余白を指定していることになります。

WordPressで段落を挿入する方法

WordPressのビジュアルエディターの場合、pタグ(段落)とbrタグ(改行)は次の操作で記述できます。

段落:Enter
改行:Shift+Enter

よく”Enterで改行”だと思っている方がいますが、低品質なコンテンツと評価される可能性があるので間違わないように注意しましょう!

まとめ

ユーザーにとって読みやすい文章を作成するために、pタグを正しく活用することは必須です。このページで紹介したbrタグ(改行)との違いや、正しい記述方法をしっかりと理解するだけでも、あなたのコンテンツ今まで以上に良質なものになること間違いなしです。

ユーザーに愛されGoogleからも評価を受けるWebサイトを目指して、良質なコンテンツを作成しましょう!