Stingerカスタマイズ!迂闊に「説明文」を消しちゃダメ!アウトラインが崩れるぞ

公開日: : 最終更新日:2014/10/12 Stinger, Wordpress , ,

Stingerカスタマイズ!迂闊に「説明文」を消しちゃダメ!アウトラインが崩れるぞ

Stingerのカスタマイズ楽しんでますか?
カスタマイズ好きの方の中には「もう原型留めてないよ」という方も多いはず。もともとあった「サイトタイトル」や「説明文」をごっそり消している方をよく見かけます。

ただそんな方に要注意!
そのカスタマイズがStingerのアウトラインをぐちゃぐちゃにしているかもしれないんです!
今回はSTINGERでやってはいけないカスタマイズ、特にサイトの説明文を消してはいけない理由についてお話しします。

Sponsored Link

サイトのSEOとアウトライン

StingerシリーズはとにかくSEOに強いことで有名なテーマです。ブログページが検索上位に来るよう計算して作られています。
その中で今回問題となるのが「アウトライン」というモノです。

アウトラインってなに?

アウトラインはホームページの構造図。
検索順位を決めるロボットは僕達のようにサイトの外観を視覚的にみることはできないので、このアウトラインに沿ってサイトがどんな構造をしているのかを把握します。

検索上位を狙うならわかりやすいアウトラインは必須になってくるんですね。

アウトラインはhタグで出来ている

アウトラインはサイト内の「hタグ」からできていて、hタグにはh1〜h6の種類があります。それぞれの役割は

  • 「h1」→ 大見出し
  • 「h2」→ 中身出し
  • 「h3」→ 小見出し
  • という感じ。図で表すとこうなります。

    アウトライン構造

    ※実際にはhタグ以外も絡んできてこんなにカンタンなものではありません。詳しく知りたい方はこちらのページを参考にしてください
    【参考】はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ|Web Design RECIPES

    ひとまずここでは「h1が一番大きな見出し」ということさえわかってもらえればOKです。

    STINGERではどうなってるの?

    ではSTINGERのアウトラインがどうなっているのか見て行きましょう。STINGER3の場合トップページのアウトラインはこんな感じになっています。

    Stingerのアウトライン構造

    「サイトの説明文」が一番大きな見出しになっているんですね。
    これをとってしまうのは新聞から大見出しを無くすようなもの。検索ロボットからしたらとても見づらく、わかりにくくなってしまうんですね。
    なので絶対に説明文を消してはいけません

    ちなみにこのサイトではなにも意識せず説明文を全消去していたので、アウトラインはこうなっていました。

    これは!ログのアウトライン構造

    一番上の階層に記事タイトルがズラズラと。。見づらいですね。
    ちなみにトップページ以外では

  • 記事ページ → 「記事タイトル」
  • カテゴリページ → 「カテゴリ名」
  • が大見出しになっているので「説明文」はそれほど大きく影響しません。

    STINGER5の場合でもトップページでは「説明文」が一番大きな見出しになります。STINGER5のアウトライン構造はこちらのページでわかりやすく解説されているので参考にしてください。
    【参考】Stinger、Gush、Simplicity、Principleのアウトライン構造を比較してみた

    じゃあどうしたらいいの?

    一番いいのは「説明文」を消さないこと。
    また説明文以外にも「hタグ」が設定されている部分は迂闊に変えてはいけません。STINGER本来のアウトラインを崩さないことが大切です。

    「どうしても説明文を消したいんだ!」という場合には他の部分を忘れずh1に設定しておきましょう。
    僕の場合は説明文の代わりにロゴ画像をh1にしました。

    あとがき

    丹精込めてカスタマイズしたのに検索順位が下がってしまっては元も子もないですね。
    ある程度カスタマイズしたらアウトラインを確認する、というクセをつけましょう。

    最後まで読んでいただきありがとうございました。
    Jimon(@jimon_s)でした。

    jimon


     これは!と思ったらシェアして頂けると嬉しいです
    • このエントリーをはてなブックマークに追加
    • Pocket
    • 111 follow us in feedly
    Loading Facebook Comments ...

    Comment

    1. kuikui より:

      こちらのサイトが大変参考になり熟読させていただいてます。

      こちらの記事の説明文の削除について質問させていただきたいのですが

      上記の

      “「どうしても説明文を消したいんだ!」という場合には他の部分を忘れずh1に設定しておきましょう。
      僕の場合は説明文の代わりにロゴ画像をh1にしました。”

      とおっしゃられてますが具体的にどのようにすればいいのかわかりません。(泣)

      サイトタイトルと説明文を画像にしたいのですが、サイトタイトルは画像にできても

      説明文は画像にできません。

      どうかご教授願えますか?

      • Jimon より:

        コメントありがとうございます!
        説明文は<h1 class=”descr”></h1>と<p class=”descr”></p>の部分を画像に置き換えれば画像にできます。
        その際画像にaltタグで説明文を設定するようにしてください。

        • kuikui より:

          ご回答ありがとうございます。しかしながら、まだ理解できずにいます。(泣)申し訳ないです。

          <h1 class=”descr”></h1>と<p class=”descr”></p>の部分を画像に置き換えれば
          画像にできます。とおっしゃられていますが、

          <h1 class=”descr”></h1>と<p class=”descr”></p>の部分を

          に変更すれば良いということですか?

          現在はサイトタイトルの説明文は表示させたくない(フッター部分は良い)ので、(style.css)にはheader .descr {display: none;}と設定しております。

          しかし、(display:none;)と設定しているせいなのか、検索エンジンで自分のサイトタイトルを入力し、一覧で表示された時、サイトタイトルの下に表示されるはずのサイトタイトルの説明文が表示されません。

    Message

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    PROFILE

    Jimon Profile
    Jimon
    東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
    お問い合わせ

    About


    おしゃれな小物とiPhone,Macの情報発信ブログ。
    管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

    PAGE TOP ↑