第18回 カテゴリ説明を追加しArchiveページの重複ナビを削除

第17回では、お問い合わせページを実際に連絡できる状態へ変更し、プライバシーポリシーのGoogle AdSense部分へ説明を追加した。

同じ修正作業で、カテゴリページとArchive系ページも見直している。

カテゴリはすでに記事分類として機能していたが、ページ上部の説明はかなり短かった。

AIカテゴリは次の1文だけ。

AIの記事をまとめています。

開発支援も同じ形式になっていた。

開発支援の記事をまとめています。

記事一覧としては成立している。ただ、そのカテゴリに何が入っているのかはタイトルを見ただけでは分かりにくい。

もう1つ、記事一覧・タグ・連載ページには、ヘッダーにあるものと同じナビゲーションが本文側にも残っていた。

今回はこの2点を修正する。

カテゴリ説明をページ側で作る方式をやめる#

修正前はtaxonomy側にカテゴリ説明の定義がなく、カテゴリ詳細ページで表示名を使って文章を生成していた。

考え方としては次の形になる。

表示名：AI
↓
AI + 「の記事をまとめています。」
↓
AIの記事をまとめています。

この方式なら新しいカテゴリを増やしても最低限の説明は出せる。ただ、カテゴリごとの内容までは表せない。

WEB制作にはAstroの初期構築、Cloudflare Workersへの公開、デザイン・UI、運用中の修正が入っている。

AIにはモデルの公式情報調査や比較の記事があり、その下の開発支援にはコード生成、作業委任、モデルの使い分けに関する記事がある。

同じテンプレート文では、この違いが説明に出てこない。

そこで説明文をtaxonomy.ts側へ追加し、カテゴリ詳細ページから参照する形に変更した。

表示名やURLと同じく、説明もtaxonomyの定義側で管理する。

WEB制作・AI・開発支援の説明を追加する#

WEB制作は次の説明へ変更した。

Astroを使ったサイトの初期構築からCloudflare Workersへの公開、デザイン・UIの修正まで、ゆまラボを作る過程を記録しています。運用中に起きたトラブルと、その解決・改善の内容もまとめています。

現在のWEB制作カテゴリには21件の記事があり、初期構築、デプロイ・インフラ、デザイン・UI、運用・改善に分かれている。

ページ上部の説明でも、その分類と記事内容が分かるようになった。

AIは次の内容へ変更した。

AIモデルの公式情報を調べ、特徴やモデルごとの違いを開発者の視点で整理しています。コード生成や長時間の作業など、開発でどのような仕事を任せられるかを考えます。

修正前の「AIの記事をまとめています。」より、現在置いている記事の方向が分かりやすい。

開発支援は次の説明にした。

AIによるコード生成やリファクタリング、調査・実装・テストを含む作業の委任について、公式情報をもとに整理しています。モデルを比較しながら、開発作業での使い分けを考えます。

今回はまず、WEB制作・AI・開発支援を対象にした。ほかのサブカテゴリにも短い説明のまま残っているものがあるので、掲載記事の内容を確認しながら順次変更していく。説明だけを先に増やすのではなく、記事が増えた段階で、そのサブカテゴリで実際に扱っている内容に合わせて追加・修正する。

説明を追加するためにカテゴリIDやURLは変更していない。

WEB制作       web-development
AI            ai
開発支援       ai/development-support

既存の分類へ説明文だけを持たせている。

説明文はmeta descriptionにも反映する#

カテゴリ詳細ページは、taxonomy.tsから説明を取得するように変更した。

この変更によって、画面上の本文だけでなく生成HTMLのmeta descriptionにも同じ内容が反映されることを確認している。

ページ本文用とmeta用は同じtaxonomy定義を使う。似た文章を二重管理しない。

カテゴリ名や説明をあとから変更する場合も、定義側を見ればよい。

今回のように記事数が増えたあとで説明を書き換える場合は、カテゴリごとの実際の記事内容を見ながら変更できる。

存在しない記事テーマを先回りして説明へ入れることはせず、現在掲載している内容を基準にしている。

記事一覧には同じナビゲーションが2回出ていた#

もう1つ修正したのがArchive系ページのナビゲーション。

修正前の記事一覧では、ヘッダーに

記事一覧  カテゴリ  連載  タグ

がある一方で、本文の先頭にも同じ4リンクが表示されていた。

これは以前、カテゴリページでは先に削除していた。

そのときはArchiveLayout.astroにshowNavを追加し、カテゴリだけfalseにしていた。今回は記事一覧、タグ、連載も確認し、本文側の補助ナビ自体が不要かをもう一度確認した。

スマホ表示も含めて調べると、共通ヘッダーのリンクは320px、360px、390pxでも利用できる。狭い画面では折り返して表示されるため、本文側の4リンクを消してもArchiveページへ移動する手段は残る。

そこで今回は個別にshowNav=falseを増やすのではなく、ArchiveLayout.astroから重複ナビそのものを削除した。

archive-navとshowNavも削除する#

本文側のリンクだけをCSSで隠す方法にはしていない。

今後使わないことを確認したうえで、次を削除した。

archive-nav のマークアップ
archive-nav 専用CSS
showNav プロパティ
showNav の初期値
カテゴリページ側の showNav={false} 指定

カテゴリだけ非表示、記事一覧は表示、タグは表示という条件分岐を残す必要がなくなった。

修正後の記事一覧は、ヘッダーの下からそのままページタイトルへ進む。

記事数や説明文、記事カードには手を入れていない。

タグと連載ページも同じ構造にする#

タグ一覧にも同じ4リンクが表示されていた。

修正後は本文側のリンクがなくなり、ヘッダーとタグ一覧だけになった。

第16回で追加したタグマスタやalias、正規化処理には変更を入れていない。

タグ一覧の件数や個別タグページのnoindex, followもそのまま維持している。

連載一覧も同じ。

修正前は、ページ上部に本文側の4リンクがあり、その下に「Astro＋Cloudflareでサイトを作る」が表示されていた。

修正後はヘッダーのナビを残し、本文側では連載一覧から始まる。

この修正で共通ヘッダー自体は変更していない。

変更後のArchive系ページを確認する#

今回変更したファイルは、カテゴリ説明とArchiveナビに関係する部分だけでなく、お問い合わせ・プライバシーポリシーを含めて7ファイルになった。

この回に関係する主な変更は次の4つ。

src/data/taxonomy.ts
src/pages/category/[...path].astro
src/pages/category/index.astro
src/layouts/ArchiveLayout.astro

既存の検証スクリプトverify.mjsも、以前の「重複ナビが存在する」ことを前提にしたチェックから、現在の仕様に合わせて更新している。

最終確認では、以下の状態になった。

npm run build                成功
生成ページ                    94ページ
Pagefind                      24記事を索引化
node scripts/verify.mjs       成功
git diff --check              成功

PC 1280pxと768px、スマホ320px・360px・390pxでナビゲーションも確認している。

site map.xml、RSS、サイト内検索、パンくずJSON-LD、前後記事、目次、個別タグのnoindexなども既存の状態を維持した。

途中では検証用コマンドの引用符や文字コード、Astroが生成するHTML属性、キーボード操作の再現方法で検証エラーが出たが、サイト側の機能エラーではなく検証処理側を修正している。最終実行はすべて成功した。

taxonomyとアーカイブ導線の変更点#

カテゴリページの説明は、表示名から自動生成する1文をやめ、taxonomy側でカテゴリごとに持つ。

WEB制作・AI・開発支援は、現在掲載している記事の内容がページ上部から分かるようになった。

Archive系ページについては、ヘッダーと本文に重複していたナビゲーションを削除した。スマホでもヘッダーのリンクが利用できることを確認してから、archive-navとshowNavのコードも削除している。

記事が増えるにつれてカテゴリや一覧ページも独立した入口として使う機会が増える。今回は、その入口側の説明と導線を変更した。