SEO
見出し構造でページの論点を伝える
見出しは文字を大きくするための部品ではなく、ページ構造の目次です。視覚デザインとHTMLの階層が同じ意味を持つようにします。
ui.design: seo-basicui.design: heading-order
まず確認する症状
- H1が複数ある、または存在しない。
- 見た目の都合でH2/H3の順序が飛んでいる。
- ページは存在するが、検索エンジンやAIが主題、階層、更新日、関連ページを取り出しにくい。
- metadata、H1、パンくず、内部リンク、sitemap、llms.txtの説明がそれぞれ別の内容を指している。
なぜ問題か
- 見出し構造が崩れると、内容の優先順位が機械にも人間にも伝わりにくくなります。
- 記事やナレッジページでは、見出しがそのまま検索意図への回答単位になります。
- SEOとAI参照性は、1つのタグではなく、HTML本文、内部リンク、構造化データ、sitemapの整合で決まります。
- 機械可読性が弱いと、良い本文があっても検索結果、AI要約、コーディングエージェントの参照に乗りにくくなります。
診断で見る指標
H1の一意性
H2/H3の順序
見出し文言の具体性
本文との対応
HTML本文とmetadataの一致
canonical/index/noindexの整合
構造化データ検証結果
内部リンクからの到達性
sitemapとrobotsの矛盾
見出し階層
回答単位のH2
装飾見出しとの分離
修正方法
最小修正
H1を1つにする
ページ主題を表すH1を1つ置き、装飾見出しは別要素へ分けます。
推奨修正
H2を回答単位にする
症状、理由、修正方法、受け入れ条件など、読者の判断順に並べます。
さらに改善
内部リンクのアンカーに使う
関連ページから見出しと一致する言葉でリンクします。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
- 04HTML本文、title、description、H1、構造化データ、内部リンクの主題が同じページ意図を示している。
- 05公開したいページが通常のHTMLリンクとsitemapから発見でき、robotsやnoindexで塞がれていない。
- 06H1はページ主題を1つだけ示し、H2/H3は読者の疑問や作業順に沿って並んでいる。
- 07見出しの見た目を作るためだけに、HTMLの見出しレベルを飛ばしていない。
コーディングエージェント向け修正指示
目的: ページのH1を1つにし、H2/H3を論理順に整理してください。見出しは抽象語ではなく、読者が検索しそうな具体語を含めてください。 追加確認: まず見出しだけを抜き出して目次として読めるか確認し、その後にCSSの見た目を合わせてください。
参考資料
よくある失敗
- CSSの見た目だけで見出しレベルを選ぶ。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
- 検索向けの文言だけをmetadataに詰め、画面上の本文やH1と違う約束をする。
- llms.txtやsitemapだけを更新し、実際のHTMLリンクから辿れないページを増やす。