section、article、mainなどセクショニングタグの使い分けを本気で考える 名古屋でホームページ制作ならCatworkWeb

section、article、mainなどセクショニングタグの使い分けを本気で考える

html5が世に出て、知らん間にW3CがHTML5を廃止し、ただのhtmlになったと思ってたら、W3Cも無くなって、WHATWGという謎の組織が「HTML Living Standard」なる、ものが、htmlの唯一の標準規格になったということで…なんでも良いからはよ決めてくれと思う一方、逃げまくってたセクショングタグの使い分けに関して、様々なサイトを見たり、ChatGPT君に「お前それさっき言ってたことと矛盾するやろ！」とか、議論を繰り広げ、弊社なりの見解を定めました。
これで１歩、弊社のコーディングルールも弊社なりの正解に近づいたのではないでしょうか。

ちなみにこのサイトはこの記事を書くより前に作ってるから、ルールに則っていないので注意な！

sectionタグは積極的に使おう

まず、<section>は積極的に使おうということです。
今まで、<h2><h3>などの見出しタグ、そのコンテンツのスタートはわかるのですが、終わりがわかりにくいという問題がありました。例えば下記。

<div class="cont01">
  <h2>中見出し</h2>
  <p>テキストテキスト</p>
  <div>
    <h3>小見出し</h3>
    <p>テキストテキスト</p>
  </div>
  <div>
    <h3>小見出し</h3>
    <p>テキストテキスト</p>
  </div>
  <div>
    <h3>小見出し</h3>
    <p>テキストテキスト</p>
  </div>
  <p class="button"><a href="#">詳しく見る</a></p>
</div>

上記の場合、<div>で囲うと、<p class=”button”>が、視覚的・意味合い的には最後の<h3>の配下のコンテンツではないのだけれど、<div>にはセクショニングタグとしての意味がないので、ブラウザやGoogleから、<h3>の配下のコンテンツと、認識されてしまう恐れがあります。

そこを下記のように<section>を使うと、<h3>の範囲が明示されるので、<p class=”button”>は最後の<h3>とは別のコンテンツだね。という見方になります。

<section class="cont01">
  <h2>中見出し</h2>
  <p>テキストテキスト</p>
  <section>
    <h3>小見出し</h3>
    <p>テキストテキスト</p>
  </section>
  <section>
    <h3>小見出し</h3>
    <p>テキストテキスト</p>
  </section>
  <section>
    <h3>小見出し</h3>
    <p>テキストテキスト</p>
  </section>
  <p class="button"><a href="#">詳しく見る</a></p>
</section>

まとめると、<section>は基本的に、<h2>以下、見出しのコンテンツとセットで使う、
また、<section>の１番先頭で<h2>以下、見出しのコンテンツを使用しなければならない、
<h2>以下、見出しのコンテンツを使用する場合には、<section>を基本的に使用する。

しかし、<header><footer>の中では、<section>は使用しない。
<header> や <footer> はその親要素（例：ページ全体・記事など）に関する導入／締め情報を書くための要素で、<section> は独立した意味を持つコンテンツのかたまりだから、意味がずれる。

そのため、例外的に、<footer>で<h2>以下見出しを使用する場合には、<section>は使用しない。
そのため<footer>で見出しを使用しないというのも１つの選択肢かなと。
どのみち使用しても、SEO的に重要なキーワードを使用しての使い方はしないだろうし。

<footer>でブログの掃き出しなど、リンクを張る場合は、迷うと思うけど、<nav>が正解だね。

これも後述するけど、メインコンテンツを示す、<main>は今後積極的に使用することになる。
<section>は、<main>の中で、積極的に使用すべき。
また、<aside>の中では使用してもOK。

sectionタグとarticleタグの使い分けは？

で、１番問題の<section>と<article>の使い分けだけど、今回、マジで考察してCatwork株式会社としての公式見解です。
<section>は、まー良いと思うんだけど、<article>は、ご存じの通り、ブログ記事、ニュース記事、レビュー、1つ1つ完結する投稿などそれ単体でも成立するものという定義です。
じゃーブログ記事は<article>だね☆という単純なものではなく色々困った。

まず、<article>はTOPページの記事掃き出し部分で使うべきなのか？使用するとして、全体を<article>で囲うべきか、個別の部分を囲うべきか、また、一覧ページで使用すべきものなのか、詳細ページで使用するべきか、また、<article>の中ではh1の仕様が許可されるが、h1は１つのページに１個だけでは？<header>の中で使うべきでは？など、様々な疑問があり、結論を出すのが超難しい・・・

これらを１つ１つChatGPT君とやり取りした結果を記す。

articleタグはTOPページの記事掃き出し部分で使うべきなのか？

これは、<article>の使い方としては超正しい。ただ、弊社Catwork株式会社の見解では使わない場合もある。
結論、弊社では、多くの場合、使用しないというコーディングルールとする。
TOPページと書いたが、他の固定ページの記事掃き出し部分でも同様。
ただ、詳しく後述するが、これは投稿記事のサイト内での位置づけ、サイトの性質によっては超正しく、採用する場合もある。

使用するとして、全体をarticleタグで囲うべきか、個別の部分を囲うべきか

これは使用するとすれば、個別の部分を囲うべき。
ただし、弊社では基本採用しない場合が多い。
下記のような記述方法が正しい。弊社では、多くの場合<section>で囲う形になるけどね。

<section class="blog_box">
  <h2>スタッフブログ</h2>
  <p>テキストテキスト</p>
  <article>
    <h3>個別のブログタイトル</h3>
    <p>テキストテキスト</p>
  </article>
  <article>
    <h3>個別のブログタイトル</h3>
    <p>テキストテキスト</p>
  </article>
  <article>
    <h3>個別のブログタイトル</h3>
    <p>テキストテキスト</p>
  </article>
  <p class="button"><a href="#">一覧を見る</a></p>
</section>

一覧ページでのarticleタグの使用方法は？

TOPページ、固定ページと同じく、各記事を<article>で囲うが正解。
ただし、これも弊社では採用しない場合が多い。弊社では多くの場合<section>で囲う形になる。

詳細ページでのarticleタグの使用方法は？

これは、使用条件がとても分かりにくいため、まず、各タグの使用ルールを紐解いていく。
あくまで、Catwork株式会社の見解も含まれているため、そこも織り込んで欲しい。

articleタグの使用ルール

• 単独で意味のある(完結する)記事を定義するのに使用する。
• <header><main><aside><footer>のタグの中で使用する。
• <article>の中に<article>はhtml的にはOKだけど、使用用途が基本あまり無い。
• 中で<h1>を使用できる。使わなくてもいい。(これがマジで難しい。)

headerタグの使用ルール

これがマジで難しいんだけど、実は、ホームページ上部の共通コンテンツとして使用している<header>は、<article>の中では、再使用が認められている。ただし、使わなくてもいい。これも謎。

<header>は、ページのタイトルやロゴ、ナビゲーションバー、検索フォーム、著者名など、ページの概要や導入部を記述する際に使用されという意味がもちろんあるので、今までの使い方はもちろん間違いではない。

ただ、<article>が、単独で意味のある(完結する)記事を定義するであるため、<article>の記事の導入部を記述するという意味合いでも使用が認められていて、その中で<h1>を使用することはOKなんだね。
むしろ<article>を使ったら、<h1>は使用すべきタグであるといえる。
ただ、ルール上は、<article>の中で、<header><h1>ともマストではない。けど・・・！
<header>の使用はともかく、独立した記事が<h2>から始まるのは<article>の意味合いとしておかしいだろうと^^;;
もーマストならマストにしとけよ、とも思わないことはない^^;;;

結果、Catwork株式会社の公式見解としては、<article>の中での、<header>の使用はどっちでもいいということなので、使用しない！<article>の中でのh1は必須とする！

h1タグの使用ルール

• ページ全体及び、<article>の主題を表す。
• １ページの中で複数使用可(ただし、2個目以降は<article>を使用したときに、<article>の中で使用すべきだという見解。)
• <header>の中で使用することが推奨らしい。(これはいつできたルールなのかわからん。知らんかった。<header>の使用がマストでは無いから、<header>の中での使用もマストでは無いらしい。)
• 個人的にはサイトの出来るだけ１番上に<h1>を置きたい派なんだけど、サイト全体の<header>の上でh1を使用するのは非推奨らしい。結果、<h1>は、サイト全体の<header>の中での使用を推奨。
• <article>を使用する場合は、h1は使用すべき。
• <h1>はSEO的にあまり重要ではないとのGoogleの公式見解
  (ここまで引っ張ってこれかよ！と思うけど、当然弊社はh1に拘る)

詳細ページの立ち位置で、記載ルールが変わる！

これがマジで１番解釈が難しい部分。租借するのに本当に苦労した。
「弊社では採用しない場合が多い。」なんてアバウトな書き方をしてきた部分の回答になります。

まず、第１に、<h1>はぺージによって、書き方が異なる。あくまで弊社ルール。

トップページでは、
<h1>名古屋でホームページ制作ならCatwork</h1>のように書く

会社概要ページでは、
<h1>名古屋でホームページ制作ならCatworkの会社概要</h1>のように書く

では詳細ページではどうかというと、今までは、
<h1>名古屋でホームページ制作ならCatwork [記事のタイトルタイトル]</h1>
というパターンと、
<h1>[記事のタイトルタイトル] 名古屋でホームページ制作ならCatwork</h1>
というパターンを使い分けていた。

これの使い分けは、その詳細ページ自体を、「積極的に検索に引っ掛けたいかどうか」で、判断をしてきた。
なぜなら、詳細ページを書く目的は、「ロングテールキーワードでアクセス数を稼ぐため」という目的と、「メインキーワードでのTOPページの検索順位アップため」の２つに大分されるからである。
もちろん、どっちも！という場合もある！

「ロングテールキーワードでアクセス数を稼ぐため」の場合は、
<h1>[記事のタイトルタイトル] 名古屋でホームページ制作ならCatwork</h1>
の並び順を採用。

「メインキーワードでのTOPページの検索順位アップため」の場合は、
<h1>名古屋でホームページ制作ならCatwork [記事のタイトルタイトル]</h1>
の並び順を採用。

しかし、ロングテールキーワードでのアクセスは、コンバージョンに直結しないのだ！！
そのため、「コンバージョンを取ることを目的としたサイト」では、「メインキーワードでのTOPページの検索順位アップため」という理由でブログなどを書いている場合が多い！

弊社制作のサイトは、「コンバージョンを取ることを目的としたサイト」が圧倒的に多いため、「弊社では採用しない場合が多い。」という表現になる！

では、「弊社で採用する場合」はどのような場合かというと、「コンバージョンではなく、アクセス数を集めるための、アフィリエイトサイトや、記事のまとめサイトを制作するとき！」です。弊社ではあんまりないんだけどね！

このサイトの目的によって、詳細ページを、「サイトのイチ下層ページ」として扱うか「独立した記事」として扱うかが変わってくる！！
これによって<article>及び、<h1>の使い方が変わるから注意しよう！

• TOPページの記事の吐き出しで<article>を使用するか否か。
• 一覧ページで<article>を使用するか否か。
• 詳細ページで<article>を使用するか否か、また、h1の使い方。

ちなみに、上記の話は、全て、<article>の使用ルールである、「単独で意味のある(完結する)記事を定義するのに使用する。」に基づいている話だから、「ロングテールキーワードでアクセス数を稼ぐために書いているコラム」のような場合に当てはまる話であって、下記のようなサイトのイチ下層ページの場合は、一切<article>は使用する必要は無いと思うんだな！

• 日々のスタッフの出来事を綴っているブログ
• 新着情報
• お客様の声
• 制作事例/施工事例
• 地域別ページ

この考え方はSEO対策の根幹、めちゃめちゃ重要だね！

articleタグを使用する場合の具体的なルール

さて、少し書いているのも嫌になってきたな！
ここでは、上で書いた、「メインキーワードでのTOPページの検索順位アップため」の集客サイトの場合の<article>の使い方を具体的に書いていくな！
「コンバージョンではなく、アクセス数を集めるための、アフィリエイトサイトや、記事のまとめサイト」では、<article>の使い方が異なるので、注意！直接足立に質問してな！

ちなみに、「メインキーワードでのTOPページの検索順位アップため」と書いたけど、実際は、「メインキーワードでのTOPページの検索順位アップため」と、「ロングテールキーワードでアクセス数を稼ぐため」の両方の目的で書いていて、やや前者の目的のほうが色が濃い！が正しいから、そのつもりで読んでな！

アフィリエイトサイトや、記事のまとめサイトでは、吐き出し部分で<article>を使うと思うし、上記のイチ下層ページの場合は、一切<article>は使用しないがCatwork株式会社の公式見解です。

TOPページでのarticleタグの使い方

結論、TOPページや固定ページでの記事の吐き出し部分では、<article>は使いません！
理由としては「単独で意味のある(完結する)記事」といえど、弊社のサイトの中では「メインキーワードでのTOPページの検索順位アップため」に書いている記事だから、あくまで、下層ページという意味合いが強いためです！

一覧ページでのarticleタグの使い方

結論、一覧ページでの記事の吐き出し部分でも、<article>は使いません！
理由はTOPページの場合と同じです！

詳細ページでのarticleタグの使い方

くどいようですが、アフィリエイトサイトや、記事のまとめサイトではなく、TOPページでのメインキーワードを重視した、集客サイトやコーポレートサイトの場合、かつ、コラムなどの「単独で意味のある(完結する)記事」の詳細ページの場合、そしてその場合、<article>はマストです！

• <main>タグの直下で使用する。
• <article>の中で<header>は使用しない。
• <article>の中で<h1>は使用する。(使用ルールを後述)
• 詳細ページではkeyビジュアルエリアを基本設けない。(本来はmainエリアだろうけど、サイドナビとの兼ね合いで、レイアウト的に所属に困るため。)
• パンくずリストは、<main>タグの直下かつ<article>の前で使用。

で、問題の<h1>の使い方は次の通り。

サイト全体の<header>の中で使用する<h1>は、
<h1>名古屋でホームページ制作ならCatwork [記事のタイトルタイトル]</h1>
を、使用！

<article>の中で使う<h1>は、
<h1>[記事のタイトルタイトル]</h1>
を、使用！

ちなみに、上記の画像の<footer>で<adress>を使用しているが、<adress>の中では<h2>は使用禁止だけど、<p>や<ul>は使ってもいいらしいぞ！

また、コピーライトで<small>を使ってる人がいるが、<small>は、html5の時に用途が変わり、非推奨タグでは無くなって、「補足」を示すようなタグになったため、コピーライトを囲うのは大変正しいのだけど、こいつはインライン要素なので、本来的に、その使い方をするのであれば、<p>で囲わなければならない！結果、無駄にタグが増える！そのため弊社では非推奨にしようかな。