BarikanBlog

SEO対策の基本!内部対策の基礎であるHTML5のマークアップ方法&テンプレート(雛形)

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

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