先日、嗚呼蛙 (id:aaafrog) さんの下記の記事を読みまして、
改めて見出しタグについて考えさせられました。
今回はその見出しタグについて書いてみようと思います。
見出しタグとは
見出しタグとは、htmlのh1~h6というタグです。
h1 | … | h6 |
---|---|---|
高 | ← 重要度 → | 低 |
数字が小さい方が重要度が高いと言われています。
また、
こんな感じで、h1~h6が上から順番に使われているのが望ましいとされているようです。
はてなブログでは記事の大見出しがなぜかh3

はてなブログでは、ヘッダー部のブログタイトルにh1、ブログの説明文にh2が使われています。
そして記事の部分に入るとそれまでの見出しがリセットされて、記事タイトルがh1になっています。
なので、記事中の大見出しはh2から始まった方がいいのではないか? という話になるのですが……。
はてなブログの記事作成画面の見出しを使うと、大見出しがh3、中見出しがh4、小見出しがh5になります。
あれ? h2が抜けてる……これはよくないのでは……と嗚呼蛙 (id:aaafrog) さんは仰っていた訳です。
なぜ大見出しがh3なのか? 運営に問い合わせている方がいた!
私も大見出しがh3ということには気付いていたのですが、「公式で大見出しをh3にしているということは、何か理由があってのことなんだろう」と、あまり深く考えていませんでした。
しかし今回、そう言われればどうしてh3なんだろう?……と改めて調べてみた所、下記の記事を見つけました。
上記記事に、「なぜ大見出しがh3なのか?」という問いに対するはてな運営の回答が載っていたのですが……。
私はそれを見て、ちょっとした衝撃を受けました。
その回答を下記に引用させて頂きます。
はてなダイアリーでは記事のタイトルをh3としているため、 はてなダイアリーの仕様と合わせるためにh3となっております。
【SEO】はてな記法を使っている方は、今すぐタイトルタグを利用しましょう!
えっ……!
ただ単に運営の都合というだけの話だったようです……!
運営側で何か対策を講じている可能性もありますが、やはり自分で大見出しをh2に、中見出しをh3に、小見出しをh4に変更した方がよさそうな気がしてきました……。
見出しタグを変更する方法
手動で書き換える
ポジ熊 (id:pojihiguma) さんが既に手動で見出しタグの書き換えを行っていました。
見たままモードで記事を作成した後、HTML編集に切り替えて、h3をh2に手動で書き換えているようです。
これは大変そうです……!
jQueryで自動的に書き換える方法もあるが……
上記の記事のコメント欄に、勝手にシロマティ (id:shiromatakumi)さんが「jQueryでタグを自動で書き換えてくれる方法を見つけた」とコメントなさっていました。
その方法が載っているのが下記のページになります。
上記ページを参考にして、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に……という変更)。
上記コードをコピペしてご自由にお使いください。
ただ、どのテーマでも正常に動くかどうかは不明ですので、もしお使いになる際は自己責任でお願い致します。
応用したコード
上記の記事で、「過去に自力で書き換えた記事があった場合や、今まで頑張って書き換えていたけどこれからは自動化したいという人向け」に応用したコードを載せてくれています。
注意
こちらの記事の雑記で、サイトのデザイン(HTMLやCSS)を大掛かりに修正したり、わざわざjQueryでタグを書き換えてまで見出しを変更する必要はない、というご意見を頂きました。
こちらも読んでみて、見出しタグを変更するかどうか考えて頂いた方がよろしいかと思います。
(私もそこまで神経質になる問題ではないと思います。。。やれるならやった方がいい、位のことかと……)
Markdownモードで記事を作成する
Markdownモードで記事を作成する場合、見出しは#(シャープ)を打つことによって書けます。
私はMarkdownモードで記事を作成していますので、今後は大見出しをh2にしようと思います(文頭にシャープを2つ打てばいいだけ)。
ただ今後はそれでいいとしても、過去記事とCSSの修正は必要になります。
ちょっと面倒ですが、これから過去記事の修正に取りかかります……。
Markdownについては下記の記事をご覧ください
【はてなブログ】HTMLが分かるなら「見たままモード」より「Markdownモード」で記事を書く方が捗るかも - 広汎性発達障害の女がたまに毒を吐くブログ
タグの変更は面倒! でも見出しタグの歯抜けだけは避けたい! という場合
http://hatena.aaafrog.com/entry/2015/12/25/085000
タグの変更が面倒なら、目次の上につける「目次」という見出しだけでもh2にすればいいじゃん! というお話です。
確かにこれにより見出しタグの歯抜けは回避出来ます。
ただ上記記事でも触れていますが、記事中の見出しよりも「目次」という見出しの方が重要度が高くなるという問題があります。
重要度ウンヌンよりもとにかく見出しタグの歯抜けだけは我慢ならない! でもタグの変更は面倒! という場合はこの方法でもいいかもしれません。
まとめ
はてなブログの場合、もし出来そうであれば、
大見出しをh3⇒h2
中見出しをh4⇒h3
小見出しをh5⇒h4
に変更した方がいいかもしれません。
しかし繰り返しになりますが、そんなに神経質にならなくても大丈夫な問題かと思います(運営が放置している訳ですから……)。
終わりに、参考にさせて頂いた記事へのリンクを改めて貼っておきます。
どっちが集客に良い?はてなブログの見出しタグは「h2」か「h3」か。 - 嗚呼、学習の日々
【SEO】はてな記法を使っている方は、今すぐタイトルタグを利用しましょう! - なまけるのに飽きるまで-格安SIM・スマホを使い倒す
【SEO効果・見出し】はてなブログでh2タグを使用し記事を作ろう - ポジ熊の人生記
jQueryをつかって、中身はそのままでHTMLタグを書き換える | 9ineBB
SEO的に見出しはh2が良いとしても変えるの面倒!って時の対応案 - 嗚呼、学習の日々
上記記事の筆者の皆様、誠にありがとうございました!
2016/5/9 追記
http://www.future-nova.com/entry/taghenkou
こちらの記事に、見出しタグを変更したことにより検索流入が増加したかもしれない……ということが書かれています。
私もやっぱり微妙に効果があるような気がします。
私は2015年12月の終わり頃にこのブログの見出しタグの変更を済ませてから別ブログに移転し、2016年になってからはこのブログでは新記事を書いていないのですが、アクセス数にあまり変化はありません(というかむしろ微増しています)。
もともとそんなにアクセス数が多かった訳ではないのでなんともいえませんが、 見出しタグの変更の効果が少しはあったのかな……? という気もします(他は特にいじっていないので……)。
しかしクドイようですが、そこまで神経質になる問題ではないので、無理をしてまで直す必要はないと思います。