検索エンジンに正しく伝えるために、段落分け<p>タグと改行<br />の乱用はやめよう初心者向け【SEOの基本】
ちょっと前に、ある方のつぶやきがきっかけで、私のブログどれも、<P>…</P>(段落)を多用しすぎであることに気づきまして。
いえ、あのね、気づいてたんですよ。笑
(言い訳かよ)
<P>…</P>(段落)と、<br/>(<br>)(改行)で意味が違うってことくらいは知っていたんです。
じゃあなぜこうなっている
(<P>…</P>(段落)や、<br/>(<br>)(改行)を多用してしまっている)
かといいますと、
私はもともと視力がかなり弱く、さらに加齢による老眼も同時に進行し、文字が詰まった文章を読むのが大変辛く感じているのですね。
(が、文章を読むのは大好き)
そんな理由で、どうしても文章入力をする際に、過剰に行間を開けたくなってしまう傾向といいますが、癖があります。
でも、文法上おかしなことをしているわけで、グーグルさんに好かれたいのでここはちゃんと訂正しておきたいですよね。(Googleさんの意向が全く分かっていなかったダメな私。)
というわけで、いろいろ調べてみたんですが、いまいちどうやったらこの問題が解決するのかわからなかったんです。
ところがさっき、とってもわかりやすいご説明をみつけたので、これはメモしておこうと思って記事にしました。(このブログはメモ帳か!)
最近、有名なElloraさん𝑬𝒍𝒍𝒐𝒓𝒂 (@uszero800) | Twitterのブログをたまに読ませていただいているのですが、Elloraさんのブログ記事がこのことにたいして大変詳しく説明くださっていたのですよ。
連続改行brはNG!?覚えておいて損はない改行と段落の使い分け方
もっと正確な記述をするなら、すべてにクラス名を割り当て、CSS は外部スタイルシートに記述します。
■CSSサンプル.mb1{
margin-bottom: 1em;
}
.mb2{
margin-bottom: 2em;
}
.mb5{
margin-bottom: 5em;
}
■HTMLサンプル
<p class="mb1">ここは普通の段落です。下の段落とは1行ぶん空きます。</p>
<p class="mb2">下の段落と2行ぶん空けてみます。</p>
<p class="mb5">下の段落と5行ぶん空けるとこうなります。</p>
<p>ちゃんと余白ができましたね。</p>
HTML は構造をあらわし、デザインは CSS で行う、というのが web の基本です。余白もデザインのひとつですから、CSS で調整するのが正しいわけですね。
正確性を求めるなら、HTML 内で <br>を 多用したり空の段落を複数挿入するのは避けましょう。
なるほど。こうすればよかったのか。
やってみよう。(このブログではないです笑)
で、この私のブログ、相変わらず<P>…</P>(段落)や、<br/>(<br>)(改行)を乱用しているので、アクセスアップを狙っているなら絶対真似しちゃだめだぞってことで。
一応この記事の一例を出しておきますね。
(はてなブログの方は、「記事を書く」のところの、「編集見たまま」画面で同じような文を打ってみて、「HTML編集」の方で確認してみてくださいね。)
<p>そんな理由で、どうしても文章入力をする際に、過剰に行間を開けたくなってしまう傾向といいますが、癖があります。<br /><br />でも、文法上おかしなことをしているわけで、グーグルさんに好かれたいのでここはちゃんと訂正しておきたいですよね。(Googleさんの意向が全く分かっていなかったダメな私。)<br /><br /></p>
上記の、<br /><br />が、やっちゃだめなヤツです。笑
最後にElloraさんの記事のまとめより。
改行と段落の使い分ける理由は、検索エンジンに記事の構造を正しく伝えるためです。もし SEO を意識しているなら覚えておきましょう。
無料ブログでも WordPress でも、あるいは一般サイトでも当てはまりますが、SEO 施策がされているテンプレートを使っているのに改行と段落の使い方がメチャクチャなら意味がありません。
もっとも、一番重要なのは記事自体ですけどね。
了解です。今後もどうぞよろしくお願いいたします(なにを?)
SEO上良くないことをしている認識がぜんぜんなかったダメアフィリエイターの私なんですが、パソコンに触れることが少なかった人なので、こういうことも知らないのですよ。
普通のアフィリエイターさんからしたら、「なにを今更」な話なのでしょうかね。
でもまあ、今知ることができて、感謝です。
Elloraさんもこうおっしゃっていらっしゃいます。
もっとも、一番重要なのは記事自体ですけどね。
細かい話ですが、できるだけ多くのユーザーに記事を読んでもらうために、できることを少しずつやっていきましょう!
少しづつでも前進することが大切ですよね。
「アフィリエイトで稼ぐ!」を目標に頑張っている皆様!がんばりましょー!
【追記】
上記のElloraさんのやり方でCSSとHTMLを記述したとすると、以前に書いた記事に、brがたくさん入っていると、たぶん記事の修正が大変ですよね。
その際の<br />を消すcssを、有名なヨッセンスのヨスさんが記事にされていたので、メモしておきます。
ただ、私、こういうのいじるの不得手なので、たぶん、これは使わないと思います。
今アフィリエイトする予定のブログの方はさほど記事数もないので、手作業でひとつひとつ<br />を消していくつもりです。
<br />を消し去る裏ワザ
何百何千にもわたるページで、すでに<br />を使いまくってて、もうどうしようもないよ!って方、いると思います。でもCSSをチョイといじるだけで一発ですべての改行を無効化にする技があるようです。
@media screen and (max-width: 480px) {
br { display : none ; }
}これをやると、スマホで見たときだけ、本当にすべての<br />が消え去ります!きち(@YOSHI_YANO)さん、情報教えてくれてありがとうございます。
以上、検索エンジンに正しく伝えるために、段落分け<p>タグと改行<br />の乱用はやめよう初心者向け【SEOの基本】でした。