• Google も「ページ内で複数 h1 は問題ない」と公言していますが、SEO 上は h1 が 1 つの方が明確
• Lighthouse / SEO 監査ツールも 1 ページ 1 h1 を推奨
• article が複数並ぶブログ一覧ページなどでは、各 article に h2 を使うのが無難

セクショニング要素との関係

HTML5 で導入されたセクショニング要素と組み合わせて使います:

  

    
  
  

    

      
記事タイトル
      

        
セクション1
        
本文
        
細目
      
      

        
セクション2
      
    
    
  
  

SEO 観点での見出し

• 検索エンジンは見出しでテーマを理解。h1 はタイトルタグと並んで最重要
• キーワードを自然に含める。「h1 で詰め込む」は逆効果 (キーワードスタッフィング扱い)
• h2 は目次的に使う。記事全体の構成を見出しだけで読めるように
• 段落の冒頭で見出しを使い、その下に対応する本文を置く
• Google の品質評価ガイドラインでも「見出しが内容を正確に表しているか」が見られる

CSS でのデザイン

見出しはセマンティクスを保ったままデザインを変えるのが原則です。

/* ブラウザのデフォルト (Chrome 系) */
h1 { font-size: 2em;    margin: 0.67em 0; font-weight: bold; }
h2 { font-size: 1.5em;  margin: 0.83em 0; font-weight: bold; }
h3 { font-size: 1.17em; margin: 1em 0;    font-weight: bold; }
h4 { font-size: 1em;    margin: 1.33em 0; font-weight: bold; }
h5 { font-size: 0.83em; margin: 1.67em 0; font-weight: bold; }
h6 { font-size: 0.67em; margin: 2.33em 0; font-weight: bold; }

/* カスタムデザイン */
h1 {
  font-size: 2.5rem;
  border-bottom: 3px solid #2563eb;
  padding-bottom: 0.3em;
  color: #1e293b;
}
h2 {
  font-size: 2rem;
  border-left: 5px solid #2563eb;
  padding-left: 0.5em;
  margin-top: 2em;
}
h3 {
  font-size: 1.5rem;
  color: #475569;
}

アクセシビリティ

スクリーンリーダー (NVDA、JAWS、VoiceOver) のユーザーは、見出しを使ってページをナビゲートします:

• NVDA / JAWS: h キーで次の見出しへジャンプ、1～6 でレベル別ジャンプ
• VoiceOver: ローター機能で見出し一覧表示
• 論理階層が崩れていると、ユーザーが文脈を見失う

WAI-ARIA で見出し相当を作る (代替)

セクション見出し


セクション見出し

Lighthouse / axe-core の警告

見出しナビゲーション (目次作成)

// h2/h3 から目次を自動生成
const toc = document.createElement('nav');
toc.innerHTML = '
目次
';
const ul = document.createElement('ul');

document.querySelectorAll('main h2, main h3').forEach((h, i) => {
  const id = `heading-${i}`;
  h.id = id;
  const li = document.createElement('li');
  li.style.marginLeft = h.tagName === 'H3' ? '1em' : '0';
  li.innerHTML = `${h.textContent}`;
  ul.appendChild(li);
});
toc.appendChild(ul);
document.querySelector('main').prepend(toc);

よくあるアンチパターン

FAQ

Q: ブログ記事のタイトルとサイト名、どちらが h1？
A: 記事タイトルが h1。サイト名は記事ページでは

や