平日バンドマン食堂

シンプルな暮らしが生活を豊かにする!

【はてな】要注意!空のpタグで改行するとSEOで不利になる【見たままモード】

f:id:Sasatoo0521:20190224225500p:plain

こんにちは!茶碗蒸しです。

今回ははてなブログを使う上で見逃していたミスがあったのでそれについて話したいと思います。これはHTMLが分からない初心者の皆さん(自分も含めて)が知らず知らずのうちに陥りやすいミスで、これによってSEO的に不利になる、つまり検索してもなかなか出てこないからブログのPV数が伸びないという状態になってしまいます。

もしその状態になっていても、早いうちに気づいていた方がきっと修正もラクなのでぜひチェックしてみてください!

<p>タグってなんなの?

それは<p>タグというもの。「p」というのは「paragraph」の頭文字で「段落」という意味があります。HTMLの中でも重要なタグでこの<p></p>タグの中に文字を打つことで文章としてブログに表示されるんですね。

このはてなブログでは(きっと他のブログサービスでも)HTMLで生成されています。他にも改行を表すタグ<br>とか、見出しを表す<h>タグとかたくさん種類があります。

空の<p>タグで改行してはいけない理由

このHTMLでブログが構成されているわけですが、このHTMLは整理されていた方が見やすいわけで、見やすいブログの方が検索に当たりやすいわけです。先ほども言ったように<p></p>の中身が「段落」になるわけですから、この<p>タグの間には当然「文章」が入ってくるわけです。そして「段落」なのでこの<p>タグを置くことで文章が1段落ちて、実質「改行」が行われます。

ここで僕のブログのHTMLを見てみましょう。

f:id:Sasatoo0521:20190224214300p:plain

おいおい、、、

f:id:Sasatoo0521:20190224214417p:plain

この赤い矢印は全部あいだに文章がない「空の<p>タグ」です。一見綺麗に見えますが、これでは文章がない段落がたくさんある状態です。文庫本でいうと、1ページあたりに書いてある文章が少ない状態です。これではgoogleやらyahooなどの検索エンジンにかさ増ししている文章だと思われるか、汚い文章と思われるか、結果的に嫌われて検索しても自分のブログがヒットしづらい状態になるのです。

僕は全部の記事でこの状態になってしまっていました。なぜそうなってしまったのでしょうか?

はてなブログで見たままモードを使っている人は要注意

原因は、はてなブログの「見たままモード」でブログを書くことにあります。この見たままモードというのは書いて装飾した文章をHTMLに自動的に変換してくれるモードです。この見たままモードで「Enter」を押して改行をしまくると空の<p>タグがたくさん生成されます。「見たままモード」で「見たまま」に文章を作ると損してしまうのです。それに気づかず今日の今まで「Enter」を連打した僕。

f:id:Sasatoo0521:20190224221139p:plain

このように無駄な<p>タグは排除して、その後で<p>タグ同士の距離(行間)を広く取るべきです。そうすれば改行を連打せずとも文章に距離感がとれます!

f:id:Sasatoo0521:20190224221206p:plain

<p>タグ改行をしてしまっていたときの対処方

では僕のように見たままモードで改行を連打してしまった場合の対処法です。きっとこの空の<p>タグを消してHTMLを整理した方がお得なはずなのです。簡単なので手順をお話しします! 

まずは空の<p>タグを全消ししよう

 まずは全部の記事の空の<p>タグを消すのです。「編集」を押していつもの編集画面から「HTML編集」をクリックすると記事のHTMLが見れます。

f:id:Sasatoo0521:20190224214300p:plain

まさにこういう画面だと思います。この<p>・</p>となっている段を全部削除しましょう。結構時間はかかりますが、とにかく無心で消すのです。全部消したら「プレビュー」で確認して、無駄な改行が行われてないかをチェックします。全部できたら保存しましょう。

文章の行間を調整しよう

上の作業が完了したら相当文章が詰まっていて読みづらい状態になっていると思います。なのでこの行間を広げる作業をしなくてはなりません。これも簡単なので説明します。

f:id:Sasatoo0521:20190224223611p:plain

トップページからデザインを押して、

f:id:Sasatoo0521:20190224223704p:plain

スパナのアイコンをクリックして

f:id:Sasatoo0521:20190224223751p:plain

デザインcssを開きます。ここに

 /* 行間を広くする */
p {
margin: 3.5em 0px !IMPORTANT;
}

これをコピペすれば行間を広げることができます。広すぎたらmarginの数字を大きくしたり、狭かったら数字を小さくしたりしてお好みのデザインに近づけてみてください。(もしうまくいかなくても当ブログでは責任を負いかねます。万が一に備えて元に戻せる環境でトライしてみてください。)

これで少しでも検索にヒットしやすくなったはずです!

まとめ

空の<p>タグで改行するのって初心者に絶対にやってる人多いと思ったので記事にしてみました。検索のヒットにどれくらい貢献するかが分からないですが、やってみてそんないと思います。これで大きく変化があったらまた記事にしたいと思います!


【スポンサーリンク】