SEOにきちんと対応するためのHTML section main article の使い方
htmlの書き方に慣れてくると、各タグの使い方で疑問に思うことが出てきたりします。
headerや footer,navタグはなんとなく名前から推察できますが、section,main,articleは実際どうつかえばいいか中級者でもわからない人が多いかと思います。
section、main、articleタグはHTML5で追加されたセマンティックな要素であり、ウェブページの構造を意味付けするのに役立ちます。
sectionタグ
sectionタグは、ウェブページのセクションを表す際に使用します。一般的にはコンテンツのグループ化に使用され、各セクションには共通のコンテンツが含まれることが望まれます。
サンプルコード
<body>
<header>
<!-- ヘッダーコンテンツ -->
</header>
<main>
<section>
<h2>セクション1のタイトル</h2>
<p>セクション1のコンテンツがここに入ります。</p>
</section>
<section>
<h2>セクション2のタイトル</h2>
<p>セクション2のコンテンツがここに入ります。</p>
</section>
</main>
<footer>
<!-- フッターコンテンツ -->
</footer>
</body>
mainタグ
mainタグは、ウェブページのメインコンテンツを囲むために使用されます。1つのウェブページに1つのmainタグを使用することが推奨されています。通常、ページ内の主要なコンテンツ、例えばブログ記事や本文などをmainタグで囲みます。
サンプルコード
<body>
<header>
<!-- ヘッダーコンテンツ -->
</header>
<main>
<h1>メインコンテンツのタイトル</h1>
<article>
<h2>ブログ記事1のタイトル</h2>
<p>ブログ記事1の本文やコンテンツがここに入ります。</p>
</article>
<article>
<h2>ブログ記事2のタイトル</h2>
<p>ブログ記事2の本文やコンテンツがここに入ります。</p>
</article>
</main>
<footer>
<!-- フッターコンテンツ -->
</footer>
</body>
articleタグ
articleタグは、独立したコンテンツや記事を表すのに使用されます。1つの記事ごとにarticleタグを使い、各記事には見出しや本文などが含まれることが望まれます。
複数の記事がある場合は、各記事ごとに個別のarticleタグを配置します。
サンプルコード
<body>
<header>
<!-- ヘッダーコンテンツ -->
</header>
<main>
<article>
<h1>ブログ記事1のタイトル</h1>
<p>ブログ記事1の本文やコンテンツがここに入ります。</p>
</article>
<article>
<h1>ブログ記事2のタイトル</h1>
<p>ブログ記事2の本文やコンテンツがここに入ります。</p>
</article>
</main>
<footer>
<!-- フッターコンテンツ -->
</footer>
</body>
これらのタグを適切な場所に使用することで、ウェブページの構造が明確になり、検索エンジンやアクセシビリティに対するサポートが向上します。また、セマンティックな意味付けにより、ウェブページの内容を理解しやすくなります。
section と articleを使う場合
sectionタグは、ウェブページのセクションをグループ化するために使用されます。一般的に、sectionタグはコンテンツの大まかなセクション（例：イントロダクション、コンテンツ本体、コンテンツのサマリーなど）を表すのに使われます。
articleタグは、独立したコンテンツや記事を表すために使用されます。一つの記事ごとにarticleタグを使い、見出しや本文などがarticleタグの中に含まれるようにします。
サンプルコード
<body>
<header>
<!-- ヘッダーコンテンツ -->
</header>
<main>
<section>
<h1>セクション1のタイトル</h1>
<article>
<h2>記事1のタイトル</h2>
<p>記事1の本文やコンテンツがここに入ります。</p>
</article>
<article>
<h2>記事2のタイトル</h2>
<p>記事2の本文やコンテンツがここに入ります。</p>
</article>
</section>
<section>
<h1>セクション2のタイトル</h1>
<article>
<h2>記事3のタイトル</h2>
<p>記事3の本文やコンテンツがここに入ります。</p>
</article>
<article>
<h2>記事4のタイトル</h2>
<p>記事4の本文やコンテンツがここに入ります。</p>
</article>
</section>
</main>
<footer>
<!-- フッターコンテンツ -->
</footer>
</body>
まとめ
ブログを作る時はTOP、記事ページ、アーカイブページなど色んな用途でわかれていますので一旦それをすべて洗い出してから構成をまとめ、main section articleのタグを設置するとわかりやすいでしょう。
また、mainタグは各ページに1つだけ、section,artcleはページの内容に合わせて複数設定することができます。
