(cache) はてなブログの大見出しはh2に変更した方がSEO的にいいかも【jQueryで自動書き換え、Markdownを使うなど】

こんにちは！　たまに毒を吐くです。

先日、嗚呼蛙 (id:aaafrog) さんの下記の記事を読みまして、

改めて見出しタグについて考えさせられました。

今回はその見出しタグについて書いてみようと思います。

見出しタグとは

見出しタグとは、htmlのh1～h6というタグです。

h1	…	h6
高	←　重要度　→	低

数字が小さい方が重要度が高いと言われています。

また、

h1（記事タイトルなど）

h2（大見出し）

h3（中見出し）

h2（大見出し）

h3（中見出し）

h4（小見出し）

こんな感じでh1～h6が上から順番に使われているのが、SEO的に望ましいとされているようです。

はてなブログでは記事の大見出しがなぜかh3

はてなブログでは、ヘッダー部のブログタイトルにh1、ブログの説明文にh2が使われています。

そして記事の部分に入るとそれまでの見出しがリセットされて、記事タイトルがh1になっています。

なので、記事中の大見出しはh2から始まった方がいいのではないか？　という話になるのですが……。

はてなブログの記事作成画面の見出し

はてなブログの記事作成画面の見出しを使うと、大見出しがh3、中見出しがh4、小見出しがh5になります。

あれ？　h2が抜けてる……これはSEO的によくないのでは……と嗚呼蛙 (id:aaafrog) さんは仰っていた訳です。

なぜ大見出しがh3なのか？　運営に問い合わせている方がいた！

私も大見出しがh3ということには気付いていたのですが、「公式で大見出しをh3にしているということは、何か理由があってのことなんだろう」と、あまり深く考えていませんでした。

しかし今回、そう言われればどうしてh3なんだろう？……と改めて調べてみた所、下記の記事を見つけました。

上記記事に、「なぜ大見出しがh3なのか？」という問いに対するはてな運営の回答が載っていたのですが……。
私はそれを見て、ちょっとした衝撃を受けました。

その回答を下記に引用させて頂きます。

はてなダイアリーでは記事のタイトルをh3としているため、はてなダイアリーの仕様と合わせるためにh3となっております。
【SEO】はてな記法を使っている方は、今すぐタイトルタグを利用しましょう！

えっ……！

そ、それだけ…!?

・・・

ただ単に運営の都合というだけの話だったようです……！

運営側で何か対策を講じている可能性もありますが、やはり自分で大見出しをh2に、中見出しをh3に、小見出しをh4に変更した方がよさそうな気がしてきました……。

見出しタグを変更する方法

手動で書き換える

ポジ熊 (id:pojihiguma) さんが既に手動で見出しタグの書き換えを行っていました。

見たままモードで記事を作成した後、HTML編集に切り替えて、h3をh2に手動で書き換えているようです。

これは大変そうです……！

jQueryで自動的に書き換える

上記の記事のコメント欄に、勝手にシロマティ (id:shiromatakumi)さんが「jQueryでタグを自動で書き換えてくれる方法を見つけた」とコメントなさっていました。

その方法が載っているのが下記のページになります。

| jQueryをつかって、中身はそのままでHTMLタグを書き換える

上記ページを参考にして、jQueryのコードを書いてみました。

h3⇒h2、h4⇒h3、h5⇒h4に自動で書き換えるjQueryのコード

<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に、中見出しがh3に、小見出しがh4に書き換わるはずです（スクリプトテスト用のサブブログで実験済み）。

過去記事はそのままでOKですが、CSSの変更は必要です（今までh3で使っていたCSSをh2に、h4をh3に……という変更）。

上記コードをコピペしてご自由にお使いください。
ただ、どのテーマでも正常に動くかどうかは不明ですので、もしお使いになる際は自己責任でお願い致します。