田中さんが考えていること

大阪で働く孤独な社長が主にブログ運営について独り言をつぶやくブログ

おすすめ記事一覧

【アクセスアップ・SEO】はてなブログの見出しをh3からh2に変更しよう

h2タグ
田中です。

今回は、はてなブログの見出し問題について説明します。

はてなブログの見出しは大見出しがなんとh3タグとなっておりh2タグがありません。

そもそも、h2タグとかh3タグって何のこと?

アクセスアップ・SEO上、どう関係があるのか?

という方もいるでしょうから、そのあたりから説明します。

見出しのタグについて

はてなブログでいくと、見出しは、大見出し、中見だし、小見出し、標準とあります。

実は、HTMLの見出しタグとは「見出しを作るためのタグ」のことで、h1、h2、h3…h6まで合計で6種類あります。

なお、数字が小さいほど大きな見出しを表します。

見出しタグの使い方

通常、記事のタイトルがh1。

それ以降、見出しについては、h2、h3、h4という順で使用するのが一般的です。

大きな項目はh2を使用。その項目の中で、更に細分化して説明等をおこなう場合はh3、h4を使用します。

ちなみに、僕の場合は、ほとんどがh2どまりですが、特に問題はないと思います。

要するに、ユーザー(読者)にとって、読みやすい、見やすい構成になっているかどうかが問題です。

h2がないと問題があるのか

さて、本題ですが、はてなブログの場合、大見出しはh3となっており、h2が存在していません。

「ユーザー(読者)にとって、読みやすい、見やすい構成になっているかどうかが問題」ならば、h2がなくても、h1、h3、h4…の順番で使用していけば特に問題はないはずです。

いろいろと調べてみましたが、やはり諸説あり。

問題があるのか、それともないのか、正直なところ分かりません。

どちらか分からないなら変更してしまおう

僕が出した結論がこれです。

絶対に、今のままの方が良い、変更するも問題がある、ということでないのなら、変更してしまおうと。

h3タグからh2タグへの変更方法

以下のコードを何も考えずに「ダッシュボード」→「記事上」にコピペしましょう。

大見出しの表示(デザイン)も変更されるはずです。(要確認)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    if (!document.querySelector('.entry-content h2')){
        $('.entry-content h3').replaceWith(function() {
            var tag_class_h3 = $(this).attr("class");
            var tag_id_h3 = $(this).attr("id");
            
            if ( tag_class_h3 == null) {
                var tag_class_plus_h3 =[];
            } else {
                var tag_class_plus_h3 = 'class="'+tag_class_h3+'"';
            }
            if ( tag_id_h3 == null ) {
                var tag_id_plus_h3 =[];
            } else {
                var tag_id_plus_h3 = 'id="'+tag_id_h3+'"';
            }
            $(this).replaceWith('<h2 '+tag_id_plus_h3+'  '+tag_class_plus_h3+'>'+$(this).html()+'</h2>');
        });
        $('.entry-content h4').replaceWith(function() {
            var tag_class_h4 = $(this).attr("class");
            var tag_id_h4 = $(this).attr("id");
            
            if ( tag_class_h4 == null) {
                var tag_class_plus_h4 =[];
            } else {
                var tag_class_plus_h4 = 'class="'+tag_class_h4+'"';
            }
            if ( tag_id_h4 == null ) {
                var tag_id_plus_h4 =[];
            } else {
                var tag_id_plus_h4 = 'id="'+tag_id_h4+'"';
            }
            $(this).replaceWith('<h3 '+tag_id_plus_h4+'  '+tag_class_plus_h4+'>'+$(this).html()+'</h3>');
        });
        $('.entry-content h5').replaceWith(function() {
            var tag_class_h5 = $(this).attr("class");
            var tag_id_h5 = $(this).attr("id");
            
            if ( tag_class_h5 == null) {
                var tag_class_plus_h5 =[];
            } else {
                var tag_class_plus_h5 = 'class="'+tag_class_h5+'"';
            }
            if ( tag_id_h5 == null ) {
                var tag_id_plus_h5 =[];
            } else {
                var tag_id_plus_h5 = 'id="'+tag_id_h5+'"';
            }
            $(this).replaceWith('<h4 '+tag_id_plus_h5+'  '+tag_class_plus_h5+'>'+$(this).html()+'</h4>');
        });
    }
});
</script>

これで、自動的にh3がh2に置き換わるはずです。

但し、他にいろいろとカスタマイズ等をしている場合、不具合が生じる可能性もありますので、そこは自己責任で対応をお願いします。

まとめ

はてなブログがh2をいまだに作らないことや、h2がないことをグーグルがどのように評価しているのかは謎ですが、まあ、h3をh2に変更しても損はないのではと思います。

なにかあれば、上記のコードを削除すれば済むことですし。

少しでもアクセスアップ・SEOに効果があるならば、何でもトライすべき!だと思います。


今日も田中のブログを読んでくれてありがとうございます。

「【アクセスアップ・SEO】はてなブログの見出しをh3からh2に変更しよう」でした。

※今日のはてなブログ読者登録数234(+1)