顧客が抱える「課題」を独自メソッドで「成功」へ導くマガジン。

KNOWHOWノウハウ

  1. HOME
  2. ノウハウ
  3. SEO
  4. divタグばかり使用せずに、sectionタグ・articleタグ・navタグを使って要素ごとに区切ることができている
SEO

/ 更新日

divタグばかり使用せずに、sectionタグ・articleタグ・navタグを使って要素ごとに区切ることができている

Webページの情報コンテンツを構成する際に、2010年代半ばまでは、「divタグ」を使って、コンテンツ要素ごとにまとめる、区切ることが多かったですが、近年は「divタグ」に変わって「sectionタグ」「articleタグ」を使用することが多くなっています。

※2014年後半より、W3Cによって発表されたHTMlの新方式「HTML5」で、section, article, nav, aside, header, main, footer などが新しいタグとして発表され、推奨されるようになりました。

div/section/articleのどれを使っても、利用者の目には特には違いを見つけられませんが、検索エンジンからすれば、divには意味はありませんが、section/articleにはそれぞれ意味を持っていると認識するため、しっかりとタグを使い分けしていれば、検索エンジンのクローラーがページ構造を評価しやすくなるとされます。

section

そのコンテンツ要素が、「ひとかたまり」として他の要素とは別に分けられている、という意味を持つ。articleと違ってそれ自体のみでは成立しない。

article

ページ内における主体となるコンテンツで、「そこだけを切り出しても成立」できる情報要素である、という意味を持つ。

今まではとりあえずdivを使うというケースも多かったと思いますが、これらはsection/articleにほぼ切り替えることができるので、今後はsection/articleの方を積極的に使いましょう。

ページの構成で、「section/article」が使われているかチェックする。

Webページの情報コンテンツが、どのようなHTML構成になっているかチェックしてみましょう。無料で使用できる拡張ツールとしては、「HeadingsMap」があります。ChromeStoreからインストールできますので、試してみてください。

HTML構成を確認したいWebページを開いて、ブラウザの右上にあるHeadingsMapのアイコンボタンを押すと、ページを構成する文字テキストはもちろん、使用されている「タグ」も表示されます。

このとき、section/articleが使用されておらず、要素の取りまとめにdivのみを使用しているようであれば、section/articleに書き換えた方が、検索エンジンのクローラービリティを考慮するとより親切な記述方法になります。

ほとんど「div」で記述されていれば、 section/articleに書き換える

「section/article」への記述変更は、HTML/CSSを記述することでできますが、HTMLファイルをいじるには専門的な知識が必要となりますので、社内のエンジニア・プログラマーと相談してみてください。

以下は、以前の「div」のみ使用している例と、近年の「section/article(およびheader・footerなども変更)」を使用した例の比較です。後者の方がHTML構造がよりわかりやすくなっているのが見て取れると思います。

例

また、HTMLの記述全般に言えることですが、タグを使用したら必ず閉じタグを忘れずに用意しましょう。基本的ではありますが忘れやすいところではあるので、Googleのクローラーが正しくコンテンツを認識できるようにするためにも、細かい点に気を配りましょう。

まとめ

1つでも当てはまったらチェックしましょう。

  • ページの構成で、「section/article」が使われているかチェックする
  • ほとんど「div」だった記述構成を、 section/articleに書き換えることができた

月間のお問い合せを
「10件、20件、それ以上」増やせます

せっかくあるWebサイトを、マーケティングの魔法で活用しませんか?
弊社では 「月に3社様限定」 で、
専門コンサルタント(経験10年以上)による無料診断を行っております。
たった1時間で「競合に勝つ方法がわかった!」
そう思っていただける会にしたいと考えております。
今よりもっと、お問合せを増やしましょう!!

監修者情報

グロースマーケティング研究部

福田湧基

コンサルテイング本部 事業開発課所属

福田湧基(ふくだ ゆうき)

クラウドサーカス株式会社で、デジタル集客およびDX支援コンサルを担当。
昨今のAI時代における企業の競争力強化を最大の目的とし、AIO対策サービスの開発から市場への展開までを主導しています。

監修者情報

グロースマーケティング研究部

白道 獅化

コンサルテイング本部 事業開発課 AI部門所属

白道 獅化(しらみち しか)

SEO・広告を中心としたデジタルマーケティングの領域で5年目を迎え、これまで1000社以上のサイトデータ分析に携わってきました。
現在はAIO対策のコンサルティング支援を提供する事業のサービス開発を担当しています。

成功へ導く
6つの要素