「SEO対策の基本」として内部対策の基礎であるHTML5でのマークアップ方法を考えていきたいと思います。
最終的にはベースとして使えるテンプレート（雛形）の作成を目的とします。
（ご自由にコピペで利用していただいてOKです）
SEO対策とマークアップの関係
仕事柄、色々なホームページのSEO対策を依頼されるのですが、サイトをチェックさせていただくとマークアップがメチャクチャだ…というパターンが多いです。
昨今のSEO対策では、外部対策中心から内部対策中心へと重要性が変化していますので、まずは「正確なマークアップ」が大切だと考えます。
じゃあ、マークアップを変えると検索順位が上がるのか？と言われると必ずしもそうではないのがSEOの難しい所ですが…
まずは最小限の雛形を用意
HTML5でのマークアップ方法を考えるにあたって、まずは最小限の雛形を用意します。
HTMLを利用するための宣言や<head>タグ、<body>タグなどですね。下記は本当に最小限の内容です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<meta name="description" content="ページ概要">
</head>
<body>
（…ここにコンテンツ…）
</body>
</html>
上記にはCSSとJavaScriptの読み込みや、レスポンシブ用のviewportの設定などを含んでいませんので、それらは作成するサイトの仕様に合わせて挿入してください。
それでは各要素を追加していきましょう。
ヘッダー
さてここからが本番です。<body>の中身を作っていきます。
まずヘッダー部分を<header>タグで囲みます。
またヘッダーによく配置されるメニューやナビゲーションのような「ページ内の案内を目的とした内容」は<nav>を利用します。
<!-- header -->
<header>
<h1>タイトル（ロゴなど）</h1>
<nav>ナビゲーション</nav>
</header>
メインコンテンツ（記事）
次にメインコンテンツ部分です。ページのメインとなる内容（記事）は<article>タグで囲みます。
メインコンテンツと言っても、WordPressのブログ記事などでは、
- 上部のタイトルなど
- メインの文章
- 下部の補足情報（執筆者や投稿日時など）
に分かれていることが多いので、その場合、<article>の中に<header>や<footer>を配置します。
また、メインの文章は基本的に、
- 見出し：
<h> - 文章：
<p> - リスト：
<ul>,<ol>
などでマークアップしていきます。
<!-- main -->
<article>
<header>
<h2>記事タイトル</h2>
</header>
<section>
<h3>見出し</h3>
<p>文章</p>
<p>文章</p>
</section>
<section>
<h3>見出し</h3>
<p>文章</p>
<p>文章</p>
</section>
<footer>
<p>記事フッターです</p>
</footer>
</article>
上記では「見出し＋文章」を更に<section>タグでマークアップしていますが、ブログサービスやWordpressなどのように、<section>をわざわざ挿入するのが大変…という環境の場合には、特に無くても問題ないと思います。
サイドバー
続いてサイドバー（サイドカラム、ウィジェット）です。
サイドバーと言っても、レスポンシブデザインの場合、<article>の下に来ることが多いですね。
でも位置関係は関係なく、大切なのは「マークアップの中身が何を意味しているのか？」ということです。
サイドバーに設置することが多いのは、
- カテゴリ一覧
- 新着記事一覧
- 人気記事一覧
- タグサマリー
- アーカイブ
- プロフィール
- バナー
- 広告
などかと思います。
これらは、メインコンテンツ（<article>）には直接関係ない＝無くてもページとして成り立つものなので<aside>タグで囲みます。
<!-- side -->
<aside>
<h3>カテゴリ一覧</h3>
<ul>
<li>cat1</li>
<li>cat2</li>
<li>cat3</li>
</ul>
</aside>
<aside>
<h3>プロフィール</h3>
<p>プロフィールです</p>
</aside>
フッター
最後にフッター部分です。これはそのまま<footer>タグで囲めばOKです。
<!-- footer -->
<footer>
<p>ページフッターです</p>
</footer>
全体（テンプレート完成）
さて、一通り全てのマークアップができたので、ページ全体を見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<meta name="description" content="ページ概要">
</head>
<body>
<!-- header -->
<header>
<h1>タイトル（ロゴなど）</h1>
<nav>ナビゲーション</nav>
</header>
<!-- main -->
<article>
<header>
<h2>記事タイトル</h2>
</header>
<section>
<h3>見出し</h3>
<p>文章</p>
<p>文章</p>
</section>
<section>
<h3>見出し</h3>
<p>文章</p>
<p>文章</p>
</section>
<footer>
<p>記事フッターです</p>
</footer>
</article>
<!-- side -->
<aside>
<h3>カテゴリ一覧</h3>
<ul>
<li>cat1</li>
<li>cat2</li>
<li>cat3</li>
</ul>
</aside>
<aside>
<h3>プロフィール</h3>
<p>プロフィールです</p>
</aside>
<!-- footer -->
<footer>
<p>ページフッターです</p>
</footer>
</body>
</html>
サイトの内容やコンテンツの配置にもよるので、全てこれでOKという訳にはいきませんが、HTML5のテンプレート（雛形）の完成です。
WordPressでテーマを自作する際にもベースとなるマークアップは上記のような感じになると思います。
HTML5の文法チェック
こうしてブログで公開させてもらっているのに、マークアップの仕方が間違っていたら大変…ということで、The W3C Markup Validation Serviceで文法チェックをしてみました。
結果…「No errors」ということで問題ないようです。良かった(^^)