【コピペOK】はてなブログのカテゴリをHTMLで階層化！回遊性とSEO効果を高めるカスタマイズ術

はてなブログのカテゴリ、階層化できなくて困っていませんか？
なぜカテゴリの階層化がSEOに有効なのか？
- 1. ユーザーの利便性（回遊性）が向上する
- 2. サイト構造が検索エンジンに伝わりやすくなる
【実践】HTMLモジュールで階層カテゴリを作成する3ステップ
【応用編】CSSで見た目を整えよう
まとめ

はてなブログのカテゴリ、階層化できなくて困っていませんか？

こんにちは、「Compass note」を運営している私です。

ブログに記事が増えてくると、カテゴリを整理して読者が目的の記事を見つけやすいようにしたいと考えますよね。特に、大きなテーマの中に小さなテーマがある場合、「親子関係のある階層構造でカテゴリを管理したい」と思うのは自然なことです。

しかし、ご存知の通り、はてなブログの標準機能ではカテゴリの階層化ができません。

すべてのカテゴリが並列に並んでしまうため、記事が増えれば増えるほど、サイドバーが長くなり、読者にとってはごちゃごちゃして見えてしまいます。これは、読者のサイト内での回遊性を下げるだけでなく、検索エンジンがサイトの構造を理解しにくくなるため、SEOの観点からもマイナスに働く可能性があります。

でも、ご安心ください。今回は、この悩みを解決するために、サイドバーの「HTMLモジュール」を使って、見た目上カテゴリを階層化する方法を分かりやすく解説します。コピペで使えるコードも用意したので、初心者の方でも簡単に実装できますよ。

なぜカテゴリの階層化がSEOに有効なのか？

本題に入る前に、なぜカテゴリの階層化が重要なのかを少しだけお話しします。

1. ユーザーの利便性（回遊性）が向上する

カテゴリが整理され、階層構造になっていると、読者は「このブログには、どんなトピックの記事が、どれくらいあるのか」を直感的に把握できます。

例えば、「ガジェット」という親カテゴリの下に「PC」「スマートフォン」「イヤホン」という子カテゴリがあれば、読者は興味のある分野の記事を簡単に見つけられますよね。

これにより、読者は次々に他の記事も読んでくれるようになり、サイト内の回遊性が向上します。結果として、一人あたりのページビュー数や滞在時間が増え、Googleからの評価も高まりやすくなります。

2. サイト構造が検索エンジンに伝わりやすくなる

適切に構造化されたカテゴリは、検索エンジンのクローラーに対して「このサイトは、こういうテーマについて専門的に扱っていますよ」と伝える道しるべの役割を果たします。

サイトのテーマや専門性が正しく伝わることで、関連キーワードでの検索順位向上につながり、結果としてブログ全体のSEO評価を高めることができるのです。

【実践】HTMLモジュールで階層カテゴリを作成する3ステップ

それでは、実際にHTMLモジュールを使って階層化されたカテゴリメニューを作成していきましょう。手順はとても簡単です。

ステップ1：カテゴリを作成する

まずは、はてなブログの管理画面から通常通りカテゴリを作成します。この時点では、親子関係は意識せず、必要なカテゴリをすべてフラットに作成してください。

作成例： * IT技術 * プログラミング * Python * JavaScript * ガジェット * 書評

ステップ2：サイドバーに「HTMLモジュール」を追加する

次に、サイドバーにHTMLを書き込むための「モジュール」を追加します。

管理画面のメニューから [デザイン] をクリックします。
表示された画面でスパナのアイコン [カスタマイズ] をクリックします。
[サイドバー] をクリックし、[モジュールを追加] を選択します。
一覧の中から [HTML] を選び、追加します。

ステップ3：HTMLコードを貼り付けて編集する

追加したHTMLモジュールの入力欄に、以下のコードをコピー＆ペーストします。

</div>
<div class="hatena-module-body">
  <ul>
    <li><a href="/archive/category/IT技術">IT技術</a>
      <ul>
        <li><a href="/archive/category/プログラミング">└ プログラミング</a>
          <ul>
            <li><a href="/archive/category/Python">└ Python</a></li>
            <li><a href="/archive/category/JavaScript">└ JavaScript</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="/archive/category/ガジェット">ガジェット</a></li>
    <li><a href="/archive/category/書評">書評</a></li>
  </ul>
</div>

貼り付けたら、あなたのブログに合わせて2つの点を編集します。

カテゴリ名: >カテゴリ名< の部分を、ご自身で作成したカテゴリ名に書き換えます。（例：>IT技術<）
カテゴリページのURL: href="/archive/category/カテゴリ名" の カテゴリ名 の部分を、対応するカテゴリのURLに使われている文字列に書き換えます。

【重要】カテゴリURLの確認方法

カテゴリのURLは、実際にカテゴリページを表示して確認するのが確実です。例えば、「プログラミング」というカテゴリのURLが https://compass-note.hatenablog.com/archive/category/プログラミング だった場合、コードに記述するのは /archive/category/プログラミング となります。

日本語のカテゴリ名は、URLではエンコードされた文字列（例: %E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0）になっていることがありますが、日本語のままで記述して問題ありません。

編集が終わったら、忘れずに「適用」ボタンを押して変更を保存しましょう。これで、あなたのブログのサイドバーに、階層化されたカテゴリメニューが表示されているはずです！

【応用編】CSSで見た目を整えよう

HTMLを設置しただけだと、少し見た目が寂しいかもしれません。そんな時はCSSを使ってデザインを調整しましょう。

管理画面の [デザイン] > [カスタマイズ] > [デザインCSS] に以下のコードを追記すると、子カテゴリが少し字下げ（インデント）されて、より階層が分かりやすくなります。

/*--- サイドバーの階層化カテゴリ ---*/
.hatena-module-body ul ul {
  margin-left: 1.2em; /* 字下げの幅を調整 */
}

margin-left の数値を変更すれば、インデントの幅を自由に変えられます。ぜひ、あなたのブログデザインに合わせて調整してみてください。

まとめ

今回は、はてなブログでカテゴリを階層化し、SEO効果を高めるためのHTMLカスタマイズ術をご紹介しました。

この記事のポイント

はてなブログの標準機能ではカテゴリは階層化できない。
サイドバーのHTMLモジュールを使えば、擬似的に階層メニューを作成できる。
カテゴリの階層化は、ユーザーの回遊性を高め、SEO評価の向上にもつながる。

ブログの記事が増えてきたら、読者のためにも、検索エンジンのためにも、ぜひカテゴリの整理に挑戦してみてください。サイト全体の評価が上がり、アクセスアップにつながるはずです。

Compass note

未踏の地へ踏み出すコンパス的エンジニアノート

Compass Note｜ITエンジニアの羅針盤

【コピペOK】はてなブログのカテゴリをHTMLで階層化！SEO効果を高めるカスタマイズ術