HTML5 アウトライン構造の SEO 的ベストプラクティス

February 17, 2015
0 Comment
Hatena1
Twitter0
Facebook0
Google0
Pocket0

HTML5 では、従来よりもドキュメントを構造的にマークアップしやすくなりました。セクションを明示することで、そのドキュメントに より ふさわしいアウトラインを形成できる。検索すると「アウトラインは重要」と沢山の人が書いている。

SEO Best Practice of the HTML5 Document Outline

でも、なぜアウトラインが重要なのか、アウトラインを整える目的は何か。そこまで言及している記事は少ない。私たちが HTML5 のアウトラインについて検索するのは、アウトラインを正しくマークアップしたいからではありません。アウトラインを整えるのは手段であって目的ではない。

本稿では、SEO として、検索エンジンにドキュメントの構成を正しく伝えるため（そしてドキュメントの価値に見合った順位で検索結果に表示してもらうため）に、HTML5 における最適なアウトライン構造を整えることを目指します。

SEO に最適なアウトライン構造とは

ぼくが考えた最強の SEO アウトラインなんて誰も興味ない。わかってる。筆者も自分で考案するつもりは毛頭ありません。そこで登場していただくのが、「読書」「恋愛」など、単一のビッグ キーワード検索で上位（ほぼトップ）に表示される NAVER まとめ 先生です。

NAVER まとめ のサイト構成は、当サイトのようなブログ形式に非常に近く、親和性が高いと思います。これをパク参考にしよう。最強の SEO は当然、検索結果上位によく表示されるサイトなのだ。

ブログ形式のサイト構成におけるページ種別

ブログ形式のサイト構成において、ページの種別は大きく以下の 3つに分かれると思います。

  • 記事 ページ
  • カテゴリ ページ
  • トップ ページ

それぞれについて、SEO に最適なアウトライン構造を考えます。

記事ページに最適なアウトライン構造

私たちのサイトにすぐ活かせるよう、HTML タグ ベースでアウトライン構造に関わる部分のみ抜粋してみます。尚、ブログの各記事は、NAVER まとめ では、各「まとめ」に当たると思いますので、「まとめ」を「記事」に置き換えています。

<body>

<header>
	<h1>サイト タイトル</h1>
</header>

<h1>記事タイトル</h1>

<p>【本文コンテンツ】</p>

<div>【記事フッター】
	<h2>関連記事</h2>
		<h3>記事タイトル1</h3>
		<h3>記事タイトル2</h3>
		…
	<h2>おすすめ記事</h2>
		<h3>記事タイトルa</h3>
		<h3>記事タイトルb</h3>
		…
	<h2>カテゴリ一覧</h2>
		<h3>カテゴリ タイトル1</h3>
		<h3>カテゴリ タイトル2</h3>
		…
</div>

<div>【サイドバー】
	<h2>記事作成者名</h2>
</div>

<footer>
	<h2>リンク</h2>
	※サイト概要，問合せフォーム 等へのリンク
</footer>

</body>

ポイント

どうでしょう。驚くほどシンプルで、筆者は震えました。さもあらん。HTML5 の普及率は今後 上がっていくだろうとはいえ、まだまだ SEO においては こんな感じで十分なのです。section タグや article タグ、aside タグなんて不要。シンプル is ベストの典型ですね。それでも、ちゃんと考えて構造化されていることが窺えます。いくつかポイントを挙げてみます。

h1 タグ

h1 タグが 2ヶ所に使われています。サイト タイトルと、記事タイトルですが、前者は header タグで囲まれており、記事タイトル（本文の h1）の方が より重要度が高いことを示しています。これは巧妙ですね。

記事本文に h タグ無し

これは NAVER まとめの特性上、無難な選択でしょう。私たちのブログ サイトでは、記事本文に h2 以下のタグで見出しを設定した方がベターだと思います。

記事フッターとサイドバー

NAVER まとめ の まとめページ（記事ページ）は、「関連まとめ」や「おすすめまとめ」が まとめフッターとサイドバーとに二重に表示されますが、サイドバーの方は h タグが使われていません。

カテゴリ ページに最適なアウトライン構造

私たちのブログでいうカテゴリは、NAVER まとめ の「トピック」に近いと思いますので、トピック ページのアウトライン構造を抜粋して「トピック」を「カテゴリ」に置き換えています。

<body>

<header>
	<h1>サイト タイトル</h1>
</header>

<h1>カテゴリ タイトル</h1>

<h2>定番記事</h2>

<h2>カテゴリ キュレーター</h2>

<h2>関連カテゴリ</h2>

<h2>カテゴリ「○○」の記事</h2>
	<h3>記事タイトル1</h3>
	<h3>記事タイトル2</h3>
	…

<footer>
	<h2>リンク</h2>
	※サイト概要，問合せフォーム 等へのリンク
</footer>

</body>

ポイント

h1 タグの使い方は記事ページと同じですね。

定番記事や関連カテゴリ内には h タグ無し

h3 タグが使われているのは、カテゴリ ページのメインとなる記事一覧の部分のみです。そこが重要なのだと示しているマークアップです。勉強になります。

トップ ページに最適なアウトライン構造

NAVER まとめ のトップページは、「総合」カテゴリのカテゴリ ページです。逆にいうと、NAVER まとめ の各カテゴリ ページは、トップ ページと同じアウトライン構造をしています。

<body>

<header>
	<h1>サイト タイトル</h1>
</header>

<h2>注目記事</h1>
	<h3>記事タイトル1</h3>
	<h3>記事タイトル2</h3>
	…

<h2>おすすめカテゴリ</h2>

<h2>おすすめ記事</h2>
	<h3>記事タイトルa</h3>
	<h3>記事タイトルb</h3>
	…

<footer>
	<h2>リンク</h2>
	※サイト概要，問合せフォーム 等へのリンク
</footer>

</body>

ポイント

h1 タグは 1つだけ。トップ ページなので、サイト タイトルが h1 なのは この上なく妥当ですね。

記事タイトルには h タグあり，カテゴリ タイトルには h タグ無し

12～16行目です。記事とカテゴリ、どちらが重要かを示しています。

いまさらだけど HTML5 アウトライン構造の基本

本稿に関連する部分だけ箇条書きしてみます。

  • body 要素はセクションを形成する
  • header, footer 要素はセクションを形成しない

つまり、NAVER まとめ 先生は すべてのページが単一のセクションで構成されているというわけですね。わかりやすい。

SEO 的には不要だけれど、紳士の嗜みとして HTML5 のアウトラインに興味がおありなら、以下のページが しっかり解説されています。

総括

思ったよりもシンプル、かつ簡単そうで、すぐにでも ご自分のサイトのアウトライン構造を見直したくなったのでは ないでしょうか。当サイトも概ね この通りにしています（カテゴリ ページは未整理なので手付かずの noindex ですが…）。SEO は積み重ねなので、アウトライン構造だけ良くても仕方ないのが難しいところ。でも最適にしておいて損はないと思います。

関連サイト

最後に、ページのアウトライン構造を整えるなら必須のツール「HTML 5 Outliner」へのリンクです。Chrome 拡張（プラグイン）ならローカルのテスト環境でも使えるので便利です。Firefox のアドオンもあるようですが、筆者の環境ではエラーが表示されて使えませんでした。

あとは、今回お手本にさせていただいた NAVER まとめ 先生へのリンクを適当に。

ちなみに NAVER まとめ 先生の SEO トピックは不人気 極まりないので思わず nofollow 入れちゃいました。我ながら本稿はサイトのアウトライン構造に頭を悩ましている諸兄にお役立ちの一品ではないでしょうか。

コメントを残す

メールアドレスが公開されることはありません。