ゆるりとねっと。

ヲタクなワーママのゆるゆる雑記ブログ

ゆるりとねっと。

ブログカテゴリの整理とパンくずリスト階層化をしてみました

f:id:tomo-sankaku:20180524213922p:plain:w400

雑記ブログあるあるかもしれませんが、記事増加に伴いカテゴリが乱立してきたので整理することにしました。

はてなブログのカテゴリ管理で困っていたこと

タグが無いのでカテゴリをタグ的に使うかどうかで悩む

私のInstagramはひたすらマイコレクションを載せているのですが、タグ検索で見てもらえるように「作品名」「キャラクター名」「商品名」は必ずタグ付けをしています。しかし、はてなブログではタグに相当するものが無いので、カテゴリで代用*1することになります。

ブログ立ち上げ時、カテゴリはちゃんと考えなければと思っていました。しかし、記事のカテゴリは「レビュー」でも、レビュー対象が「プリキュア」のおもちゃだったりすると、「プリキュア」もカテゴリにしたくなります。こうしてカテゴリが増えていきます。

似かよったカテゴリが複数出てきた

タグ検索機能がないのでInstagramほど多くつけてはいないものの、複数カテゴリを設定していくと似かよったカテゴリが増えてきます。

1記事しかなく今後も記事がつかなそうな余分なカテゴリは、たまにそっと削除していました。

ですが、「プリキュア」「HUGっと!プリキュア」のようにどちらも欲しい場合がどうしても出てきました。

デフォルトの設定ではカテゴリの階層化ができない

パンくずで薄々気づいてはいたのですが、

トップ>(カテゴリ)>(記事)

という風に、カテゴリは全てトップからの構造になっています。

先程の「プリキュア」の例ですと、プリキュアシリーズの意なので「プリキュア」は親、その中の1作品なので「HUGっと!プリキュア」は子にしたいところですが、デフォルトでは以下のような構造はできません。。

トップ>(親カテゴリ)>(子カテゴリ)>(記事)

調べるとjs,cssの独自カスタマイズで擬似的に実現可能ですが、これだけ需要がありカスタマイズ方法に関する記事が溢れているにもかかわらず、公式は対応してくれないんですね…(ノД`)

カスタマイズは少し手間と時間が要るので、前々からしたかったカテゴリ名の見直しと共に準備に時間をかけ、作業は一気にエイヤで行いました*2

手順について、簡単にですがまとめておきます。

手順

準備編

クリック実績のあるカテゴリを確認しておく

整理の参考に、GoogleAnalyticsでPV上位カテゴリを調べておきました。
(下のキャプチャと異なりますが、GAの「行動」>「サイトコンテンツ」>「ディレクトリ」から/archive/category/の第3階層まで辿っても得られます。)

f:id:tomo-sankaku:20180523003451p:plain:w200

そもそもカテゴリ単位のPV総数が少ないですが、、「復職」「プリキュア」「リモートワーク」…このあたりは極力残す方向で検討します。

現状のカテゴリ分布を可視化

まだ全記事数がそこまで多くないので、縦軸を記事、横軸をカテゴリにして書き出してみました。

赤はパンくずにもなっているカテゴリ(以降「メインカテゴリ」)、黄色はその他複数指定されているカテゴリ(以降「サブカテゴリ」)です。はてなブログでは、1番最初に設定したカテゴリがその記事のメインカテゴリになるのですが、それに気づかず適当につけてしまっているパターンもありました。。

f:id:tomo-sankaku:20180523003514p:plain:w300

カテゴリの親子関係を整理

先程の表を元にして、親カテゴリと子カテゴリの構造を検討します。

親カテゴリはより一般的な(検索されやすい)語句にしたかったのでシンプルを目指しました。

f:id:tomo-sankaku:20180524005957p:plain

残したり、改称したり、消したり。割とサクサク進んだものの、メインである「仕事」「家事」「育児」の区分で少し悩みました。

例えば「ワーママ生活」というカテゴリ名を変えるかどうか。そして親カテゴリはどこなのか。結局「ワーママ」と改称し、「仕事」の下につけました。

f:id:tomo-sankaku:20180523003534p:plain:w800

このように親子を決めた上であらためて、記事毎にメインカテゴリ・サブカテゴリ決めをしていきました。

作業編

新しいタグを作成、振り直し

階層化に向けて、タグ名の変更をしました。 後述の参照記事に詳細載っていますが、親カテゴリはそのまま親カテゴリ名を、子カテゴリは「親カテゴリ-子カテゴリ」となるように変更します。

疑似階層化スクリプトを利用

結構有名なこちらのスクリプトを使わせていただきました。

www.du-soleil.com

コピペ1つであっという間に完成です。ありがとうございます!

サイドバーのカテゴリ表示をアレンジ

先ほどのスクリプトでサイドバーに親カテゴリのみ表示させる制御もできたのですが、個人的には親子が見えててほしかったので制御はかけませんでした。

でも、全出しは長ったらしいのでもう少し綺麗にしたい…(わがままw)

というわけで、こちらのスクリプトも一部*3使わせていただきました。

blog.wackwack.net

そうそう、こんな風にしたかった!ありがとうございます!

f:id:tomo-sankaku:20180523003810p:plain:w200

おわりに

今回、あらためて今までのカテゴリを整理し直して見通しがよくなった気がします。

先人たちのスクリプトのおかげで、それほど手間をかけずに階層化も実現できてよかったです。

あとはGoogle検索結果できちんと反映されるかどうか。

SearchConsoleのFetch as Googleでレンダリング結果を見る限り、ちゃんと認識してもらえてそうですが…

f:id:tomo-sankaku:20180524174028p:plain:w300

f:id:tomo-sankaku:20180524174158p:plain:w300

これでGoogleにどうクローリングしてもらえるか、様子を見ようと思います。

(追記) 設定して4~5日経つと、多くの記事でパンくずリストが変化してきました。満足w

before
f:id:tomo-sankaku:20180528113248p:plain:w700

after
f:id:tomo-sankaku:20180528111333p:plain:w700

*1:ブログ横断的なカテゴリ検索は無さそうなので、厳密には代用ではないですが。。

*2:スマホ版で手こずり合計2時間くらいかかりました

*3:最初はこのスクリプトだけを組み込んでいましたが、レスポンシブデザインではないテーマのせいなのか、スマホ版のパンくずリストだけ階層化できなかったため差し替えました。