ページの属性ごとに見出しの構造を変更するチュートリアル

ブログを例に、ページの属性ごとに見出しの構造を変更するチュートリアルを紹介します。

サイトのキャプチャ

The heading structure for your blog

下記は各ポイントを意訳したものです。

はじめに

ページの見出し構造はSEOの非常に重要な要因の一つです。見出しはコンテンツのどの箇所が重要であるか、そしてそれらがどのように相互に結びつけられているかを定義するものです。

トップページ、あるいは記事ページ、カテゴリページなどそれぞれに適した見出しの構造があり、ここではそれを得るために基本的なポイントを説明します。

HTMLの見出しの5つの基本原則

構造の前に、見出しについて基本原則をまとめます。

  1. ページに関する最も重要な見出しは「h1」であるべきです。
  2. どんなページでも通常、たった一つの「h1」が存在します。
  3. 「中見出し」は「h2」であるべきで、小見出しは「h3」などであるべきです。
  4. それぞれの見出しには価値のあるキーワードを含んでいるべきです。もしそうでなければ、それは無駄な見出しです。
  5. 見出しはコンテンツのアウトラインをつくり、その内容を把握するのを助けることができます。

トップページのための見出し構造

h1
ブログの名前
h2
ブログのタグライン(キーワードを含んでいる場合)
h3
最近の記事のタイトル、もし既にh2を使用しているのであれば少し古い記事のタイトル
h4
関連記事などのウィジェット、このブログについてなど
h5
サイドバーやフッタなどにあるプライオリティの低い見出し

記事ページやシングルページのための見出し構造

h1
その記事やページのタイトル
h2
記事内の中見出し
h3
記事内の小見出し
h4
ブログの名前や関連記事などのウィジェット
h5
サイドバーやフッタなどにあるプライオリティの低い見出し

カテゴリやタグの一覧ページのための見出し構造

h1
カテゴリやタグのタイトル
h2
各記事のタイトル
h3
ブログの名前
h4
ブログの名前や関連記事などのウィジェット
h5
サイドバーやフッタなどにあるプライオリティの低い見出し

見出しとHTML5

HTML5で見出しを取り扱う方法についての全部の方法は変化します。簡単に説明すると、見出しと見出しの構造はsectionごとに配置し、ページ内のどこにでも配置することができます。
詳しくは下記ページなどを参照ください。

sponsors

top of page

©2018 coliss