SEO
見出し構造でページの論点を伝える
見出しは文字を大きくするための部品ではなく、ページ構造の目次です。視覚デザインとHTMLの階層が同じ意味を持つようにします。
ui.design: seo-basicui.design: heading-order
まず確認する症状
- H1が複数ある、または存在しない。
- 見た目の都合でH2/H3の順序が飛んでいる。
なぜ問題か
- 見出し構造が崩れると、内容の優先順位が機械にも人間にも伝わりにくくなります。
- 記事やナレッジページでは、見出しがそのまま検索意図への回答単位になります。
診断で見る指標
H1の一意性
H2/H3の順序
見出し文言の具体性
本文との対応
修正方法
最小修正
H1を1つにする
ページ主題を表すH1を1つ置き、装飾見出しは別要素へ分けます。
推奨修正
H2を回答単位にする
症状、理由、修正方法、受け入れ条件など、読者の判断順に並べます。
さらに改善
内部リンクのアンカーに使う
関連ページから見出しと一致する言葉でリンクします。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
コーディングエージェント向け修正指示
目的: ページのH1を1つにし、H2/H3を論理順に整理してください。見出しは抽象語ではなく、読者が検索しそうな具体語を含めてください。
参考資料
よくある失敗
- CSSの見た目だけで見出しレベルを選ぶ。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。