SEO
更新日: 2024/2/1
pタグとは?brタグとの違いと書き方、活用方法を解説!
よし、できた!
イエローちゃん、何してるの?
あっ、ブルーちゃん!実は今、私のブログの記事を書いてるところだったんだ
せっかくだからちょっと読んでみて!
どれどれ……
……うーん、もっとpタグを有効活用した方がいいんじゃないかな?
pタグって?
よし、じゃあ今日はpタグの役割や使い方、SEOへの影響について解説していくね!
pタグとは?
pタグとは、「段落」を指定するために用いられるHTMLタグのことだよ
「p」は英語で段落を意味するParagraphの頭文字から取られているんだ
pタグを適切に使いこなすことで、ユーザーにとってより読みやすくわかりやすいコンテンツを作成することができるよ
pタグの使い方は?
pタグは、文章の段落などの、ひとまとまりにしたいテキストを囲む形で使用するよ
<p>これは第一段落のテキストです。</p>
<p>これは第二段落のテキストです。</p>
こうやって記載すれば、自動的にテキストを段落分けして、前後に改行を加えた形で表示してくれるんだ
pタグとbrタグの違いって?
pタグとよく似たHTMLタグに、改行をしたい時に使うbrタグがあるんだ
「br」は英語で改行を意味する「Line break」の「break」から取られているよ
どちらも改行を行うタグだけど、brタグはpタグとは違ってテキストを囲んだりはしないで、改行したい位置に単独で記載するんだ
これは一行目のテキストです。<br>
これは二行目のテキストです。
pタグは文章のまとまりを作るタグ、brタグは文章の途中で改行したい時に使うタグで、それぞれ異なった役割があるよ
pタグとbrタグ、どちらを使うべき?
さっきイエローちゃんが書いていたブログは、改行にbrタグを使っていたよね?
うん、brタグは改行したい部分に って書くだけで簡単だから、そうしてたけど……
実は、改行をする時はできるだけbrタグではなくpタグを使うべきと言われているんだ
それに、むやみにbrタグを多用することはより良いサイトを作る上であまりオススメできないよ
そうなの? pタグとbrタグで見た目はそんなに変わらなそうだし、改行をいっぱいした方が読みやすい文書になりそうだけど……
じゃあ、ここからはbrタグを多用すべきではない理由を説明していくね
brタグを多用すべきでない理由1:SEO評価に悪影響がある
実は、brタグはHTMLの構造上非推奨とされているタグなんだ
だから、あまりに多用しすぎたり、行間を作るために連続で記載したりすると、SEO評価が下がってしまう恐れがあるよ
SEOを重視したサイトでは、どうしても文章の途中で改行したい場合以外はなるべくbrタグを使わない方が賢明だよ
brタグを多用すべきでない理由2:PC・スマホで見た目が変わってしまう
brタグを使った改行が多すぎると、PCで確認した時は見栄えが良くても、スマホでは読みづらいテキストになってしまう可能性があるよ
PCとスマホでは画面の横幅の関係上、一行の文字数に違いがあるから、PCでの表示に合わせて頻繁に改行をすると、スマホで表示した時にはガタガタの見た目になってしまうことがあるんだ
スマホでインターネットを見る人はこれからもどんどん増えていくだろうから、あらゆる端末で不便なくテキストを読めるように、改行は最低限に抑えたほうがよりユーザーに優しいサイトになるよ
pタグを使った読みやすいテキストの書き方を解説!
ここまで説明してきたことを踏まえて、イエローちゃんが書いていたブログのコードを見てみよう
こんにちは、イエローです!<br>
<br>
私は今、マーケティングを勉強しています。<br>
特に、インフルエンサーマーケティングやSNSマーケティングに関心があります。<br>
<br>
よろしくお願いします!
確かに、体裁を整えるために連続でbrタグを使ったり、短い一文ごとにbrタグを使ったりしているところが気になるね
その通り!だから、このように修正すると良いよ
<p>こんにちは、イエローです!</p>
<p>私は今、マーケティングを勉強しています。特に、インフルエンサーマーケティングやSNSマーケティングに関心があります。</p>
<p>よろしくお願いします!</p>
わあ!凄くスッキリしたブログになったね!
pタグについて、今日話した重要なポイントをまとめるね
まとめ
◆pタグは段落を作るためのタグ
◆強制的に改行したい時に使うbrタグとは役割が異なる
◆SEO対策やより良いユーザー体験のために、brタグは多用せずpタグを使った方が良い
pタグについて、よくわかったかな?
うん、バッチリだよ!ありがとうブルーちゃん!
また困ったことがあったら気軽に聞いてね〜
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。
最新の記事一覧
音声検索最適化(VSO)とは?具体的なやり方を徹底解説
SEO
校閲とは?校正との違いとチェックする項目や注意するべき項目を解説
SEO
バーティカル検索とは?基本からSEO対策まで徹底解説!
SEO
X(旧Twitter)はSEOに影響を与えるの?運用のコツも解説
SEO
コピペチェックとは?おすすめのツールや引用との違いを紹介
SEO
メディアとは何か?3種類のメディアと役割、そして未来を解説!
SEO
検索上位を目指すためにすることは?基本的で重要な施策を10個紹介
SEO
スラッグとは?最適化により得られる効果と設定方法を解説!
SEO
セグメントの意味と種類を徹底解説!3つの注意点も紹介
SEO
キーワードリサーチとは?おすすめツール5選や注意点を紹介
SEO
セグメンテーションとは?ターゲティングとの違いと有名企業の成功例
SEO
最新の記事一覧
音声検索最適化(VSO)とは?具体的なやり方を徹底解説
SEO
校閲とは?校正との違いとチェックする項目や注意するべき項目を解説
SEO
バーティカル検索とは?基本からSEO対策まで徹底解説!
SEO
X(旧Twitter)はSEOに影響を与えるの?運用のコツも解説
SEO
コピペチェックとは?おすすめのツールや引用との違いを紹介
SEO
メディアとは何か?3種類のメディアと役割、そして未来を解説!
SEO
検索上位を目指すためにすることは?基本的で重要な施策を10個紹介
SEO
スラッグとは?最適化により得られる効果と設定方法を解説!
SEO
セグメントの意味と種類を徹底解説!3つの注意点も紹介
SEO
キーワードリサーチとは?おすすめツール5選や注意点を紹介
SEO
セグメンテーションとは?ターゲティングとの違いと有名企業の成功例
SEO