さくらブログは、seesaaブログのシステムを使用しています。
seesaaブログがそうであるように、さくらブログも何故か記事ページの日付が<h2>タグで、記事のタイトルが<h3>タグになっています。
<h1>〜<h6>のｈとは、Headingの頭文字で、見出しという意味です。
<h1>見出し文字</h1>というｈタグというもので、見出しの文字を囲むと見出しとして認識されます。
hタグというのは、<h1>→<h2>→<h3>という順番で数字が少ないほど重要度が高いという決まりがあります。
この順番は、検索エンジンにとっても大事で、<h2>の日付を一生懸命検索してもらっても一向に検索順が上がらず、誰にも読んでもらえません。
せっかくブログをするなら多くの方に読んでもらいたいですよね？
SEO対策上も<h>タグが正しくないと良くないらしいです。
さくらブログは、何もしないと下記のようになっています。
ブログタイトル<h1> ⇒ 日付<h2> ⇒ 記事タイトル<h3>
私は、日付が２番目に大事ではありません。
情報を欲している方が、日付で検索する事は無いからです。
そう考えると記事タイトルの方が重要です。
ブログタイトル<h1> ⇒ 記事タイトル<h2> ⇒ 中見出し<h3>という、重要度順にしたいところです。
今回は、こうなるように変更をかけて行きます。
hタグの順番と回数
hタグには、何度も使って良いものと１回しか使ってはダメなものがあります。
<h1>は、ブログ中に何度も使用すると、おかしなページとみなされてしまいます。
選挙前に政治家の名前を連呼して、住宅街を延々走り回ってる選挙カーみたいなものです。
申し訳ないけど、あれ、うるさいですよね・・・
アレ聞くと、あいつには絶対投票しない！と思っちゃいます。
きっと、検索エンジンさんも同じ気持ちになるのだと思います。
大して意味が無いのにh1の大見出しが一杯あると、検索エンジンがコイツウザイ・・・となります。
検索エンジンは、ユーザーの欲する情報を最適に探し出すのが仕事なので、検索エンジンに解りやすく探しやすい構成にしておくべきです。
探しやすくしてあげる基準の１つが、hタグです。
<h1>だけは１個しか許されませんが、<h2>以降のタグは、何個あっても良いそうです。
何個あっても良いのですが、記載される順番に守るべきルールがあります。
これは、良くない例です。
<h1>俺は番長だ！</h1>
<h3>喧嘩のルール</h3>
<p>ルールに沿った喧嘩を・・・本文</p>
<h2>番長の掟</h2>
<h3>番長として</h3>
<p>掟とはいかなるものか・・・本文</p>
<h3>メンチとは</h3>
上から<h1>→<h3>→<h2>→<h3>という順番になっています。
<h1>→<h3>で、<h2>を飛ばしてしまっています。
こういった歯抜け状態は、正しくないhタグ階層となり、ユーザーとしても読みづらいです。
こちらは、正しいhタグの並び方です。
<h1>俺は番長だ！</h1>
<h2>番長の掟</h2>
<h3>番長として</h3>
<p>掟とはいかなるものか・・・本文</p>
<h3>メンチとは</h3>
<h3>喧嘩のルール</h3>
<p>ルールに沿った喧嘩を・・・本文</p>
<h1>→<h2>→<h3>→<h3>と順序良く上から並んでいますので、検索エンジン的にも何の記事か把握しやすく、ユーザーにとっても読みやすい内容となります。
この説明をご覧いただき必要無いと思われる方は、このタグ変更をする必要は無いと思います。
日付が<h2>タグになっていても、ブログは書けます。
ブログをやる上で不具合が起こる訳でもありません。
ソースコード内をちょこちょこ弄るので、正直なところ面倒です。
「面倒でも変更するか〜」となった方は、読み進んでください。
やればSEO対策になります。
１度やっちゃえば、済みますので頑張ってさくらブログのhタグを修正をして行きましょう。
なにも知らない私でも何とか出来ましたので、恐らく一般の方なら余裕のはず！
［記事］内のタグ変更
最終的に以下のような形にしたいと思います。
<h1>を、ブログタイトル。
<h2>を、記事タイトル。
<h3>を、記事内の見出し。
日付は、大して重要ではないので<h>タグは使わず<div>タグというものにします。
<div>タグは、これだけでは意味が無いタグで<div>〜</div>で、囲むとその範囲を塊として扱えるようにするものです。
先ずは、記事の日付内の<h2>を<div>に変更します。
【［デザイン】→【コンテンツ】→【記事】→記事ウインドーの右上にある「コンテンツHTML編集」をクリックします。
ごちゃっとソースコードが並んでいると思いますが、「ｈ2」という文字を探してください。
目を皿のようにして見つけるのも良いのですが、探すのが難しいと思いますので、やり方を書いておきます。
ソースコードのどこかにカーソルを置いて(ctrl)+(ｆ)を押すと文字検索窓が出てきます。
macの場合は、⌘(command)+（f）だと思います。
そこに、h2と書くと自動的にh2の場所を検索してハイライト表示してくれます。
自動検索されないブラウザは、▼（下を検索）みたいなボタンがあるので、押せば文字検索した文字がハイライトされるはずです。
h2は、上から３分の１くらいの部分にありますので、上記の方法で見つけてください。
<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>上記の「h2」を「div」に、「/h2」を「/div」にします。
変更後は、下記のようになります。
<% if:with_date %><div class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></div><% /if %>【記事】の「コンテンツHTML編集」内に<h2>は、この２か所のみなので、ここだけ変更すれば大丈夫です。
まだ、コンテンツHTML編集ウインドーは閉じないでください。
このまま、記事タイトルを「h3」から「h2」に変更します。
先ほど<h2>→<div>に変更した１行ほど下に、下記の文字列があります。
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>上記の「h3」を「h2」に、「/h3」を「/h2」にします。
変更後は、下記のようになります。
<h2 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h2>h3が２か所ありますので、変更てください。
この変更は、プレビューしても何も変化が見えません。
上記、２つの変更が終わったら、記事ウインドー下の［保存］を押してください。
【コンテンツ】下の【保存】ボタンも忘れず押しておきましょう。
これで、【コンテンツ】の【記事】内編集は終わりです。
ＨＴＭＬ内のhタグ変更
次に、ＨＴＭＬ内のhタグを変更して行きます。
【デザイン】→【HTML】→チェックの付いた適応ＨＴＭＬ名をクリック→コンテンツHTML編集で、記事のHTML編集のページに入ります。
先ほどの文字検索方法で、「h2」を検索してください。
初めてＨＴＭＬの編集をする方は、「デフォルトHTML」しかありません。
「デフォルトHTML」は、編集できませんので、右上の「HTMLの追加」を押して、自分用のHTMLを作成してください。
編集は、この自分用のHTMLを編集します。
ソースの真ん中程に、下記の場所が見つかるはずです。
<h2></h2>を<div></div>に、<h3></h3>を<h2></h2>に書き換えましょう。
<h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2>
<div class="blogbody">
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>上が変更前、下が変更後です。
<div class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></div>
<div class="blogbody">
<h2 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h2>このHTML内に<h2>は２か所、<h3>も２か所です。
書き換えたら、［保存］ボタンを押してセーブしてください。
CSS内のhタグ変更
最後にCSS内のhタグを変更します。
CSSは、幾つも修正個所がありますので、文字検索した方が早いです。
【デザイン】→【デザイン設定】→適用されているデザインタイトルをクリックしてください。
CSSのコードが書かれたウインドーが表示されます。
ここでの変更は、幾つかありますので失敗しても良いように、CSSをコピーしてメモ帳などのテキストツールにペーストしておきましょう。
変更前の状態を残しておけば、いつでも戻せます。
ソースコードのコピーのやり方を記載しておきます。
ソースコードのどこでも良いので選択します。
(ctrl)+(a)を押すとソースコードの全てがハイライトされて全選択状態になります。
マウスを右クリックして「コピー」を選び、テキストツールなどに「ペースト」しておいてください。
それでは、変更して行きます。
変換先ほどのやり方で、「h2」を文字検索してください。
下記、「h2」を「.date」に変更します。
h2
,h3{padding:0;margin:0;}上が変更前、下が変更後です。
.date
,h3{padding:0;margin:0;}私が使用している「超シンプル（右サイドバー）」では、CSSの「h2」変更は１か所のみでした。
次に、「h3」を「h2」に変更します。
先ほどのやり方で、「h3」を文字検索してください。
1つ目、上の方にあります。
h3.title {font-size:large;}↓下の様に変更します。
h2.title {font-size:large;}2つ目、先ほど変更した.dateの下です。
,h3{padding:0;margin:0;}↓下の様に変更します。
,h2{padding:0;margin:0;}3つ目、上から５分の１の辺りです。
.blogbody{
margin-bottom:0px;
}
h3.title{↓下の様に変更します。
.blogbody{
margin-bottom:0px;
}
h2.title{私が使用している「超シンプル（右サイドバー）」では、変更は３か所ありました。
この変更によりページがおかしくなっていないか【プレビュー】してみましょう。
大丈夫なら【保存】を押してください。
問題無く変更が出来たのが確認出来たら、先ほどテキストツールにペーストしておいた元CSSバックアップは消して構いません。
かなり面倒な作業だったと思いますが、これで、hタグの変更は終了です。
お疲れさまでした！
