SEO│はてなブログに<h2>の見出しを設定する

はてなブログを始めて22日目です。
ちょうど3週間が経過しました。

これまでに16記事を投稿しましたが、解消できない不便があるので、ここで基本的な設定を見直してみようと思います。

前提として、下書きや公開した記事の編集は、主にスマホ用のアプリを使っています。

はてなブログの見出し

SEOにおいて見出しの重要性は広く知らられています。
そして、はてなブログの見出しには<h2>がないことも有名です。

はてなブログで記事を書く際、エディタで選ぶ見出しには<h2>がありません。
仕方がないので、一旦「大見出し」の<h3>にしておいて、HTML編集に切り替えて手動で<h2>に書き換えていました。

確かにSEOの理には叶っているのですが、このやり方はとても非効率です。
アプリを使っていると、なおさら手間がかかります。

見出しを自動で書き換える

なにかよい方法はないかと思案していたところ、この問題に言及されている方がいました。

わかりやすい解説とともに、解決策として見出しを自動で書き換えるスクリプトも公開されています。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(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>

こちらを使えば、すべての「大見出し」が自動で<h2>に書き換えられます。
同様に「中見出し」と「小見出し」もひとつずつ繰り上がって表示されます。

ただし、過去の記事にも書き換えが及びます。
つまりは、今まで手動で書き換えをしたことがないブログに向いています。

さらに、応用編も公開されていました。

<script type="text/javascript" src="http://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>

過去記事に対しては、表示時にJavaScriptで強制的にタグの書き換えを行い、その結果をブラウザに表示させるという処置をとります。
「はてな記法」と「Markdown記法」の比較 - Milkのメモ帳

こちらのスクリプトは過去の記事には影響しません。
また、それぞれの見出しに施したCSSの効果も引き継がれます。

すでに「大見出し」を<h2>に書き換えている私には後者が適しているようです。

クローラに対して有効なのか
SEOという観点に立ち戻って考えると、基本的にクローラはコンテンツのHTMLファイルを読み込んでいます。ならば、表示上の書き換えには意味がないのかと思いきや、JavaScriptもjQueryも適切にレンダリングして、コンテンツを評価しています。

では、早々に実装してみましょう。

やり方はとても簡単で、上記のコードを記事の「デザイン」に貼り付けるだけです。

これで、過去の記事を心配することなく、これから投稿する記事に思った通りの見出しが反映されます。