ブログ関連

はてなブログの大見出しはh2タグでない!?問題点と変更方法について

はてなブログ 大見出し h2 h2

みなさん、こんにちは。すばるです!

今回は、はてなブログで一年以上に渡って毎日更新を続けてきた私すばるが、はてなブログに関する豆知識をお届けしていこうと思います。
※現在はワードプレスに移行しました。

 

内容はタイトルにもある通り、『はてなブログの大見出しがh2タグでない件について』です。

はてなブロガーで検索流入を増やしたいという方は、知っておいて損はなしですよ。

※本記事ははてなブロガー向けの記事です。

※はてなブロガーで検索流入に興味なしという方も、ブログデザインを整える際などに役立ちます。

〇本記事を読んで分かること

  • はてなブログの大見出しがh2タグでないことの問題点
  • 大見出しをh2タグに変更する方法
  • 変更方法のそれぞれのメリット・デメリット

 

はてなブログの大見出しがh3タグな件について

h2タグだとか、h3タグだとか…

そもそも<h>タグって何!?という方も多いと思いますので、簡単にそちらの説明をします。

<h>タグというのはHeadingの略で、プログラミング言語:HTMLにおける見出しを意味します。

<h1>~<h6>まで存在し、<h1>が最上位の見出しで、以下どんどん下位の見出しになっていき、<h6>が最下位の見出しになります。

 

さて、この<h>タグですが、はてなブログは他のブログ(WordPress等)と大きく異なる点があります。

それこそが、大見出しが<h3>タグであるということです。

つまり…

〇他のブログ

・タイトル:h1
・大見出し:h2
・中見出し:h3
・小見出し:h4

〇はてなブログ

・タイトル:h1
・大見出し:h3
・中見出し:h4
・小見出し:h5

といった感じで、 <h2>タグだけ抜けているのです。

はてなブロガーの方は、その多くが左上の見出しボタンから見出しを設定すると思いますが、実はその見出しは他ブログの見出しと一つずつズレているというわけです。

 

大見出しがh2タグでないと何が問題?

はてなブログの大見出しが<h3>タグってことは分かった!

けど、それの何が問題なの?

このように思われた方は多いと思います。

 

ぶっちゃけ読者目線で見る際には、何ら問題なしと言っても過言ではありません。

しかし…

Google等の検索サイト目線で見たときは少し話が変わってきます。

 

というのも、検索サイトというのはユーザーが検索したキーワードに適したサイトを上から順に表示してくれます。

そして、キーワードとサイトのマッチング度合いを図る際に、見出しというのは一つの大きなポイントになってきます。

つまり、見出しというのは、ブロガー側が検索サイト側に「自分の記事はこんな記事ですよ~」とアピールできる場の一つなのです。

 

このアピールは大見出し>中見出し>小見出しの順に強いわけですが…

そうなんです!はてなブログでは、大見出しが他ブログの中見出しと同レベルのアピールにしかならないのです。

そのため、はてなブログとその他のブログで、大見出しで「この記事はこんなこと書いてるよ~」と同じようにアピールしても、はてなブログの方がアピール不足になってしまうというわけです。

何とも悲しいですよね…

 

実際問題、これがどのくらいseo(検索順位の順番)に影響を与えるかは定かではありませんが、大見出し=h3タグであることが不利に働く事はあっても有利に働くことはないというのが巷で言われていることです。

 

はてなブログの大見出しをh3からh2に変更する方法

大見出し=<h3>タグが、検索流入を狙う上でマイナスになるかも…というのは分かった!

けど、これって変更できるの?

 

結論から言えば、変更方法は多数存在します。

ここでは、僕が試したものの中から3つほどご紹介するので、ぜひ参考にしてみて下さい。

 

①HTML編集から変更

これは非常に分かりやすい方法です。

多くの方は【編集 見たまま】でブログを書いていると思いますが、【編集 見たまま】で書き終わったら、【HTML編集】に移動してあげてください。

 

すると、

大見出し…<h3>〇〇</h3>

中見出し…<h4>〇〇</h4>

小見出し…<h5>〇〇</h5>

となっていますが、この数字を3→2、4→3、5→4と変更してあげるだけで完了です。

 

注意点としては、

  • 半角数字を使用すること
  • <>、</>の両方とも数字を変更すること
  • h3→h2だけでなく、h4やh5も変更すること

になります。

メリット

・やり方が分かりやすい。

デメリット

・手間がかかる。
・これまでの記事は変更されない。

 

②jQueryで置き換え

先ほどの手動と異なり、今度は一度設定してしまえば、自動で大見出し=h2タグ、中見出し=h3タグ、小見出し=h4タグとなる方法をご紹介します。

その方法というのが、管理画面→デザイン→フッタに特定のコードを記述(コピペ)するというものです。

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script type=”text/javascript”>// <![CDATA[
$(document).ready(function(){
$(‘h3’).replaceWith(function() {
$(this).replaceWith(‘<h2>’+$(this).text()+'</h2>’)
});

$(‘h4’).replaceWith(function() {
$(this).replaceWith(‘<h3>’+$(this).text()+'</h3>’)
});

$(‘h5’).replaceWith(function() {
$(this).replaceWith(‘<h4>’+$(this).text()+'</h4>’)
});

});
// ]]></script>

↑僕が以前使っていたコードがこちら。

お、これをコピペすればいいのかと思ったみなさん。

ちょっと待ってください!

 

実はこのコードには問題点があるのです…

その問題点というのが、目次機能を使った際、リンク先に飛ばなくなるというものです。

 

目次自体は表示されるが、特定の場所まで飛べない…

これは読者目線で見た際、不便に感じやすいかと。

 

そのため、目次機能を多用する方はこのコードのコピペは避けた方が良いかと思います。

ですが、安心して下さい!

 

>はてなブログの大見出しをh3からh2に自動的にカスタマイズする方法

少し以前の記事になりますが、こちらの方が見出しの変更+目次が正常に動くコードというのを記載されています。

とりわけ、jQueryによる方法はアドセンス広告の配置などに影響を及ぼす場合があるので、試そうと考えている方は一度上の記事をチェックしてみることをオススメします!

メリット

・これまでの記事も今後の記事も自動で見出しが変更される。

デメリット

・コードによるもののため、目次やアドセンスの広告配置など少しばかしややこしい部分あり。

 

③ショートカットキーによる変更

Shift+Alt+タグの数字

(タグの数字:大見出しなら2、中見出しなら3、小見出しなら4)

このショートカットキーを、【編集 見たまま】で見出し選択の代わりに押してあげる。

たったこれだけで完了と、非常に手軽です。

 

これまでの記事が変更されないという点では、jQueryによる変更に劣りますが、個人的にはマウス操作不要なのでこちらの方が気に入っています。

ちなみにこの方法は、大見出しをh2タグにしたい人以外も、見出しを使う際は時短になるので知っておいて損はなしです!

メリット

・記事作成の時短。
・ショートカットキーを覚えるだけで手間いらず。

〇デメリット

・これまでの記事は変更されない。

 

まとめ

まとめ

はてなブログは

・タイトル:h1
・大見出し:h3
・中見出し:h4
・小見出し:h5

となっており、<h2>が抜けています。

そのため、

検索流入の観点で不利に働く恐れあり。

 

改善方法としては、

  1. HTML編集から変更
  2. jQueryで置き換え
  3. ショートカットキーによる変更

などが挙げられます。

はてなブロガーの方で検索流入を増やしたい方は参考にしてみて下さい!

こちらの記事もオススメ!