• Home
  • Web制作
  • ホームページ制作に必須！<article>タグを使いこなして、読みやすくSEOに強いページを作ろう！

ホームページ制作に必須！<article>タグを使いこなして、読みやすくSEOに強いページを作ろう！

schedule
Tags: HTML

ホームページ制作に必須！<article>タグを使いこなして、読みやすくSEOに強いページを作ろう！

Webサイトを制作する上で、HTMLの知識は欠かせません。中でも、<article>タグは、検索エンジンにもユーザーにも優しいページを作る上で非常に重要な役割を担っています。

この記事では、<article>タグの基本から応用、SEOとの関係まで、具体的なコード例を交えながらわかりやすく解説していきます。

1. <article>タグとは？

<article>タグは、HTML5から導入されたタグで、記事やブログ投稿、フォーラムへの書き込みなど、それ自体で完結した内容をマークアップする際に使用します。

例えば、以下のようなコンテンツが<article>タグで囲むのに適しています。

  • ブログの記事
  • ニュースサイトの記事
  • フォーラムの投稿
  • 商品レビュー

<article>タグを使用することで、検索エンジンはあなたのWebページの構造を理解しやすくなり、ユーザーにとっても読みやすいページ作りに繋がります。

2. <article>タグの基本的な使い方

<article>タグは、以下のように開始タグと終了タグで囲んで使用します。

<article>
  <h1>記事のタイトル</h1>
  <p>記事の内容</p>
</article>

<article>タグの中には、見出し（<h1>～<h6>タグ）、段落（<p>タグ）、画像（<img>タグ）、リスト（<ul>タグ、<ol>タグ）、引用（<blockquote>タグ）など、様々なHTML要素を含めることができます。

3. <article>タグと<section>タグの違い

<article>タグと似たようなタグに、<section>タグがあります。どちらもWebページを区切る際に使用しますが、明確な違いがあります。

  • <article>タグ: それ自体で完結した内容をマークアップする際に使用
  • <section>タグ: Webページ内の特定のテーマに関するコンテンツをグループ化する際に使用

例えば、ブログの記事全体を<article>タグで囲み、記事内の章立てを<section>タグで区切ることができます。

<article>
  <h1>記事のタイトル</h1>
  <section>
    <h2>1. 章のタイトル</h2>
    <p>章の内容</p>
  </section>
  <section>
    <h2>2. 章のタイトル</h2>
    <p>章の内容</p>
  </section>
</article>

4. <article>タグとSEOの関係

<article>タグを適切に使用することで、検索エンジンがあなたのWebページの内容を理解しやすくなるため、SEOにも良い影響を与える可能性があります。

具体的には、以下の点で効果が期待できます。

  • 検索エンジンがWebページの構造を理解しやすくなる
  • コンテンツの関連性を明確にできる
  • ユーザーの利便性が向上する

ただし、<article>タグを使用するだけでは上位表示を保証するものではありません。

5. まとめ：<article>タグを使いこなして、より良いWebページ作りを！

<article>タグは、HTML5で導入された重要なタグの一つです。適切に使用することで、Webページの構造を整理し、ユーザーにとっても検索エンジンにとっても優しいページ作りに役立ちます。

この記事で紹介した内容を参考に、<article>タグをマスターして、より魅力的なWebページを作成しましょう！

関連記事