STINGER5 のブログ説明文の重要性について

誰にも気づかれない自己満足カスタマイズ続行中のキャリコ（ @calicocatxyz ）です。

いつも通りブログカスタマイズをしようと思って、ブログ名とブログ説明文を非表示にしたことがあります。でもちょっと待てよ、この部分って意外と重要なんじゃない？って気付いたので、どのような重要性があるのか見てみたいと思います。

「 h1 」タグが指定してある

「 h1 」タグって何？

STINGER5 のブログ説明文には h1 タグが指定してあるのですが、まずはこの h タグとは何なのか説明しておきます。ブログを書くなら絶対に知っておいた方がいい HTML タグのひとつ、見出しという意味を持つ「 h 」タグですが、SEO 対策や読みやすさの向上などでメリットがあります。

このページはどんなページなのか？を訪問者と検索エンジンに説明する役割がありますが、その中でも最も重要なのが「 h1 」タグになります。ではこの見出しタグはどのように使えばいいのでしょうか？

「 h 」タグの使い方

1. 見出しとして使う

見出しタグと言うように見出しとして使います。ご覧いただいてるこのページではブログタイトルが h1、青い吹き出しが h2、下線を引いたのが h3、太字で青いラインが h4 というような使い方をしています。

2. 使えるのは h1 ～ h6 まで

キャリコでは h3 までを常用していますが、たまに h4 を使用するくらいで h5、h6 を使うことは滅多にありません。この中で一番重要度の高いものが h1 となり数字が大きくなるごとに重要度は下がります。

3. h1 → h2 → h3 と順番に使う

これは語弊があると困るのでいくつか例を挙げます。

OK

h1 → h2 → h3 → h4 → h5 → h6
h1 → h2 → h2 → h3 → h3 → h3
h1 → h2 → h3 → h3 → h4 → h4
h1 → h2 → h3 → h2 → h3 → h4

NG

h1 → h3 → h5 → h6
h1 → h4 → h5 → h5
h1 → h2 → h3 → h6
h1 → h2 → h1 → h2 → h3

このように数字を飛び越えて使うのではなく順番を守る必要があります。デザイン上の問題で h2、h3 タグを使わずに h4、h5 タグを使うのは止めましょう。でも NG の一番下の例は問題ないんじゃないの？って疑問を抱いた方は次の使い方を見てください。

4. h1 は基本的に1ページ1つまで

NG の一番下の例は h1 を2つ使用してることからルール違反になってしまいます。ただし HTML5 では複数あっても大丈夫ですが、原則として section タグの中に記述する必要があります。h2 以下のタグに関してはいくつ使っても平気ですが、やはり使い過ぎには注意しましょう。

STINGER5 ではトップページの説明文にだけ h1 タグ

ここで本題に入りますが STINGER5 のブログ説明文は h1 タグが指定してあると冒頭で述べました。しかしこのページでは記事タイトルに h1 が使用されてるということで、基本的に h1 タグは1ページに1つなのにどうして？って思うかもしれません。

STINGER5 の場合ブログ説明文に h1 タグを使用してるのはトップページのみで、記事ページではきちんと「 p 」タグになるという仕様になっています。ではトップページのブログ説明文はどうすればいいのか？考えてみましょう。

ブログ説明文の重要性について

非表示にすることで考えられる不都合

訪問者と検索エンジンに優しくない

トップページに h1 タグが指定されてないと、内容を読んでどのようなブログなのか把握する必要があるため、訪問者にとっても検索エンジンにとっても親切ではなくなってしまいます。

h タグの順番を守っていない

h1 タグがないことで h2 タグから始まってしまうことになります。使い方の 2 で説明したように数字を飛び越して使ってしまうと構造上よくありません。

どうするのがいいのか？

もし非表示にするのであれば新たに h1 タグを指定しましょう。キャリコの場合は STINGER5 らしさを残したかったので現状維持という選択をしましたが、h1 タグは見出しタグの中で最も重要だという説明はしましたよね。なので内容を少しだけ変えました。

• 徒然なるままに綴る個人ブログです。
• 　↓
• WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

このようにブログの説明をより詳しくして訪問者と検索エンジンに優しい内容にしました。この影響かどうかはわかりませんが… 先日まで「 STINGER5 」で検索すると1ページ目と2ページ目をうろうろしてたのが、6番目に表示されるようになりました。

「 STINGER5 」で検索したら1ページ目に表示されるようになった要因を考察

いよいよ帰国日が決まりました、キャリコ（ @calicocatxyz ）です。 …

calico.xyz

以上のことから h1 タグが指定してあるブログ説明文は重要だと考えられるわけですが、ここまで考えたのですからもうひとつ気になる話題を提供します。

STINGER5 のトップページには「 h2 」タグが存在しない

ブログ説明文を非表示にしたことで気が付いたことなのですが、STINGER5 のトップページには「 h2 」タグが使われていないのです。理由はわからないけど気持ち悪かったからキャリコでは h2 タグを指定しました。

トップページを見てもらえればわかるのですが「 記事一覧 」という部分です。でもこの指定をするにはひとつ気をつけなければならないことがあります。それはアーカイブでも表示されてしまうので条件分岐でトップページにだけ指定しなければならない点です。

WordPress 初心者は必見！誰でもわかる「 条件分岐 」の超入門編

WordPress を使うようになってから PHP を扱うようになったキャリコ（ …

calico.xyz

この記事を参考にしてもらえれば指定方法はわかると思うのですが、コピペで同じことが出来るようにソースも公開しておきます。

これを itiran.php の表示させたい場所に追記するだけです。以上！

まとめ

STINGER5 のブログ説明文の重要性についておわかりいただけましたでしょうか？非表示にする場合には h1 タグに気を付けてカスタマイズするのがいいと思います。ではでは、、

いきなりできます！最新ホームページ作り＆HTML超入門　第2版

株式会社デジカル

ライター紹介

キャリコ　統括、ライターの猫たちを束ねるボス

キャリコの創設者であり、助手には書けないようなネタをお届けします。