タグページを整理する―noindex・サイトマップ除外から廃止まで

ゆまラボでタグ一覧・個別タグページを使い、noindex、サイトマップ除外、表示改善を試したあと、最終的にタグページを廃止した流れを記録します。お問い合わせ、プライバシーポリシー、免責事項への導線も扱います。

公開:更新:
タグページを整理する―noindex・サイトマップ除外から廃止まで

ブログの記事が増えると、タグは便利です。

「Astroの記事だけ読みたい」
「Cloudflareの記事を横断して探したい」

というとき、カテゴリより細かい単位で記事をまとめられます。

一方で実際に運用してみると、

「1記事しかないタグページが大量にできる」
「カテゴリやテーマ別まとめと役割が重なる」
「このページまでGoogleの検索結果へ出す必要があるのか」

という問題も出てきました。

ゆまラボでも最初はタグページを通常の導線として使っていました。

その後、個別タグページをnoindexにし、/tags/もnoindex、サイトマップからも除外しました。

さらに件数順表示や上位50件表示も試しました。

それでもサイト全体を整理すると、タグページを残すよりカテゴリとテーマ別まとめへ役割を集約した方が分かりやすいと判断し、最終的にはタグページそのものを廃止しました。

この記事では、タグページを作ってから廃止するまでに実際に試した変更を、時系列でまとめます。

最初はタグページをサイト内導線として使っていた#

当時のゆまラボにはタグ一覧があり、記事に付けたタグごとに件数を確認できた。

変更前のタグ一覧

タグを押すと、そのタグが付いた記事だけを一覧表示する個別ページへ移動できた。

例えばAstroのタグページなら、Astroに関係する記事だけをまとめて確認できる。

変更前のAstroタグページ

記事数が増えてくると、カテゴリ、サブカテゴリに加えて、もう少し細かいテーマから記事を探したくなる。タグはそのための導線として使いやすかった。

1記事だけのタグページが増えてきた#

ただ、タグ一覧を見ていると1件しか記事がないタグもかなりあった。

その状態で個別タグページまで検索結果へ出す必要があるかというと、当時のゆまラボではそこまで必要なさそうだった。検索から入ってもらうなら、個別の記事やカテゴリページの方が内容も分かりやすい。

まず個別タグページをnoindexにした#

対象にしたのは、次のような個別タグページだった。

/tags/astro/
/tags/ai-agent/
/tags/cloudflare-workers/

個別タグページでは、HTMLのheadへ次のrobots metaを出力するようにした。

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

実装後、ai-agentのタグページを開いてDevToolsから確認すると、robots metaが出力されていた。

個別タグページにnoindexが出力された状態

画面自体はこれまでと同じで、タグページとして記事一覧を確認できる状態を残していた。Google Search Centralで案内されているnoindexを使い、robots.txtでアクセスそのものを止めず、クロールできる状態のまま検索結果から外す方針だった。

次に/tags/自体もnoindexにした#

タグ一覧が長くなった時点で、当時のタグ総数は52件だった。タグ名と件数から目的の記事へ移動するためのサイト内導線としては使い続けつつ、検索結果へ出す対象からは外すことにした。

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

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

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

タグ一覧ページにnoindex, followを設定し、canonicalを維持した生成HTML

タグページをサイトマップから除外した#

noindexを設定しても、タグページはサイト内に存在していた。そのためサイトマップ側も確認し、/tags/と個別タグURLを除外するようastro.config.mjsの条件を変更した。

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

タグ数が増えたので件数順・上位50件表示も試した#

タグが52件まで増えたため、記事件数の多い順へ並べ替えた。集計と並び替えはsrc/utils/posts.ts側で行い、タグの正規化、canonical ID、alias、URL生成は既存の仕組みをそのまま使った。

当時の上位は次のようになった。

横にスクロールできます
タグ記事件数
Astro21件
Web制作9件
Cloudflare Workers8件
UI5件
トラブル対応5件
記事分類5件
Frontmatter4件
Webデザイン4件
コーディング4件
サイト運用4件

記事件数の多い順に変更し、上位50件を通常表示したタグ一覧

1記事だけのタグを削除したわけではない。aboutやh1、パンくずなど、当時1記事だけで使われていたタグもデータとして残した。

通常表示する件数はTaxonomyBrowse.astro側で50件として管理した。

1~50件目
→ 通常表示

51件目以降
→ 展開領域

当時のタグ総数は52件だったため、残り2件を展開側へ入れた。51件目以降は正規化と独自ドメインだった。

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

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

「すべて表示」を開き、51件目以降の正規化と独自ドメインを表示した状態

連載番号の表示ズレも確認した#

タグ一覧とは別に、連載記事の末尾で表示が1か所ずれていた。第16回の記事タイトルは読者向けにはそのまま「第16回」と表示していたが、記事末尾では次のように表示されていた。

連載:Astro+Cloudflareでサイトを作る・第17回

第16回の記事タイトル

第16回の記事末尾で連載番号が第17回と表示されていた状態

途中に番外編が1記事入っているため、第16回の記事は内部順序ではseriesOrder: 17になる。並び順としてはこの値で合っているので、FrontmatterのseriesOrderは変更しなかった。

内部順序は触らず、記事末尾でseriesOrderを「第○回」として表示する処理だけ削除した。修正後は次の表示だけになった。

連載:Astro+Cloudflareでサイトを作る

記事末尾から連載番号を削除し、連載名だけを表示した状態

第16回の記事もseriesOrder: 17のまま残した。これは当時の表示ズレを説明する一次情報であり、連載全体の順序を変更したものではない。

それでも最終的にタグページを廃止した#

タグページを実際に使い、個別ページのnoindex、/tags/のnoindex、サイトマップ除外、件数順表示、上位50件表示まで試した。

その後、カテゴリ、テーマ別まとめ、記事一覧、検索、関連記事など別の導線が整い、タグページを独立ページとして残す役割が薄くなった。そのため、タグ一覧ページと個別タグページを廃止した。

タグデータそのものを削除したわけではない。記事Frontmatterのtagsは保持し、関連記事の選定など、ページ以外の用途で使える状態を残している。

お問い合わせ・プライバシーポリシー・免責事項の導線も同時に追加した#

タグページの見直しと同じ時期に、フッターへ固定ページへの導線も追加した。当時の変更前は次の表示だった。

Home
記事一覧
About
RSS

変更前のフッター

お問い合わせ、プライバシーポリシー、免責事項へのリンクを追加し、次の構成にした。

Home
記事一覧
About
お問い合わせ
プライバシーポリシー
免責事項
RSS

固定ページへのリンクを追加したフッター

免責事項ページも用意した。

追加した免責事項ページ

タグページを作ってから廃止するまでに分かったこと#

タグページは最初から不要だったのではなく、次の順に試行錯誤した。

実際に使う
↓
個別タグページをnoindex
↓
/tags/をnoindex・サイトマップ除外
↓
件数順・上位50件表示を試す
↓
サイト構造を再整理
↓
タグページを廃止

変更後はGitHubへ反映し、Cloudflare Workersのデプロイも確認した。当時のビルドは#815aa526で、npm run buildとnpx wrangler deployにより初期化、リポジトリのクローン、インストール、ビルド、デプロイまでエラーなく完了した。

今回の変更が反映されたCloudflare Workersのデプロイ

ビルド詳細も確認した。

Cloudflare Workersのビルド成功画面

現在はタグページを生成していないが、当時のタグページ運用と、タグデータをmetadataとして保持することは別の話である。現在はWEB制作カテゴリ、Astro+Cloudflareでブログを作るテーマ別まとめ、記事一覧、検索、関連記事を導線として使っている。

参考#