いづいづブログ

アジャイルコーチになりたい札幌在住SEです。アジャイル札幌スタッフ&ScrumFestSapporo実行委員。Like:パクチー/激辛/牡蠣/猫/初期仏教

h1タグの意味を知らずに何度も使っていて恥ずかしかった話

これまでブログを書いていて、h1タグの意味をきちんと理解していなかったためにちょっと恥ずかしいブログになっていたので、その話。

h1タグに対する最初の理解

私のh1タグに対する最初の理解はこう。

  • h1タグは、6つある見出しタグの中で一番上位のタグ。それ以上でもそれ以下でもない。
  • 記事本文を書くとき、見出しは上位のタグ→下位のタグの順に使用するのが鉄則。

ゆえに、記事本文に見出しをつけるときにはまずh1タグを使用し、入れ子になる場合はh2、h3…という風に下位の見出しを使用していくものだと思っていた。

もっというと「SEOの面から考えてもh1は1記事に1つだけ」みたいな考えも全くなかったので、h1タグは何回も登場していた。

h1タグへの違和感

その結果、ブログの見た目にどうにも違和感を感じるようになった。

f:id:izumii-19:20181115132903p:plain

タイトルは一番上の「Linuxゲリラ戦記を読んでLinuxのことを知る #1」なんだけど、どうみてもタイトルが3つあるように見える。

こんな階層を表現したかったのに。

さらにはこんなことにもなってしまった。

f:id:izumii-19:20181114144218p:plain

h1タグよりh2のほうが主張が強くて、見出しの強弱が逆に感じる。 それでも自分の中には「 記事本文を書くとき、見出しは上位のタグ→下位のタグの順に使用するのが鉄則 」というポリシーが強く存在したので、h1タグから使用し続けていた。

しまいには、このCSSのデザインのせいだと思って他デザインのCSSに変えたりもしてみたが、「h2のほうがh1より主張している」というのは他のCSSでも結構多かったので解決しなかった。

h1タグについて調べた

あまりにも違和感があるのでh1タグについて調べてみた。

saruwakakun.com

ここによると、こういうこと。

  • h1は「一番大きな見出し」なので、タイトルなどもっとも目立たせたいところ1箇所だけに使う。
  • 記事本文はh2タグから順に使っていく。
  • SEOの面からみてもh1タグの多用はしない方がいい。

h1タグがh2~h6タグと大きく区別されるのは「一番大きな見出し=ユニークである」という点。 この考えが全くなかった…。なるほどそうなのか。h1タグは少しだけ特別なんだ。

h2タグにインパクトのあるデザインが多いのも、「本文中で一番目立つ見出し」になるからなんだな。納得。

結論

  • h1タグは、6つある見出しタグの中で一番上位のタグ。それ以上でもそれ以下でもない。

  • h1タグは「一番大きな見出し」に使う。つまりタイトルだけに使うのがいい。

  • 記事本文を書くとき、見出しは上位のタグ→下位のタグの順に使用するのが鉄則だが、h2から順番に使う。

ちなみに最近では「SEOの面からみてもh1タグの多用はしない方がいい」に対する考え方は変わってきている様子。でも自分の経験上、見やすさを考えると1記事1回が結局いいと思う。*1

というわけで、この記事を書き終わったら過去ブログを順番に直そう。 こんな状態で今まで公開していたかと思うと、ホント無知って罪だと思う。