みなさんが公開しているポートフォリオやWeb制作で取り組んでいるWebページは正しく改行できているでしょうか？
正しく改行を行わないとSEOにも不利になってしまうことがあります。
今回はHTMLで改行する際の方法をSEOの観点も考慮しながら、確認していきましょう。
どんな時に改行する？
まず、どんな時にみなさんはHTMLで改行するでしょうか？それらを振り返ってみましょう。どんな時に改行するのかを意識することで、SEOを意識したタグの使い方をすることにつながるでしょう。
段落と改行と見出しの違いを意識できてる？
まずは、日本語に置き換えて文章を改行するということを考え直してみましょう。
改行されている文章の特徴を思い出してみましょう。それは、その文章の見た目が空白の行によって区切られていることにあると思います。それがどのような意味合いを持った区切りであるかで段落と改行、見出しの3つに分けることができます。
段落のときはpタグ
段落は小説や物語など長い文章のまとまりを複数に分けたうちの1つのまとまりを指します。例えば、以下の文章だと、緑で囲まれた枠ごとに文章の場面が分かれています。
HTMLでは一つ一つの意味のある文章のまとまりを分ける際に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にも期待できるコーディングができるようになります。
