※投稿の便宜上、開始タグ・閉じタグを全角にしています。
Web業界にいる方であれば「セマンティック」という言葉を耳にしたことがある人が多いとおもいます。
HTMLのコーディングでSEOとして重要なのが「セマンティック」なコーディングを施すということです。
まずはセマンティックについて確認しましょう。
セマンティックとは
では「セマンティック」とはなんなのか？と言われると表現が難しいですが、「意図を伝える」というような認識でいいのではないかと思います。
SEOで大切なことは、コーディングを通してコンテンツの意味・意図を検索エンジンに伝えることです。
コンテンツの意味・意図を検索エンジンに伝えたい（SEOの向上）
↓
意図が伝わるようにコーディングをする（セマンティックなコーディングをする）
↓
意図が伝わるHTMLができる（セマンティックなHTMLができる）
という感じですね。
ブラウザにコンテンツの意図を伝えるのに重要なタグ（検索エンジンが重要視するタグ）がいくつかあります。
代表的なものをあげると
・タイトル要素 ＜title＞
・メタデスクリプション要素 ＜meta name="description" content=""/＞
・見出し要素 ＜h1＞ 〜 ＜h6＞
・リスト要素 ＜ul＞＜ol＞＜dl＞
などです。
他にも
・ヘッダー要素 ＜header＞
・セクション要素 ＜section＞
・記事要素 ＜article＞
・アサイド要素 ＜aside＞
・イメージ要素 ＜img＞
などがありますが、その中でも分かりにくいと思っている人が多いのが、セクション要素 ＜section＞と記事要素 ＜article＞の使い方ではないでしょうか？
これはほんとわかりにくいですよね。
「本で例えると見出し」とか「本で例えると章にあたる」とか「それだけで独立したコンテンツ」とかいう表現がされることが多いですが、＜section＞の中に＜article＞が入ったり＜article＞の中に＜section＞が入ったり、そのまた中に＜article＞が入ったり。
「独立したコンテンツの中に独立したコンテンツ？」
「独立の定義が分からない。固定ページは独立しているのか？サイトの中の1ページなのに？章じゃなくて？」
と混乱したようなことありませんか？
ちょっと分かりにくい感じがしますので、ここではっきりさせましょう。というのが今回の本題です。
＜article＞の使い方
僕は＜article＞のことを「記事要素 」というように「記事を囲むタグ」と覚えておくのが一番わかりやすいとおもっています。
固定ページも、投稿記事の詳細も一覧もそれぞれ「記事」です。
コンテンツ部分（ヘッダーとフッターの間）は記事と考えます。
なので＜main＞タグの中はどれも＜article＞で囲って問題ありません。
（パンくずなどは除く）
＜header＞＜/header＞
＜main＞
ここから----------------
＜article＞
全部記事！！！
＜/article＞
ここまで----------------
＜/main＞
＜footer＞＜/footer＞
この辺の使い方は賛否があるので、あまり＜article＞を使わない人もいるかもしれませんが、考え方的にはこれでいいと思います。
まあ、＜main＞タグとの違いもよくわかりませんしね。分かりにくいですよね。
あと抑えておくべき＜article＞の使い場所は「記事の一覧」です。
トップや一覧ページに投稿の一覧が入ると思いますが、基本的には記事を何件かずつループさせていることが多いと思います。
そのループ一つ一つが「記事」なので＜article＞で囲みます。
なので「トップページ」や「記事一覧」という「記事」の中に「記事」の一覧があるので
＜article＞
＜section＞
＜h2＞記事一覧＜/h2＞
＜article＞
・記事タイトル
＜/article＞
＜article＞
・記事タイトル
＜/article＞
＜article＞
・記事タイトル
＜/article＞
＜/section＞
＜/article＞
のような＜article＞の中に＜section＞があってその中に＜article＞が入るような形になります。
このように＜article＞の使い所は大まかにいうと
・各ページのコンテンツの全体を囲む
・記事一覧のループ一つ一つを囲む
の二箇所と覚えておくと大体のサイトには対応できるかと思います。
それ以外のところは＜section＞タグを使うという感じで覚えておくといいかもしれません。
※意味合い的なまとまりではなく、レイアウト（デザイン）的なまとまりで括りたい時は＜div＞タグを使いましょう。
また＜section＞タグ内の見出しは必須ではありませんが、見出しをつけることで「本にとっての章」というのがわかりやすくなるかと思います。
＜h1＞が本のタイトルで＜h2＞を章のように使うと、見ための認識もわかりやすい構図になると思いますし、＜h1＞から＜h6＞にむけて文字サイズやデザインに変化をつけて作り込むことでセクションを認識しやすく、読みやすいコンテンツになるでしょう。
注意するべきはSEOというのは検索エンジンを対象にしているのでサイトを見る人（ヴィジター）を対象にしたUI・UXとは混同しないということです。
逆にUI・UXをしっかり作り込むことで、Googleの評価が向上することがあるというのも忘れないようにしましょう。
例えば、きちんと＜h1＞から＜h6＞までタグで囲っておけば、すべて同じフォントサイズでもデザイン無しでもブラウザ的には問題ありません。きちんと認識します。
ですが、我々がサイトを見たときに、すべての文字が同じサイズで画面の左側に縦に並んでいるだけだったら、誰が読みたいと思うでしょうか？
そんなサイトは直帰率が上がり、滞在時間（ドウェルタイム）が減り、Googleの評価は下がるはずです。
SEOとUI・UXは影響しあう関係にあるので、しっかりセマンティックなマークアップを施した上で、人が見てもタイトル、セクション、見出しのまとまりがわかりやすいサイトを作ることを心がけましょう。
サイトを作る目的は、見てくれる人に何かを伝えたい、利用してもらいたいということです。
SEOをしっかり施し、検索の上位にヒットすることがゴールではありません。
サイトを見てもらいやすくするための過程に過ぎません。
サイトは検索エンジンのために作るのではなくサイトを見る人（ヴィジター）のために作るということを忘れないように心がけたいですね。
( ^ω^ )
