キャリコ

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

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

      2014/11/22

1

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

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

Ads by Google

「 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 」タグになるという仕様になっています。ではトップページのブログ説明文はどうすればいいのか?考えてみましょう。

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

2

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

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

トップページに 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 タグに気を付けてカスタマイズするのがいいと思います。ではでは、、

ライター紹介

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

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

 - STINGER5

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …

1
STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法

絶賛求職中のキャリコ( @calicocatxyz )です。 就職難なんて言葉ど …

1
キャリコの誰にも気づかれないこっそり自己満足カスタマイズ

いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …

これでスッキリ!コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

ハニーナッツクランチにハマってるキャリコ( @calicocatxyz )です。 …

Photo credit : instagram, muradosmann
STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法

Instagram デビュー迷い中のキャリコ( @calicocatxyz )で …

STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する

○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …

STINGER5 でアドセンスを記事内に導入するときの注意点

アドセンスの最適なレイアウトを導入したキャリコ( @calicocatxyz ) …

STINGER5 で CSS をカスタマイズ可能にする子テーマの作成

病院で出される食事が日本食で驚いてるキャリコ( @calicocatxyz )で …

猫画像なら負けませんw
これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

イビサの夏が恋しいキャリコ( @calicocatxyz )です。 EDM を聴 …