キャリコおすすめ
本日の人気記事
- 忍者 AdMax が Google AdSense よりも稼げる理由
- 【 ドレッドヘアのお手入れ方法 】よく聞かれる7つの質問にお答えします
- 缶詰ができて48年後に缶切りが発明されるという衝撃の事実w
- ソフトバンクの157で即オペレーターにつなぐ方法
- SimCity BuildIt(シムシティ ビルドイット)の美しい街の景観30選
- わずか1分28秒でハッキング可能!Wi-Fi 自動接続してるスマホは格好のカモ
- LAN ケーブルを変えるだけで通信速度が速くなるのは本当なのか?
- iPhone のテザリングでデスクトップパソコンをインターネットに接続する方法
- エスニックファッションの激安通販サイトまとめ
- 次の13日の金曜日はいつ?2016年から20年先までの一覧
STINGER5 のブログ説明文の重要性について
2014/11/22
誰にも気づかれない自己満足カスタマイズ続行中のキャリコ( @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 」タグになるという仕様になっています。ではトップページのブログ説明文はどうすればいいのか?考えてみましょう。
ブログ説明文の重要性について
非表示にすることで考えられる不都合
訪問者と検索エンジンに優しくない
トップページに h1 タグが指定されてないと、内容を読んでどのようなブログなのか把握する必要があるため、訪問者にとっても検索エンジンにとっても親切ではなくなってしまいます。
h タグの順番を守っていない
h1 タグがないことで h2 タグから始まってしまうことになります。使い方の 2 で説明したように数字を飛び越して使ってしまうと構造上よくありません。
どうするのがいいのか?
もし非表示にするのであれば新たに h1 タグを指定しましょう。キャリコの場合は STINGER5 らしさを残したかったので現状維持という選択をしましたが、h1 タグは見出しタグの中で最も重要だという説明はしましたよね。なので内容を少しだけ変えました。
- 徒然なるままに綴る個人ブログです。
- ↓
- WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。
このようにブログの説明をより詳しくして訪問者と検索エンジンに優しい内容にしました。この影響かどうかはわかりませんが… 先日まで「 STINGER5 」で検索すると1ページ目と2ページ目をうろうろしてたのが、6番目に表示されるようになりました。
以上のことから h1 タグが指定してあるブログ説明文は重要だと考えられるわけですが、ここまで考えたのですからもうひとつ気になる話題を提供します。
STINGER5 のトップページには「 h2 」タグが存在しない
ブログ説明文を非表示にしたことで気が付いたことなのですが、STINGER5 のトップページには「 h2 」タグが使われていないのです。理由はわからないけど気持ち悪かったからキャリコでは h2 タグを指定しました。
トップページを見てもらえればわかるのですが「 記事一覧 」という部分です。でもこの指定をするにはひとつ気をつけなければならないことがあります。それはアーカイブでも表示されてしまうので条件分岐でトップページにだけ指定しなければならない点です。
この記事を参考にしてもらえれば指定方法はわかると思うのですが、コピペで同じことが出来るようにソースも公開しておきます。
1 2 3 |
<?php if (is_front_page()) :?> <h2>記事一覧</h2> <?php endif;?> |
これを itiran.php の表示させたい場所に追記するだけです。以上!
まとめ
STINGER5 のブログ説明文の重要性についておわかりいただけましたでしょうか?非表示にする場合には h1 タグに気を付けてカスタマイズするのがいいと思います。ではでは、、
この記事が気に入ったら
いいね!しよう
キャリコの最新情報をお届けします
Twitter でキャリコをフォローしよう!
おすすめ記事
【キ】 アドセンス用336px
【キ】 アドセンス用336px
関連記事
-
-
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …
-
-
STINGER5 にアドセンスを入れると、スマホのみ右に寄ってしまう現象の応急処置
旅ブログ移行中のキャリコ( @calicocatxyz )です。 約400ページ …
-
-
キャリコのこれはさすがに気づかれる自己満足カスタマイズ
もうないかなって思ったけど意外とすぐの更新、キャリコ( @calicocatxy …
-
-
STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法
STINGER5 も納得の形までもう少し、キャリコ( @calicocatxyz …
-
-
STINGER5 の誰にも気づかれない自己満足カスタマイズ
Hello, キャリコ( @calicocatxyz )です。 そろそろ STI …
-
-
STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法
Instagram デビュー迷い中のキャリコ( @calicocatxyz )で …
-
-
STINGER5 の新着記事をトップページだけ非表示にする方法
イギリスの寒さが厳しくなってきました、キャリコ( @calicocatxyz ) …
-
-
STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する
○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …
-
-
キャリコの誰にも気づかれないこっそり自己満足カスタマイズ
いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …
-
-
キャリコの誰にも気づかれない3つの自己満足カスタマイズ
STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …