HTMLの構造をGoogleなどの検索サイトに伝える「section」などを理解【構造を分かりやすくする】

<section>などの構造は、Googleなどの検索エンジンに対してWebページの文書構造を分かりやすく表示することができます。

たとえば通常、記事のタイトルとなるようなh1の見出しは、各記事について1つの方がGoogleにとって分かりやすいため、SEO的に良いのです。

しかし、section構造を作ってGoogleに伝えておくと、階層構造の判別に見出しのレベルが関係なくなり、全ての見出しにh1を使用しても問題無くなります

h1は各記事に一回だけしか使えないと思っていたので、へー、知らんかった・・・という感じです。

✔️大きく6つ紹介。これらのタグで構造を分けます。

  • <header>・・・導入となるようなコンテンツ
  • <footer>・・・著作者の情報や、連絡先など
  • <nav>・・・ユーザーに文書の内容を簡潔に伝えるナビゲーション
  • <article>・・・記事のような独立して配信されるようなコンテンツ
  • <aside>・・・広告など、本文とはあまり関連がないコンテンツ
  • <section>・・・上記以外の意味のあるまとまり

私は、プログラミングを学習中。ドットインストール#26~28#で学習した内容を、以下の記事で紹介します(参考:ドットインストール#26 コンテンツセクショニングを理解しよう)。

sectionとは、「Webページの構造を分かりやすくするもの」一つ一つ紹介

サイトの構造を伝える

セクショニングは、検索エンジンに文章の構造を分かりやすくするためのものです。注意点としては<section>を使うときは、「見出し」が必要。

<section>見出し、中身</section>というように構造を伝えるので、見出しをつける必要があります。ただ、冒頭に書きましたが<section>の中身であれば、h1を複数回使っても問題ありません

このように、それぞれのタグに特徴があります。

構造を伝えるタグ6つについての特徴を書いていきます。

<header>タグは、導入となるようなコンテンツ

ロゴやヘッダーメニューなどを囲うためのタグ。こんな感じで使います。

<header>
  <img src="img/logo.png" alt="このサイトのロゴです" width="240" height="40">
  <ul>
    <li><a href="#feature">サイトの特徴</a></li>
    <li><a href="#ranking">人気ランキング</a></li>
  </ul>
</header>

ロゴの画像についての指定と、サイトの導入について書いてあります。

(参考:上記コードの<ul><li>タグについてはHTMLで「リストを作成」。番号付き・箇条書きみたいなやつができるよに記事を書いています。)

<footer>タグには、著作者の情報や、連絡先など

Twitterリンクやメールアドレスへのリンクですね。(参考:リンクについては、HTMLの基礎。サイトの外部やページ内部のリンク先に飛ぶ【href属性・id属性でリンクを貼る】に記事を書いています)

<footer>
  <ul>
    <li><a href="https://twitter.com/idoharu_" target="_blank">Twitter</a></li>
    <li><a href="mailto:darekanomeado@darekanomeado.co.jp" target="_blank">Mail</a></li>
  </ul>
  <p>(c)idoharu.net</p>
</footer>

Twitterは私のアカウント。メールアドレスは架空です笑

footerは連絡先など。ちなみに ↑ のコードには、(c)と書いています。これは著作権についてですね。

<nav>タグは、ユーザーに文章構造を伝えるナビゲーション

案内に使うナビタグ

<nav>タグは、ユーザーに文章構造を伝える導入的な意味があるので、先ほど紹介した<header>の中に囲うようになります。

たとえばこんな感じ。

<header>
  <img src="img/logo.png" alt=このサイトのロゴです" width="240" height="40">
  <nav>
    <ul>
      <li><a href="#feature">サイトの特徴</a></li>
      <li><a href="#ranking">人気ランキング</a></li>
    </ul>
  </nav>
</header>

<nav>は、案内的な意味合いで使います。

<article>タグは、記事のような独立して配信されるコンテンツ

ブログ記事のようなものを囲います。ブログの投稿日を<article>タグ内にて、<footer>で囲う使い方もあります。

<h1>本日のブログ記事「モチにチーズは合うのか?」</h1>
  <article>
  <h1>モチにチーズはかなり神。固形のモチの上に冷凍チーズをかけて焼く</h1>
  <p>正月はモチ食べました?余っていませんか?ちょっと変わり種で、「モチーズ」がオススメ。モチに冷凍のチーズを乗せて焼くんです。チーズの塩加減がちょうど合う。温度は「弱」でじっくり焼いてください。お好みでケチャップや醤油、海苔もあり。ノドに詰まらせないように気をつけて!</h1>
  <footer>
    <p>投稿日:<time>2019-1-10</time></p>
  </footer>
</article>

モチーズお試しあれ笑。

<aside>タグは、広告など、本文とはあまり関連がないコンテンツ

こういった感じでマークアップ。

<aside>
  <h1>広告:笑える本があります!<h1>
  <p>広告:笑える本があります! 広告:笑える本があります! 広告:笑える本があります! 広告:笑える本があります! 広告:笑える本があります!</p>
</aside>

スミマセン、適当に広告作ってみました。なんだろうこの押し売り感。キャッチフレーズの意味もよく分からんし笑。

というわけで、<aside>タグは、このように広告を囲うのに使います。

<section>タグは、上記以外の意味のあるまとまり

上記で書いたタグ以外の、意味のあるまとまりを囲むことができます。

また、<article></article>や<aside></aside>などの他のタグを囲むこともできます。

<section>
  <h1>最新のブログ記事</h1
  <article>
    <h1>何かの記事</h1>
    <p>モチーズの記事だよ</p>
    <footer>
      <p>投稿日:<time>2019-1-10</time></p>
    </footer>
  </article>
</section>

こんな感じです。

以上となります。

各セクションに関連するタグはGoogleなどの検索エンジンに文章構造を伝えるためのもの。サイトを見てくれる人と、検索エンジンをつなぐツールとなるということが勉強になりました。では!

(参考:ドットインストール#26 コンテンツセクショニングを理解しよう