Bloggerテンプレートのh2とh3タグの編集

Hタグ（Headings Tag）は編集したほうが良いです。

Google Bloggerのテンプレートに限らず、どのブログサービスプロバイダーが提供する公式テンプレートを見ても、h1は「ブログ名」、h2は「記事の投稿日付」、h3が「投稿記事タイトル」になっていることが多いのは何故でしょうか？

「記事の投稿日付」よりも「投稿記事タイトル」のほうが重みがあるはず。それが証拠にユーザが作成したSEO対策済みのテンプレートはh1が「ブログ名」、h2が「投稿記事タイトル」、h3はあったり無かったりになっています。

hタグで見出し３を作らないのはブログ全体のキーワード分散を避けるためでしょう。
BloggerテンプレートのHTMLでh2とh3のタグを編集してみます。

前述のようにh2に「投稿記事タイトル」を割り当て、h3以下の見出しは全て削除します。

この作業は投稿記事を書く前に終えておいたほうが良いです。検索エンジンにインデックスされてしまってからブログの設計要素を変更すると、Yahoo!では検索順位が落ちるとも言われています。

新しくBloggerブログを作成したらまず最初にやるようにします。

使用しているBloggerテンプレートでどのようにhタグが使われているか確認するには、HTMLを見る方法、実際に表示されたブログ記事のソースを見る方法があります。

私はダミーの記事を１つ作って記事のHTMLソースで確認しています。

<h1 class='title'> <a href='http://blogger-customize-tips.blogspot.com/ '>Google BloggerブログHacks Tips Tweaks</a> </h1> <h2 class='date-header'>2008年12月6日</h2> <h2 class='title'>検索</h2> <h3 class='post-title'> <a href='http://blogger-customize-tips.blogspot.com/2008/12/ set-unique-blogger-url-in-japanese.html'>日本語環境のBloggerで 投稿記事URLを任意に指定する</a> </h3> <h4> 0 Comments:     </h4>

スタイルシートの定義を確認

スタイルシートも確認してみます。見出しのレベルを変更したら併せてスタイルシートで見た目も変えておかないといけません。

/* Headings ----------------------------------------------- */ h2, h3 { margin: 0; } /* Sidebar Content ----------------------------------------------- */ .sidebar h2 { margin: 1.6em 0 .5em; padding: 4px 5px; background-color: $sidebarTitleBgColor; font-size: 100%; color: $sidebarTitleTextColor; } /* Comments ----------------------------------------------- */ #comments h4 { margin: 1em 0; color: $dateHeaderColor; } #comments h4 strong { font-size: 110%; }

h2とh3のタグは単に余白（margin）を指定しただけでした。

サイドバーの見出しタイトルにh2が割り当てられていますから、このh2の記述は削除してしまいます。

h4は"Comments"という固定テキストの文字修飾だけのようです。このテンプレートでは簡単に修正できそうです。

h2とh3が出現する順番は、見出しレベルの大きい（数字が小さい）順番に出現しないといけません。

記事投稿日付（h2からhなし）と投稿記事タイトル（h3からh2）になりますが、記事投稿日付をh3にしてしまうとh2の投稿記事よりも先にh3が出現してしまいます。そうならないように順番には注意をしてください。

見出しタグを入れ替える

まずスタイルシート部分のhタグを修正します。
ダッシュボードのHTMLの編集画面で「□ ウィジットのテンプレートを展開」のチェックボックスはティックしておきます。

サイドバーの見出しにタイトルに使われているh2の記述を削除します。

/* Sidebar Content ----------------------------------------------- */ .sidebar h2 { margin: 1.6em 0 .5em; padding: 4px 5px; background-color: $sidebarTitleBgColor; font-size: 100%; color: $sidebarTitleTextColor; }

赤い文字のh2を削除すると次のようになります。

/* Sidebar Content ----------------------------------------------- */ .sidebar { margin: 1.6em 0 .5em; padding: 4px 5px; background-color: $sidebarTitleBgColor; font-size: 100%; color: $sidebarTitleTextColor; }

次にh4の表記を削除します。
スタイルシートのCommentsのIDからh4を削除すると次のようになります。

/* Comments ----------------------------------------------- */ #comments { margin: 1em 0; color: $dateHeaderColor; } #comments strong { font-size: 110%; }

スタイルシート部分の編集が終わったら次はHTML部分です。
まずはh4の<h4>表記を<div>に置換します。

h3タグの編集をします。

<h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3>

今回のテンプレートは投稿記事タイトルのみがh3でしたから（<h3 class='post-title'>）、これはh2に格上げします。HTMLの<h3>表記を<h2>に置換します。

<h2 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h2>

最後にサイドバーのタイトル見出しに使われていたh2をdivタグに置き換えます。上記で変更した投稿記事タイトル（post-title）は変更しないように注意します。
このテンプレートでは次の２種類のh2タグがありました。

<h2 class='date-header'><data:post.dateHeader/></h2> <h2 class='title'><data:title/></h2>

<div class='date-header'><data:post.dateHeader/></div> <div class='title'><data:title/></div>

以上でhタグの修正は完了です。
正しくhタグが修正されたか確認するために、住太陽さんの「SEO検索エンジン最適化」の「HTMLタグ利用状況解析」などを利用してください。