Webサイトにおけるロゴと見出しのマークアップパターン

腹筋しろよ

本記事はイエソド アウトプット筋 トレーニング Advent Calendar 2020
の10日目です。

Webサイトを作る際に「ロゴと見出し」のマークアップをどうするかは非常に悩ましい問題です。視覚的にはどのページも似たような構造を持つかもしれませんが、各ページにおける最適なアウトライン（見出し）の構造は異なるかもしれないからです。

先日飲み会で、この「ロゴと見出し」マークアップパターンについて議論がありました。そこで出てきたパターンをいくつかまとめてみたいと思います。

パターン #

パターン1: ロゴを常にh1 #

対象	ロゴ	ページ見出し
トップページ	h1	h2
下層ページ	h1	h2

トップページマークアップ例:

<header>
  <h1><a href="/"><img src="..." alt="サイト名"></a></h1>

  ...
</header>

<main>
  <h2>トップページ</h2>

  ...
</main>

下層ページマークアップ例:

<header>
  <h1><a href="/"><img src="..." alt="サイト名"></a></h1>

    ...
</header>

<main>
  <h2>ページ見出し</h2>

...
</main>

ロゴを一律 h1 とすると、どのページでも同じような構造が得られます。ヘッダーやページ見出しを共通のコンポーネント化する際にシンプルな実装が可能です。ブラウザに搭載されたリーダーモードではmain要素以下がピックアップされるためロゴが配置されているヘッダーは無視されます。

CMSなどでmain要素内のコンテンツがエディタで編集可能になっている場合、コンテンツの見出しは常に h2 から始めれば良いという利点があります。

しかし、例えばブログの下層ページの各記事詳細ページなどでは、ページタイトルにあたる記事の見出しが h2 となります。ユーザにとっては記事の見出しが一番最上位に来る方が自然かもしれません。

トップページマークアップ例:

パターン2: ページ見出しをh１ #

対象	ロゴ	ページ見出し
トップページ	divやpなど	h1
下層ページ	divやpなど	h1

トップページマークアップ例:

<header>
  <div><a href="/"><img src="..." alt="サイト名"></a></div>

  ...
</header>

<main>
  <h1>トップページ</h1>

  ...
</main>

下層ページマークアップ例:

<header>
  <div><a href="/"><img src="..." alt="サイト名"></a></div>

  ...
</header>

<main>
  <h1>ページ見出し</h1>

  ...
</main>

ページ見出しを h1 に配置して、ロゴを見出しとして扱わないパターンです。

このパターンのメリットは全ページの構造が共通化されることはもちろんですが、例えばスクレイピングなどでページの構造を取得した際に、常に同じような構造でデータが取得できます。

パターン3: トップはロゴを h1、下層ページはページ見出しを h1 #

対象	ロゴ	ページ見出し
トップページ	h1	h2
下層ページ	divやp	h1

トップページマークアップ例:

<header>
  <h1><a href="/"><img src="..." alt="サイト名"></a></h1>

  ...
</header>

<main>
  <h2>トップページ</h2>

  ...
</main>

下層ページマークアップ例:

<header>
  <div><a href="/"><img src="..." alt="サイト名"></a></div>

  ...
</header>

<main>
  <h1>ページ見出し</h1>

  ...
</main>

ページによって最上位に配置する内容が変わる変則パターンです。サイトのヘッダーやページの見出しを共通コンポーネントとして実装した際に、ページによって利用する見出し要素のレベルを変えなくてはならないためやや面倒です。

しかし、サイトトップではサイトの名前が、下層ページでは各ページの見出しが最上位へ来るため、情報構造の観点では違和感が少ないでしょう。

WordPressでは、この「ページごとの要素の切り替え」を実現しているテーマがいくつかあるそうです。

パターン4: 全ページロゴもページ見出しも h1 #

対象	ロゴ	ページ見出し
トップページ	h1	h1
下層ページ	h1	h1

トップページマークアップ例:

<header>
  <h1><a href="/"><img src="..." alt="サイト名"></a></h1>

  ...
</header>

<main>
  <h1>トップページ</h1>

  ...
</main>

下層ページマークアップ例:

<header>
  <h1><a href="/"><img src="..." alt="サイト名"></a></h1>

  ...
</header>

<main>
  <h1>ページ見出し</h1>

  ...
</main>

現在のHTMLでは1つのページ内で h1 を複数配置することは問題ありません。全ページで構造が等しくなるため、共通化が容易です。

ただ、各ページのアウトライン最上位には「サイト名」および「ページ見出し」が並列で出現します。ややページの主題が理解しづらいかもしれません。

まとめ #

4つのパターンを紹介してきました。どのマークアップパターンを選ぶかは、扱う情報の構造や、実装都合などいくつかの条件を加味して決定することになるでしょう。マークアップを考えるにあたり、視覚情報からはわかりづらい暗黙的な情報の構造や、サイトが一般のブラウザ以外からどう利用されるのかを想像することも重要になってきます。

マークアップには明確な正解がありません。例えば大手のサイトやGoogleが行っているマークアップをそのままにコピーできるわけではないのです。なぜならマークアップはコンテンツ（や各サイトの事情）から導かれるべき物だからです。
いろんなパターンや例を踏まえて、最後は自分たちで考え、実践していかなくてはいけません。

皆さんはどう思いますか？