今回はSEOに強いタグの設定、第3段の紹介です。
前回の記事では「Titleタグ・metaタグの設定のポイントは11点」
前々回の記事では「altタグの設定のポイントは3点」
についてBlogを更新いたしました。
今回はhtmlタグでよく使う構造についてご紹介をいたします。
ご存知の内容の方も多くいると思いますが、
私が資料を作成する上で整理する為にブログにも記述しようと思い
本編では書かせて頂きます。
以前のマークアップする際は<div>タグを使ってそれぞれのブロック（箱）を作成し、
わかりやすいように記述をしていたと思います。
html5では<div>タグで囲むだけでなく、下記のタグを使って構造化することがオススメと
私は考えています。
なぜなら、本来htmlタグにはそれぞれ意味を持っているからです。
意味を持ったタグをマークアップする際に記述するとhtmlを認識する際にわかりやすいと評価がされます。
評価をされるとSEOの順位にも影響が出る為、良いとされております。
サイトを構築する際に最低限下記のタグを使うことをお勧めいたします。。
<header>・・・ヘッダー情報を囲んで使用する。
<footer>・・・フッター情報を囲んで使用する。
<aside>・・・ページの情報と関係をしているが、直接的に関係していない情報を囲んで使用する。（補足情報の意味合いが強いです。）
<nav>・・・リンク情報をまとめて使用する。
<article>・・・記事（ページの趣旨）を囲んで使用する。
<section>・・・見出しや内容を囲んで使用する。
<h1>～<h6>・・・見出しタグに使用する。（h1>h2>h3の順番に強い意味をもつ）
マークアップする際の構成の一例
・・・head部分割愛・・・
<body>
<header>
<nav>
<ul>
<li></li>
</ul>
</nav>
</header>
<article>
<h1></h1>
<section>
<h2></h2>
<p></p>
</section>
<aside>
<section>
<h3></h3>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</aside>
</aricle>
<footer>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</footer>
</body>
</html>
idやclassについては省略をしております。
マークアップする際の注意点４点
1.ヘッダー、フッター部分はサイトを構成する上である要素の為、<nav>タグを使ってまとめてあげると良いです。
2.<article><section>タグを使った際には<h○>タグをセットで使ってあげる。
※使わないとw3cで<h○>タグを使いなさいとエラーが表示される。
3.<aside>はページに関連する場合に使用するが、使う際は少し難しい場合があります。
無難に行なう場合は<div>タグで囲んであげると良いと思います。
4.h1タグはページに1つしか使わないようにすると良いと思います。
マークアップする際に改めて上記を参考にして頂ければ幸いです。
私は、少し頭が整理ができました。
ノウハウをまたご紹介いたしますので、お楽しみにして下さい。
