BarikanBlog

SEO対策の基本！内部対策の基礎であるHTML5のマークアップ方法＆テンプレート（雛形）

Barikan

「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>を配置します。

また、メインの文章は基本的に、

などでマークアップしていきます。

<!-- 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」ということで問題ないようです。良かった(^^)

モバイルバージョンを終了