内部詳細ページがあるカードだけリンクする
条件分岐をCodexで入れた実践ログ

今回やった作業

カード一覧では、すべてのカードに同じリンクを出せるとは限りません。内部詳細ページがあるカードだけリンクを出し、ないカードは非リンクにする条件分岐は、404を避けるための地味ですが重要な導線設計です。

今回の作業では、カードの見た目を大きく作り替える前に、ユーザーがクリックする場所を分解して確認しました。サムネイル、タイトル、詳しく見るボタン、外部確認リンクは、同じカード内にあっても役割が違います。どのリンクを主導線にし、どのリンクを補助導線にするかを決めることで、ランキング型ページや情報メディアの回遊が分かりやすくなります。

作業前の状態

作業前は、カードによって内部詳細ページの有無が違っていました。URLを持つカードもあれば、まだ内部ページが存在しないカードもあり、一律でサムネイル、タイトル、詳しく見るボタンをリンク化すると、存在しないページへのリンクが出る可能性がありました。

特に注意したのは、クリックできる場所が多いほど、ユーザーが次に何をすればよいか迷いやすくなる点です。カードが並んでいるだけでは、サイト内で比較するページなのか、外部へ送る入口なのかが曖昧になります。リンク先の役割を確認せずにボタンだけ整えると、導線の問題は残ったままになります。

作業前に問題だったこと

条件分岐がないまま内部リンクを増やすと、見た目は整っていても、公開HTML上には404へ向かうhrefが出ることがあります。ユーザー体験としても、クリックできると思ったカードが壊れたページへ進むのはよくありません。検索前の品質確認でも、404リンクは避けたい項目です。

内部リンクを強める作業では、リンクを増やすこと自体が目的になりがちです。しかし、存在しない内部ページへリンクすれば404になりますし、外部リンクを強く出しすぎればサイト内の比較導線が弱くなります。つまり、リンク確認では、href、リンク先の存在、ボタン文言、クリック後の体験をまとめて確認する必要があります。

Codexに任せたこと

Codexには、内部詳細ページURLの有無、リンク出力条件、URLがある時のリンク表示、URLがない時の非リンク表示、外部リンクとの役割分離、公開HTML確認、主要URLのHTTP確認を任せました。条件分岐そのものだけでなく、出力結果まで見させるのが重要です。

Codexには、現在のファイル構造と公開HTMLを見比べる役割を任せました。作業報告だけではなく、実際にHTML上でどのhrefが出ているか、内部ページが存在するか、公開URLが200 OKか、リンクを追加したことで別のページへ混入していないかを確認させます。見た目の修正だけに寄せず、導線の確認まで含めるのが安全です。

人間が判断したこと

人間側では、一律リンク化を避けること、URLがある時だけ内部リンクを出すこと、URLがない時は非リンクにすること、外部リンクへ無理に逃がさないことを判断しました。リンクを出さない判断も、導線設計の一部として扱います。

人間が判断するのは、リンクの正しさだけではありません。ユーザーにどの順番で読んでもらいたいか、外部リンクをどの程度目立たせるか、内部詳細ページがないカードをどう扱うかも判断対象です。Codexは確認と実装に向いていますが、サイト内での読ませ方や公開してよい導線の設計は人間が決めます。

実際に使った指示文の考え方

指示文では、「リンクを追加して」だけではなく、「内部詳細ページURLがある場合だけリンクを出す」「URLがない場合は非リンク」「404リンクを出さない」と条件を明確にします。作業後は、リンクが出ているカードと出ていないカードを公開HTMLで確認するよう指定します。

この種の作業では、「リンクを追加して」だけでは不十分です。どの要素のhrefを見るのか、内部詳細ページがある場合とない場合をどう分けるのか、外部リンクを消すのか残すのか、公開HTMLと実画面のどちらを確認するのかまで指示します。停止条件として、404リンクが出そうな場合や、存在しないページへのリンクが必要になりそうな場合は作業を止めるようにします。

うまくいった点

うまくいった点は、カードごとの状態に合わせて出力を分けられたことです。内部ページがあるものは回遊導線になり、ないものは無理にリンクしないため、サイト全体のリンク品質を保てます。

リンク導線を分解したことで、カード一覧の改善が見た目だけの話ではなくなりました。内部詳細ページへ進む導線、外部で確認する導線、リンクを出さない判断を分けられるようになり、公開前チェックでも確認しやすい状態になります。

詰まった点・危なかった点

危なかった点は、条件分岐を入れたつもりでも、実際の公開HTMLでは空のhrefや存在しないURLが出てしまうことです。また、外部リンクを代替主導線にしてしまうと内部回遊が弱くなるため、外部リンクは補助として扱う必要があります。

• hrefを見ずに見た目だけで完了扱いにする
• 内部ページがないのにリンクを出す
• 外部リンクを主導線にしすぎる
• 公開HTMLではなく作業報告だけで判断する
• 実画面でクリック先を確認しない

カード一覧のリンク修正は小さな変更に見えますが、hrefを間違えるとユーザーの移動先が変わります。特に、内部ページがないカードを無理にリンク化すること、外部リンクを主導線にしすぎること、実画面クリックを確認しないことは避けたいポイントです。

作業後に確認したこと

作業後は、公開HTMLでリンクが出ているカードと出ていないカードを確認します。リンクが出ている場合はHTTP状態を見て、出ていない場合は表示が不自然でないかを実画面で確認します。既存カード構造やcanonical、robotsには触れていないことも確認します。

あわせて、対象ページが200 OKであること、canonicalとrobotsが変わっていないこと、noindexが入っていないこと、CSSが読めていること、スマホ表示でカードやボタンが崩れていないことも確認します。リンク導線の作業でも、SEOタグや公開状態の確認を省かないことが重要です。

次から使える指示文テンプレート

以下は、同じようなリンク導線整理をCodexへ依頼する時に使えるテンプレートです。

以下の公開中サイトで、カード一覧の内部リンク出力条件を確認してください。

内部詳細ページURLがある場合だけ、サムネイル、タイトル、詳しく見るボタンを内部リンクにしてください。

内部詳細ページURLがない場合は、無理にリンクを出さず、非リンクにしてください。

外部リンクへ逃がす場合は補助導線として扱い、主導線になりすぎないようにしてください。

作業後は、公開HTMLでリンクが出ているカードと出ていないカードを確認し、404リンクがないことを報告してください。

確認チェックリスト

作業後は、リンクを追加したかどうかではなく、クリック先と役割が合っているかを確認します。

• URLがある時だけリンクした
• URLがない時は非リンクにした
• 外部へ逃がしすぎていない
• 404を避けた
• 公開HTMLで確認した
• 実画面で確認した
• 条件分岐が明確
• 既存カード構造を壊していない

関連する使い方ガイド

注意書き

この記事は、実際の作業を一般化してまとめた実践ログ型ガイドです。具体的な案件名、内部情報、サーバーパス、秘密情報は掲載していません。

リンク先の確認は、作業報告だけで完了扱いにせず、公開HTMLと実画面の両方で確認することを前提にしています。Codexに任せる部分と、人間が導線の意味を判断する部分を分けることで、404や不自然な外部誘導を避けやすくなります。