Help us understand the problem. What is going on with this article?

あなたのコード、一面divになってません?🥺【セクショニングコンテンツを攻略せよ】

googleはdivの意味を理解できない(そもそもdivに意味はない)
クローラーに正しくコンテンツを認識してもらうため、きちんとセクショニングコンテンツを利用せよ

今回の趣旨は簡単に言うと、上記の通りです。

例えば、下記のコードですが...

<div class="header">
    <div class="header-inner">
      <div class="header-logo">
        <h1>タイトル</h1>
      </div>
      <div class="header-nav">
        <a href="#">home</a>
        <a href="#">about</a>
        <a href="#">recruit</a>
        <a href="#">blog</a>
        <a href="#">contact</a>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="main-inner">
      <div class="mv">
        <div class="hero-wrapper">
          <div class="hero-image">
            <div class="hero-bg"></div>
          </div>
        </div>
      </div>
      <div class="article">
        <div class="article-box">
          <h2 class="article-box-ttl">ここにタイトル</h2>
          <p>ここにテキスト</p>
        </div>
      </div>
      <div class="sidebar">
        <div class="sidebar-inner">
          <div class="sidebar-ttl">ここにタイトル</div>
        </div>
      </div>
    </div>
  </div>

気持ち悪いです🤮

ここの違和感を感じ取れるようにしましょう。

セマンティックコーディングとは

Webページおよびその中に記述された内容について、それが何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想

セマンティックなコーディングは度々取りざたされることですが、つまり

googleにも正しく理解できるタグを使ってコーディングせよ

と考えていただいていいのかなと思います。

今回はセクショニングコンテンツに焦点を絞ります。

他にも正しいhタグの使い方とか色々ありますが...

セクショニングコンテンツとは

横文字だらけで申し訳ありません😣

でも4つだけなので許してください。

nav section article aside
以上4つになります。

これらを正しく使いこなせるかどうかが超重要です。

理由については最後にお話しします。

簡単な役割テーブル

nav section article aside
「主要な」ナビゲーションエリア ブロックを分ける 記事コンテンツ ページに直接関係ない内容

実際に用例を見ていきます。

nav,article,aside

株式会社LIGのサイトを例に解説します。

スクリーンショット 2019-12-06 18.15.11.png

nav

まずnavはグローバルナビゲーションを囲みます。

ここで重要なことは、navで囲むのは、主要なナビゲーションのみと言う点です。

スクリーンショット 2019-12-06 18.23.49.png

こちらもLIGのページで、フッターですが、ulタグのみが使われており、navはありませんでした。

あくまで主要なグローバルナビゲーションのみに使いましょう。

article

記事一覧の記事はarticleタグで囲むようにします。

基本的にWordPressやRailsなどのCMS、フレームワークだとコンテンツ入力画面より自動的にコンテンツを出力すると思うので、articleタグで記事一覧の記事1つ1つを囲んでループ処理させればいいいのかなと思います。

aside

直接そのページと関係ない内容のコンテンツはasideタグで囲むようにします。

基本的にバナー広告やサイドバーととらえていただければいいです。

section

株式会社シャノン様のサイトを例にさせていただきます。

screencapture-shanon-co-jp-2019-12-03-17_51_21.png

sectionはLPなどの縦長コンテンツで使われる傾向にあります。

ブロックごとに区切りがわかりやすいように。

それと、h2など最初の見出しは必須になります

なぜセクショニングコンテンツが重要なのか

W3Cによると、

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element

つまり、他のセクショニングコンテンツが使えない時の最後の手段としてdiv使ってね!読み手のアクセシビリティにも作者のメンテナンスの為にも!

ということです。

googleはdivの意味がわからない

厳密にはクローラーでしょうか。

divは意味を持たないただの塊の定義ですので、divだらけだとコンテンツの内容が正しくGoogleに伝わっていない可能性が高いです。

それでSEO的に致命的だという話は聞きませんが、百害あって一利なしでしょう。

人間にもわからない

ここが致命的です。

保守や機能拡張の際、担当者が困ります。

もう一回最初のコードを見てみましょうか。

<div class="header">
    <div class="header-inner">
      <div class="header-logo">
        <h1>タイトル</h1>
      </div>
      <div class="header-nav">
        <a href="#">home</a>
        <a href="#">about</a>
        <a href="#">recruit</a>
        <a href="#">blog</a>
        <a href="#">contact</a>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="main-inner">
      <div class="mv">
        <div class="hero-wrapper">
          <div class="hero-image">
            <div class="hero-bg"></div>
          </div>
        </div>
      </div>
      <div class="article">
        <div class="article-box">
          <h2 class="article-box-ttl">ここにタイトル</h2>
          <p>ここにテキスト</p>
        </div>
      </div>
      <div class="sidebar">
        <div class="sidebar-inner">
          <div class="sidebar-ttl">ここにタイトル</div>
        </div>
      </div>
    </div>
  </div>

ぱっと見、どこがどんな役割で動いてるかわからなくないです...?

順にダメ出ししていくと、

・headerタグで良いのでは?
・ナビゲーションはnavタグ
・ulやliを使う
・.mainはmainタグの使用
・.articleはarticleタグの使用
・.sidebarはsidebarタグの使用

などなど、若干セクショニングコンテンツ以外の指摘も入りましたが、

これらのタグを正しく使えばだいぶ
みやすくなるなと思います。

<header class="header">
    <div class="header-inner">
      <div class="header-logo">
        <h1>タイトル</h1>
      </div>
      <nav class="header-nav">
        <ul>
          <li><a href="#">home</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">recruit</a></li>
          <li><a href="#">blog</a></li>
          <li><a href="#">contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <main class="main">
    <div class="main-inner">
      <div class="mv">
        <div class="hero-wrapper">
          <div class="hero-image">
            <div class="hero-bg"></div>
          </div>
        </div>
      </div>
      <article class="article">
        <div class="article-box">
          <h2 class="article-box-ttl">ここにタイトル</h2>
          <p>ここにテキスト</p>
        </div>
      </article>
      <aside class="sidebar">
        <div class="sidebar-inner">
          <div class="sidebar-ttl">ここにタイトル</div>
        </div>
      </aside>
    </div>
  </main>

保守する人がみても、どこがどの部分、機能か比較的わかりやすくなったと思います(今適当に書いたので、ツッコミどころまだありますが...)

div地獄からの脱却

セクションングコンテンツを適切に使用できてる人は意外に少ないです。

これを読んだみなさんも、今日からは正しくセクショニングコンテンツを使用して、人間にもGoogleにも優しいマークアップを心がけましょう🎶

samuraibrass
フリーランスのマークアップエンジニアです。可能性広げるため現在はPHPやJavaScriptの勉強をしています。
https://www.youtube.com/channel/UCdMzoB8z-zUwNOS9ZC4FsAQ?view_as=subscriber
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした