第19回 タグ一覧を件数順に変更―上位50件表示、/tags/のnoindex、連載番号の表示修正

第18回では、WEB制作・AI・開発支援の説明文を追加し、記事一覧・タグ・連載ページに残っていた重複ナビゲーションを削除した。

そのあとタグ一覧を見直すと、タグ自体の重複は解消しているものの、数が増えて一覧が長くなっていた。

修正前のタグ総数は52件。1記事だけで使っているタグも多く、タグを追加するたびに一覧が横へ広がっていく状態になっている。

今回はタグを削除せず、表示方法だけを変更する。あわせて/tags/自体のnoindexと、連載記事末尾に表示している番号も見直した。

タグ一覧を記事件数の多い順に変更する#

これまでのタグ一覧はラベル順で並んでいた。

タグが少ないうちはこれでも確認しやすいが、52件まで増えると、よく使っているタグと1記事だけのタグが同じ優先度で並ぶ。

今回はタグの用途を変えず、記事件数の多い順に並べるようにした。

集計と並び替えはsrc/utils/posts.ts側で行っている。タグの正規化、canonical ID、alias、URL生成は第16回で追加した仕組みをそのまま使い、一覧へ渡す順序だけを変更した。

現在の上位は次のようになった。

タグ	記事件数
Astro	21件
Web制作	9件
Cloudflare Workers	8件
UI	5件
トラブル対応	5件
記事分類	5件
Frontmatter	4件
Webデザイン	4件
コーディング	4件
サイト運用	4件

修正後は、タグ一覧を開いたときに使われている回数の多いタグから確認できる。

今回の修正は、1記事タグを消すものではない。

aboutやh1、パンくずなど、現在1記事だけで使われているタグもデータとして残している。今後記事が増えて同じタグが使われれば、その件数に応じて表示位置も変わる。

通常表示は上位50件までにする#

並び順の変更とあわせて、タグ一覧で通常表示する件数を50件にした。

初期表示数はTaxonomyBrowse.astro側で50件として管理している。

1～50件目
→ 通常表示

51件目以降
→ 展開領域

今回のタグ総数は52件なので、通常表示は50件、残り2件が展開側に入る。

現在51件目以降に入るのは、正規化と独自ドメインの2件になる。

展開UIにはJavaScriptを追加せず、HTMLのdetailsとsummaryを使用した。

<details>
  <summary>すべて表示（2タグ）</summary>
  <!-- 51件目以降のタグ -->
</details>

この方法なら、JavaScriptが無効でもそのまま開閉できる。タグリンク自体も通常のリンクのまま維持できる。

現時点では折りたたまれるのは2件だけだが、今後タグが増えても初期表示は50件のままになる。タグ一覧全体を削るのではなく、増えた分だけ下へ格納する形にした。

/tags/もnoindexに変更する#

個別タグページには以前からnoindex, followを設定していた。

一方、タグ一覧の/tags/は検索対象のまま残っていた。

現在の/tags/は、タグ名と件数から目的の記事へ移動するためのサイト内導線として使っている。今回はこの役割は残しつつ、検索結果へ出す対象からは外すことにした。

src/pages/tags/index.astroでnoindex, followを指定し、生成HTMLでは次のmetaが出るようになった。

<meta name="robots" content="noindex, follow">

canonicalは変更せず、https://bringain.com/tags/のまま維持している。

サイトマップ側も確認し、/tags/と個別タグURLを除外するようastro.config.mjsの条件を変更した。

個別タグページについては、これまでのnoindex, followをそのまま維持している。タグのURLやaliasも変更していない。

タイトルの第16回と末尾の第17回がずれていた#

タグ一覧とは別に、連載記事の末尾でも表示を1か所変更した。

第16回の記事タイトルは、読者向けにはそのまま「第16回」と表示している。

ただし記事末尾では、同じ記事が次のように表示されていた。

連載：Astro＋Cloudflareでサイトを作る・第17回

この違いは、タイトルの連載番号とseriesOrderを別に管理しているために発生する。

途中に番外編が1記事入っているため、第16回の記事は内部順序ではseriesOrder: 17になる。並び順としてはこの値で合っているので、FrontmatterのseriesOrderを16へ変更すると、今度は連載全体の順序が崩れる。

そこで内部順序は触らず、記事末尾でseriesOrderを「第○回」として表示する処理だけ削除した。

修正後は次の表示だけになる。

連載：Astro＋Cloudflareでサイトを作る

変更したのはArticleLayout.astroの表示部分だけで、記事タイトル、seriesOrder、前後記事リンク、連載一覧の並び順には手を入れていない。

第16回の記事もseriesOrder: 17のまま残っている。

ビルドと各画面を確認する#

変更後にnpm run buildを実行した。

結果は成功し、99ページを生成。Pagefindは27ページ、2,784語をインデックス化した。

既存の検証スクリプトも実行している。

npm run build
node scripts/verify.mjs
node .astro/browser-current.mjs

verify.mjsはPASS。ブラウザ確認は320px、360px、390px、768px、1280pxで行い、タグの折り返し、展開UI、記事末尾の連載表示で横スクロールが発生しないことを確認した。

RSS、サイト内検索、sitemap、パンくず、前後記事リンクも確認している。

今回追加したnpmパッケージはなく、package.jsonも変更していない。

既存の未登録タグ警告は残っているが、今回の変更による新しいエラーは出ていない。

タグ一覧・noindex・連載表示の変更点#

タグ一覧は、52件のタグをそのまま残しつつ、記事件数の多い順へ変更した。

通常表示は上位50件までとし、51件目以降はdetails / summaryで開けるようにしている。現在は正規化と独自ドメインの2件が展開側に入る。

/tags/にはnoindex, followを設定し、canonicalは維持。サイトマップからは/tags/と個別タグURLを除外した。

連載記事については、seriesOrderを内部の並び順として残し、記事末尾では番号を表示しないようにした。これで番外編を含む内部順序と、読者向けの「第○回」を無理に同じ数字として扱わずに済む。