Guide after H1

CodexでH1直下に説明guideを
追加した実践ログ

カード一覧やランキング本体があるページでは、カードを見せる前に「このページは何のページか」を伝えることが重要です。H1直下や一覧本体の前に短いguideを置くと、読者は何を比較し、どこへ進めばよいかを理解してからページを読めます。

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

SEO効果や審査通過を保証するものではなく、公開中サイトのページ品質と読者導線を整える実務上の考え方として整理しています。

今回やった作業

公開中サイトで、カード一覧やランキング本体の前に静的guideを追加した作業を一般化して書きます。この作業では、titleやH1を大きく変えるのではなく、既存の見出し構造を維持したまま、H1説明ブロック直後またはカード一覧本体の前にguideを入れて、ページの役割を分かりやすくしました。

カードやランキングが並んでいるページは、情報量は多く見えても、読者が「何をどう見ればいいのか」を理解できない場合があります。そこで、カードを見る前にページの意味を伝える位置へ説明を置きました。下部で詳しく説明する方法もありますが、一覧を読む前の案内としては、H1直下や本体前の方が効く場面があります。

作業前の状態

作業前のページでは、カード一覧やランキング本体は表示されていました。ただし、カードを見る前にページの役割が伝わりにくく、説明文がないか、説明がページ下部に寄りすぎている状態でした。カードやランキングが並ぶだけに見えると、読者はどこを見ればよいのか、何を基準に比較すればよいのかを迷いやすくなります。

一方で、titleやH1はすでに成立していたため、大きく変える必要はありませんでした。ページの主題を変えるのではなく、本文内の見せ方でページの意味づけを補強する必要がありました。つまり、SEOタグや基本構造を動かすより、本文の位置と説明の質を調整する作業です。

作業前に問題だったこと

カード一覧やランキングページでは、読者がカードを見る前に「このページは何を整理しているのか」を知りたいものです。説明がないままカードが始まると、単なる一覧に見えやすくなります。特にランキング型ページでは、順位、指標、比較の見方、内部詳細ページへの進み方が分からないと、カードの価値が伝わりにくくなります。

また、説明を下部だけに置くと、読者が一覧を見終わったあとで初めてページの意図を知ることになります。もちろん下部説明にも意味はありますが、一覧を読む前の案内としては弱い場合があります。今回は、読者が情報を見る直前に短いguideを置くことで、ページの使い方を先に伝える方向にしました。

H1直下にguideを置く理由

H1直下は、ページの主題を見た直後に読まれる位置です。ここにguideを置くと、読者は本文やカード一覧に入る前に、ページの目的を理解しやすくなります。H1はページの主題を示しますが、H1だけでは使い方や見方までは伝えきれないことがあります。

たとえば、H1が「ランキング」や「一覧」を示していても、そのランキングが何を整理しているのか、何を比較すればよいのか、どこから詳細を読めるのかまでは分かりません。H1直下の短いguideは、H1の意味を補足し、読者を一覧本体へ自然につなぐ役割を持ちます。ここで長く説明しすぎる必要はなく、ページの使い方を短く示すことが大切です。

カード一覧やランキング本体の前に置く理由

カード一覧やランキング本体の前は、読者が実際に情報を見る直前の位置です。ここにguideを置くと、この一覧は何順か、何を比較すればよいか、どのボタンから詳細へ進めるか、関連ページへどう移動できるかを先に伝えられます。

下部に説明を置くと、読者がカードを見終わったあとで初めて説明を読むことになります。その場合、カードを読む最中の迷いを減らす案内としては弱くなります。上部guideでは、ページ全体の説明を長く書くより、カードやランキングの読み方、内部導線、関連ページへの進み方を短くまとめる方が向いています。

Codexに任せたこと

Codexには、いきなり文章を追加させるのではなく、まず追加位置の確認を任せました。確認させたのは、対象ページの実ファイル、H1の出力位置、H1説明ブロックの有無、カード一覧本体の開始位置、ランキング本体の開始位置、既存title、description、H1、canonical、robotsです。

そのうえで、静的guideを読み込む位置を追加し、公開HTMLでguideが出ているか、一覧表示が壊れていないか、対象外ページに混入していないかを確認させます。Codexに「説明文を足して」とだけ頼むと、ページ下部や意図しない共通ファイルに入る可能性があります。そのため、位置、対象ページ、触らないタグ、公開HTML確認まで指定することが重要です。

人間が判断したこと

人間が判断したのは、既存titleやH1を変更しないことです。H1直下または一覧本体前にguideを入れ、カード一覧の下ではなく、読者がカードを見る前に説明を置くことにしました。既存一覧表示を壊さないことも条件にしました。

guideは長すぎる説明ではなく、ページの見方を短く伝えるものにします。必要なら専用partsとして静的guideを作りますが、対象外ページに混入させないことが大事です。共通partsへ入れる場合は便利ですが、条件分岐が弱いと別ページにも同じguideが出てしまいます。今回は、影響範囲を小さくし、本文位置で意味づけを強める判断にしました。

静的guideに入れた内容

静的guideには、単なる説明文ではなく、読者が次に何を見ればよいか分かる内容を入れます。たとえば、このページで確認できること、カード一覧の見方、ランキングや指標の見方、関連ページへの進み方、内部詳細ページで確認できること、外部リンクを補助導線として使うこと、初めて読む人向けの案内です。

ただし、guideが長すぎるとカード一覧が下がりすぎます。上部では簡潔にし、詳しい説明は下部や別ページへ回すこともあります。上部guideの役割は、読者に「この一覧はこう読む」と先に伝えることです。詳しいランキング基準、長い注意書き、細かなFAQは、別のセクションや関連ページに置いた方が読みやすい場合があります。

titleやH1を変えずに本文位置で補強した理由

titleやH1はSEOやページ構造に関わるため、すでに成立している場合は大きく変更しない方が安全なことがあります。今回のように、ページの主題は変えず、ページの見方や導線を補うだけなら、本文内のguideで補強する方が影響範囲を小さくできます。

進め方としては、titleを変えない、H1を変えない、canonicalを変えない、robotsを変えない、本文内のguide位置で意味づけする、という形にします。これなら、ページの基本情報を維持しながら、読者が一覧を見る前にページの使い方を理解しやすくできます。Codex作業でも、変更対象を本文ブロックに絞れるため、確認しやすくなります。

うまくいった点

うまくいった点は、カード一覧の前にページの役割を伝えられたことです。既存titleやH1を触らずに補強でき、一覧本体やランキング本体を壊さずに済みました。読者がカードを見る前にページの使い方を理解しやすくなり、内部リンクの意味づけもしやすくなります。

また、静的guideを入れることで、カードやランキングそのものを大きく変えずにページの印象を調整できます。カードの数を増やす、順位ラベルを変える、CSSを大きく変える前に、まずページの読み方を伝えるだけで改善できる場合があります。影響範囲が小さいので、公開前チェックもしやすい作業です。

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

危なかった点は、guideを長くしすぎると一覧本体が下がることです。上部に説明を置く意味はありますが、長文を置きすぎると、読者がカードへ到達しにくくなります。上部guideは短く、詳しい説明は下部や関連ページへ回す設計が必要です。

共通ファイルに入れると対象外ページへ混入する危険もあります。H1直下の位置を誤ると、既存レイアウトが崩れる可能性があります。titleやH1まで変えてしまうと、変更範囲が広がります。さらに、guideを入れたつもりでも公開HTMLに出ていないことがあるため、ファイル変更だけでは完了扱いにしないことが大事です。

作業後に確認したこと

作業後は、H1直下または一覧本体前にguideが入っているかを確認しました。追加文が公開HTMLに出ているか、一覧表示が壊れていないか、ランキング本体が消えていないかを見ます。title、description、H1を変更していないことも確認します。

canonicalとrobotsが維持されていること、noindexが入っていないこと、対象外ページにguideが混入していないこと、スマホ表示で大崩れしていないことも確認します。特にスマホでは、guideが長く見えすぎるとカード一覧までの距離が伸びるため、文章量と表示位置のバランスを見ます。

次回使えるCodex指示文テンプレート

同じ作業を依頼する場合は、位置と維持する要素を先に指定します。説明文追加は小さな作業に見えますが、出す場所を間違えるとページの印象が変わるためです。

対象ページの実ファイルを確認し、H1説明ブロック直後またはカード一覧本体の前に静的guideを追加してください。

title、meta description、H1、canonical、robotsは変更しないでください。

guideには、このページで確認できること、カード一覧の見方、ランキングや指標の見方、内部詳細ページへの進み方、関連ページへの導線を短く入れてください。

既存のカード一覧、ランキング本体、内部リンク、外部リンク、CSSは壊さないでください。

作業後は、追加guideが公開HTMLに出ていること、一覧本体が壊れていないこと、canonicalとrobotsが維持されていること、対象外ページにguideが混入していないことを確認してください。

DB、cron、.htaccess、robots.txt、ads.txt、広告タグ、Search Console確認タグは触らないでください。

確認チェックリスト

H1直下や一覧本体前へguideを追加する時は、次の項目を確認します。文章追加だけでなく、公開HTML、一覧本体、SEOタグ、スマホ表示まで見るのが安全です。

  • H1直下または一覧本体前に入っている
  • 追加文が公開HTMLに出ている
  • 一覧表示が壊れていない
  • ランキング本体が消えていない
  • titleを変更していない
  • meta descriptionを変更していない
  • H1を変更していない
  • canonicalが維持されている
  • robotsが維持されている
  • noindexが入っていない
  • 対象外ページに混入していない
  • スマホ表示で大崩れしていない
  • DB / cron / .htaccessを触っていない

注意書き

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

SEO効果や審査通過を保証するものではなく、公開中サイトのページ品質と読者導線を整える実務上の考え方として整理しています。Codexに任せる場合も、最終的な文章の自然さ、表示位置、公開判断は人間が確認します。