みなさん、見出しを適宜使われていると思います。エディターでいうところの左上「見出し」です。ここをクリックすると「大・中・小・標準」という選択ができます。
これ「HTML編集」ではどう見えるかご存知ですか？
※はてなブログの話題
具体例
自己紹介記事で見てみます。これを「HTML編集」で
こんな感じ。「自己紹介」は大見出しで、<h3>タグに囲まれています。
各見出しは「大・中・小」→「h3・h4・h5」とも言えるのです。
見出しを適宜使うと何が良いのか
読者が見やすい
中にはテキストのみで構成される方もいらっしゃいますが、それは文章家（文章力が高い方）に多いですね。ですが、ほとんどの場合は見出しを使用して階層表示したほうが見やすいはずです。
この記事も見出しにより作成しています。具体的には「見出しを適宜使うと何が良いのか」という大見出しでくくり、さらに「読者が見やすい」中見出しを使ったのち、その内容を記述しているのが、まさにここですね。
また、冒頭付近で[(ｺﾛﾝ)contents]にて見出しを展開する必要があるから、というのも１つの理由。これも読者向けの配慮です。
検索エンジンが見やすい
googleのクローラーという、検索エンジンへ記事をインデックスするためにサイトをチェックするbotがおり、この記事も公開後はそれに見てもらうことになります。
その際、botは機械ですので、人間のようにビジュアル的にどうこうではなく、HTMLコードから記事内容をチェックします。
見出しタグを使用していると、botが「ここにはこういう看板があって、こういう動線が敷かれているのだな」というふうに見てくれるので、使い方が適切であれば評価が良くなるそうです。
ところでh1とh2タグは？
という疑問が湧きましたので、調べました。
h1タグ
h1タグの居場所はこちらです。
これは「自己紹介」記事のページで右クリックし、ページのソースを読み込んだものです。h1タグが「記事タイトル」に使われているのがわかります。
これは納得ですね。一番大きな看板ですから最初の見出しタグ「h1」が使われる。ここに書いてある内容と記事内容が食い違って良いことはなさそうです（読者的にもbot的にも）。
h2タグ
ありません。ソースを表示しても、見当たらないのです。
現在のエディターでは、手動（HTMLコードを変更）で行わない限り、この「h2」タグが使われることはないようです。
だけど、bot的には「？」となりそうですよね。記事タイトルが一番大きな看板で、中を覗いてみたら以外に小さな看板「h3」が出てくるのですから。
本来、正しく見出しを使うなら「h2」を適宜入れてあげるべきなのでは？
H2タグを使った記事修正を実施
まずは実際に使ってみた
なんてことはなく、<h3></h3>→<h2></h2>に書き換えるだけ。さて、プレビューは？
このようになりました。[(ｺﾛﾝ)contents]で展開した見出しで、一番前に来ていますね。h2タグの見た目のデフォルトは画像のとおり。
h2とh3の見た目の差別化を図る
h2タグも装飾するコードを追加します。ここにh2も入れてあげる...
このままだと見た目の変化がありませんね。
見出しの種類が増えるので、h2とh3の見た目の差別化を図りたい。というわけでh5からh2へ１段ずらしの、新たにh5へコードを入れることにします。
全体を手直し
さらにHTML編集により、h3タグをh2タグに書き換え。h4以降はエディターの「見出し」タブで見たまま編集でサクッとやってしまいます。
完成！
油断は禁物です、修正チェックを。
修正チェックは[(ｺﾛﾝ)contents]で
ありましたね。これは[(ｺﾛﾝ)contents]で確認するとわかりやすい。
ｈ２タグは使うべき
理由
- botがh1→h2とすんなり読み込んでくれる
- 使える見出しが１つ増える
だが面倒だ
- 頑張れ
- 勝負記事だけでいいから修正してみないか
- これから作る記事でルーチン化推奨
ポイント
- h2もh3もまずはエディターの「大見出し」を振って、最後にHTML編集で必要な個所のh3タグをh2にすると楽ではないかな。
-
こうやってh2へ変える予定の見出しは「・」を打っておいて、修正したら「・」を消すと捗るよ。
文字列変換ツール（フリーソフトなど）でhタグを一律変換とかできるのかな。わかりません...
救世主出現
理沙：とっても便利なアドオンが公開されています！
クロームの拡張機能で、一発で文字列をh2にするアドオンを開発した猛者がいまして、そのツールが公開されています。
2016年11月27日現在はこれでノーストレスでh2入れてます、おすすめ！
実際に効果が出た方の体験談
【国際結婚ブログ】日本人夫の台湾物語り！2016年12月運営報告。あけましておめでとうございます！ - ニーハオ！日本人夫の台湾物語り！
詳細はこちらの記事参照。
具体的数値を示して、h3→h2に変更した際の効果を述べられていて非常に貴重なデータとなっております。
ってか（株）はてなさん、そろそろ大見出しをh3じゃなくデフォルトでh2にしてください（涙）
