SEOにも注意して!HTMLで改行を行う方法まとめ

HTML

みなさんが公開しているポートフォリオやWeb制作で取り組んでいるWebページは正しく改行できているでしょうか?

正しく改行を行わないとSEOにも不利になってしまうことがあります。

今回はHTMLで改行する際の方法をSEOの観点も考慮しながら、確認していきましょう。

どんな時に改行する?

まず、どんな時にみなさんはHTMLで改行するでしょうか?それらを振り返ってみましょう。どんな時に改行するのかを意識することで、SEOを意識したタグの使い方をすることにつながるでしょう。

段落と改行と見出しの違いを意識できてる?

まずは、日本語に置き換えて文章を改行するということを考え直してみましょう。

改行されている文章の特徴を思い出してみましょう。それは、その文章の見た目が空白の行によって区切られていることにあると思います。それがどのような意味合いを持った区切りであるかで段落と改行、見出しの3つに分けることができます。

段落のときはpタグ

段落は小説や物語など長い文章のまとまりを複数に分けたうちの1つのまとまりを指します。例えば、以下の文章だと、緑で囲まれた枠ごとに文章の場面が分かれています。

HTMLでは一つ一つの意味のある文章のまとまりを分ける際にpタグを用います。

pタグの用途を説明するための例文

また、pタグは意味のまとまりごとの初めと終わりをはっきりさせるため、開始タグと閉じタグで対象の文章のまとまりを囲みます。エディター上でエンターキーで入力した改行はブラウザ上で認識されない点も注意してください。

エディターでの表示とブラウザでの表示

改行のときはbrタグ

改行は長い文章を区切るときに用います。なぜ、改行をするかというと、読者が文章を読む際に視覚的に読みやすくしたり、読んでいる際の意味を取りやすくするためです。つまり、読者を意識した見た目の整備に利用されるのが改行です。HTMLでは改行をするときにbrタグを用います。下の画像は改行がない場合の表示です。改行がないと、文章が窮屈であったり、文字が坦々と並んでいるだけで読みづらい可能性があります。

改行がなくて読みづらい文章の例

一方、改行があると、下記のようにメリハリがあり、視覚的にも見やすい文章になると思います。文章が長ければ長いほど、この視認性は読者の読みやすさにもつながってくるので重要です。

改行があって読みやすい文章の例

また、brタグは文章をその前後で区切ることが目的であるため、空要素タグという内容を保たないタグで成立します。開始タグと閉じタグのセットにしなくて良いということです。

エディターでの表示とブラウザでの表示

見出しの時はhタグ

見出しは段落に書いてある内容を一言でまとめたタイトルのようなものです。これがあることでその文章ではどんな内容が記述されているのかということがわかるようになっています。新聞や雑誌、インターネットの記事では頻繁に利用されています。下記画像のように今までの文章に見出しを加えると、どのような内容がその段落で書かれているのかを記事内容を読まずとも、ざっくりと伝わってきます。HTMLでは見出しを利用するときにhタグを用います。

見出しタグの使用例

また、hタグはpタグと同様に開始タグと閉じタグで囲みます。見出しの大きさに合わせてh1~h6まで設定できます。この時、順番に1から設定していくことで検索エンジンも正しくページを理解してくれるので、SEO効果も期待できます。

エディターでの表示とブラウザでの表示

間違った改行の仕方

ここまで改行や段落、見出しの使い方を説明してきました。。しかし、改行や段落の余白を大きくしたい時もあるかもしれません。下記に述べる方法は余白を大きくする間違った方法ですので注意しましょう。

brタグの連続使用

改行の際に余白を大きくする際はbrタグを複数連続で使用することはできません。原則brタグは1回ずつ利用可能です。複数brタグを並べてしまうと、検索エンジンに正しくHTMLの情報が理解されないため、よろしくありません。また、レスポンシブデザインなどデバイスサイズでブラウザの表示が異なる時に修正や管理をするのが大変になってしまいます。

pタグの中身を空にして改行

 改行のためにpタグの中身を空にして利用するのもよくありません。これまで説明したように、pタグは意味のある文章のまとまりです。そのため、改行の際には前提としてbrタグを利用しなければなりません。文章が入ってない中身が空の状態でpタグを利用してしまうことは検索エンジンにとってはこの空のpタグに文章のまとまりがあると誤解を招くため、SEO的に不適切です。brタグと同じく、中身が空のpタグを連続で使用することもよくありません。

SEOを考慮した正しい改行の仕方

ではSEOにも適した正しい改行の仕方とはどのようなものでしょうか?それは日本語と同じく正しい文法でHTMLタグを利用することです。このことが一番大事で基本的なことになります。私たちが正しい文法の日本語の方が理解しやすいのと同様に、検索エンジンにとっても正しくHTMLタグを利用することがファイルの情報の理解につながります。そのため、正しくHTMLタグを利用することでSEO効果も期待することができます。

改行の余白を大きくするときはmarginを利用

正しくbrタグやpタグを使い分けできたとしたとしても、デザイン目的で余白を大きくしたいときはあると思います。その時、上記で述べたような間違った改行の仕方で改行の余白を大きくしてはいけません。このような時はCSSでmarginを利用します。余白を大きくしたい部分にクラスを付与して、そのクラスにmarginを適用することで余白を大きくしましょう。

<p>
  太郎くんはよく利用するWebサービスに感動して、<br>
  「僕もWebサイトを制作するエンジニアになりたい」<br class=”space”>
  と思いました。
</p>
.space {
  margin-bottom: 50px;
}

marginを利用することでSEOに適した改行を行いながら、デザインのために改行の余白を調整できます。デザインの担当はCSS、文章の担当はHTMLという風にコーディングする中でもしっかりプログラミング言語の文法に沿った使い分けができると自然とSEOにも期待できるコーディングができるようになります。

marginを使って余白を調整したブラウザでの表示
自力でWebサイト制作やWebアプリ開発ができるようになるスクール

「自力でプログラミングで何か作れるようになりたい!」「いつか、プログラミングを使って稼ぎたい!」

このように思っている方にぴったりなスクールが、COACHTECHです。

COACHTECHはフリーランス特化型のスクールで、自力でWebサイトの制作やWebアプリ開発ができる人材の育成に取り組んでいます。スクールの卒業生は現場では使えないと言われる中、COACHTECHではアウトプット中心の学習で、実践的なプログラミングスキルが身に付きます。

実際に、プログラミング未経験から案件を獲得できた方も多いです。

「プログラミング学習についてもっと知りたい!」「未経験でもちゃんとプログラミングスキルが身に付くのか不安」という方は、ぜひ無料カウンセリングにお越しください。

HTML
\ この記事をシェアする /
COACHTECH Lab.
タイトルとURLをコピーしました