はじめに
このサイトはAstro（静的サイトジェネレーター）を使って構築したIT用語辞典サイトです。WordPressから移行して間もない状態だったこともあり、コードの品質・SEO・UX面でいくつか問題が残っていました。
今回はサイト全体のファイルを精査し、20以上の改善を実施しました。その記録をまとめておきます。
修正内容一覧
1. auto-link.js のパス問題と複数キーワード対応
マークダウン本文中のキーワードを自動的にリンクへ変換するプラグインに2つの問題がありました。
1つ目は、fs.readFileSync(“scripts/dictionary-map.json”) のようにハードコードされたパスを使っていたことです。実行環境によってはパスが解決できずにエラーになる可能性があったため、import.meta.url をベースにした絶対パスへ変更しました。
2つ目は、同一テキストノード内に複数のキーワードが含まれていても最初の1件しかリンクされない問題でした。出現位置でソートして重複しない範囲のものをすべてリンク化する処理に書き直しました。
また dictionary-map.json の構造が { id: { url, keywords: [] } } という形式だったのに対し、プラグインが { キーワード: URL } のフラット形式を想定して書かれており、ビルドエラーの原因にもなっていました。読み込み時にフラット形式へ変換する処理を追加して解決しました。
2. 未使用コンポーネントの整理
DictionaryLayout.astro がどこからも使われておらず、しかもスキーマに存在しないフィールドを参照していたため削除しました。
Footer.astro も存在していたにもかかわらず Layout.astro のフッターがインラインで書かれていたため、Footer.astro をコンポーネントとして組み込む形に統一しました。
3. OGP・Twitter Cardの追加
Layout.astro の
4. 未整備コンテンツの管理
cleanup.mjs というスクリプトが definition フィールドの有無でファイルを自動的に status: draft に戻す処理をしていました。しかし definition はスキーマに存在しないフィールドだったため、このチェックを削除しました。
各コンテンツファイルは現在 status: draft の状態で管理しており、本文を整備したものから順次 status: published に変更していく運用にしています。
5. taxonomy の型安全化
taxonomy フィールドが z.array(z.string()) だったためタイポを検知できませんでした。src/content/taxonomy/ にコレクションを定義し、z.array(reference(“taxonomy”)) へ変更することでビルド時にバリデーションが効くようになりました。
6. パンくずリストのNDCコード問題
ndc.path の各要素が “0（総記）” “007（情報科学）” のように日本語括弧つきの形式でした。pathName.split(” “)[0] でコード部分を取り出そうとしていましたが、スペースがないため分割できず、URL生成が崩れていました。
正規表現 /^(\d+)/ で数字部分だけを抽出するよう修正しました。dictionary/[id].astro・articles/[id].astro・ndc/[code].astro の3ファイルで同様の修正を行いました。
また ndc/[code].astro ではNDCの桁数を利用して親カテゴリを祖先として収集し、パンくずに階層を反映させました。例えば 007（情報科学） のページでは トップ ＞ 0（総記） ＞ 00（総記） ＞ 007（情報科学） と表示されるようになっています。
7. 外部リンクとrel属性
外部リンクの rel 属性が noopener のみで noreferrer が抜けていたため追加しました。
8. generate-link-map.mjs の修正
[[ID]] 記法で用語間リンクを張る機能がありますが、data.id というフロントマターに存在しないフィールドを参照していたためマップが常に空でした。ファイル名をIDとして使うよう修正し、link-map.json が正しく生成されるようになりました。
9. ndc/[code].astro のデザイン統一
NDCカテゴリ一覧ページがインラインスタイルだらけで他のページとデザインが乖離していました。