シーサーブログの見出タグを変更してSEO対策してみた(カスタマイズ第二弾)

seesaablog-htag.jpg
今日は珍しく平日代休。

外は久々に秋晴れというのに、部屋にひきこもってブログカスタマイズしとります(汗)

自分が使っている「SEESAA(シーサー)ブログ」の見出しタグの設定と装飾という、今まで億劫で手をつけてこなかったとこに悪戦苦闘中。

見出しタグの装飾設定をするとこーんな感じ。
   ↓

どうですか?見出しが目立つでしょ?



この設定をすると、SEO対策(グーグル検索ロボットが重要視してくれ、検索表示順位が上がる)にもなるし、見た目も分かりやすくなるとです。

シーサーブログのカスタマイズ第一弾「画像編集、パンくずリスト設定」の記事はこちらを参照してください。

スポンサーリンク









hタグの設定変更の概要


hタグ」とは、見出しタグのことで、グーグル側に記事の重要度を伝える大切なタグなんだとか。

h1~6まで、hの次の数字が小さいほど、重要度アピールが増すそうです。

①h1(超重要)
②h2(重要)
③h3(まあまあ重要)
④h4~6(ふつう)


【すでに設定されているシーサーのデフォルトというと・・・】
<h1>見出し1:ブログタイトル</h1>
<h2>見出し2:投稿日時</h2>
<h3>見出し3:記事タイトル</h3>
<h4>見出し4:なし</h4>
<h5>見出し5:なし</h5>
<h6>見出し6:なし</h6>

なーんと、あまり重要視が必要ない「投稿日時」がh2になってしまっとるではないか。

ということで、h2を記事タイトル、h3を記事内の小見出し(新たに追加)、h4に投稿日時と設定し直したいと思います。

【変更したい見出しタグ】
<h1>見出し1:ブログタイトル</h1>
<h2>見出し2:記事タイトル</h2>
<h3>見出し3:記事内の小見出し(新たに追加)</h3>
<h4>見出し4:投稿日時</h4>


設定変更するにはHTML、CSSを変更するんだとか。いっちばん嫌い。あの難解な暗号・・・

本当にうまくいくんだろうか・・・では、やりながら記事を書いていきます。


hタグの設定変更の手順


ネットサーフィンしてシーサーブログのhタグ変更記事を半日もかけて読み漁りました(汗)

でも、どれもシーサーが2015年に新システムに変更する前の旧システムをベースに書いているものばかり。

自分の新システムのカスタマイズに当てはまらないものも少なくなく、初心者の自分はあせりまくり・・・

検索エンジンの検索期間を最新にしてみたが、この1年で新システムを元に書かれたhタグ設定記事は見当たらず・・・

もうやるっきゃないと、試行錯誤で始めたが、やっぱり手順が違ってカスタマイズがストップしてます(涙)

【困惑①「hタグが見つからない・・・」】
他の手順サイトには、『【[デザイン】→【コンテンツ】→【記事】→記事ウインドーの右上にある「コンテンツHTML編集」をクリック』とあるが、自分の新システムでは「右上のボタン」なんぞは表示されません。

自分は①デザイン⇒②デザイン設定⇒③使用中のデザインタイトルをクリック⇒コンテンツHTMLタブをクリック

1 design tag.jpg
これでやっと編集準備完了。

まず、「コンテンツHTML編集」ページからいじくることに。

膨大な文字列の中からhタグを見つけるには、目がくらくらするので、他のブログに書いてあった見つけ方をやってみる。

ソースコードのどこかにカーソルを置いて(ctrl)+(f)を押すと文字検索窓が出てきます。

そこに、まず、見つけたい「h2」を入力すると、膨大なソースコードの中の該当部分が黄色くハイライト表示されるので見つけやすくなります。

【他のブログに掲載されてたh2ソースコードのありか】
h2html.jpg

やはり、シーサーブログの初期設定のとおり「date(日付)」になってますよね。

でも、自分のh2ソースコード検索しても見当たらず、全ソースコードを目を皿のように頑張って目視してみましたが、「コンテンツHTML編集シート」では、h2だけでなく、「h3」意外の全てのhタグが見当たりませんでした・・・

ちなみに、検索で見つかった「h3」コードは、「module heading」「parts title」となっている・・・。
contents html edit.jpg

検索ではh3が4件一致しましたが、残り2件(画面に入りきらない下の方に始めと終わりタグ)も、同じモジュールヘッディングについてました。

ブログタイトル、記事タイトルでもない「モジュールヘッディング、パーツタイトル」って何???

ちなみに、他のブログでは、h3コードも同じコンテンツHTML編集ソース内にあり、「article title(記事タイトル)」ソースについてるそうです。
h3html.jpg

だから、「日付」の順位をh2⇒div(順位を無効にしたかたまり扱いとみなす)、「記事タイトル」の順位をh3⇒h2、とすぐに書き換えられるはずなのですが・・・


次に、「HTML編集」ページを選択し、そのソースコードを見てみることに。

他のブログでは、コンテンツ編集ページと同様に、h2(日付)、h3(記事タイトル)ソースが見つかるはずなので、同じように書き換えればよいだけなのですが。

自分の検索では・・・「h1(ブログタイトル)」しかハイライト表示されませんでした。
html edit.jpg

試しに、目視で根気強く探すと・・・「h2(記事タイトル)」「div(日付)」がありました!

ハイライト表示になってない。検索機能って結構いい加減かも。
html edit h2 div.jpg

うーむ・・・いじってないけど、初期設定でこうなってるとは。ほんとよくわからん。

HTMLとコンテンツHTML両方に、同じhタグ設定がされてなくて、SEO効果があるのだろうか??

この後は、スタイルシート(CSS)の日付と記事タイトルソースのhタグを同様に修正するはずなのですが・・・

自分は今回はいじるのやめときます

さんざん時間かけて悔しいですが、素人が手を出すのは早い。しかも他のブログの手引きもない状況なので。

玄人さん、誰か教えてくれ~~い!!


記事内の小見出しを装飾してみる


これなら、今回できました!!

やり方は簡単。

まず、スタイルシートに下記のコードを貼りつけます。
htag decolate.jpg

自分は一番下に貼りつけましたが、ちゃんとhコードがシートに表示されてるなら、h2コードの下とかに貼るのが分かりやすいかも。

これもHTML暗号で意味不明ですが、「border top」ってのは、タイトル囲みの上の線の設定だそうです。

自分はよくわからんので、他の方のをそのままちょうだいしました。

次に、記事編集画面の中で、小見出しの最初と最後に<h3>と <h/3>つけます。

こんな感じ。 <h3>小見出しのタイトル <h/3>

記事内の小見出しに「h3」タグも設定しているので、これを変更したい時には、スタイルシートに貼りつけたソースのh3を変更し、小見出しを挟むのもh3でなくすればよいのです。

これで、簡単に記事内の見出しを左線は太線の青の線で囲み、字は太字大きくできました

今までののっぺりとした文字だけの記事より、アクセントが出て読みやすくなりましたね。

自分の場合、先の説明したように、コンテンツHTMLシート内にのみ「h3(モジュール ヘッディング)」というわけのわからんものが設定されていたので、小見出しも同じh3にしてよいものかどうか・・・

サイトマップ通り上層部から順番にhタグの順番づけをしないと、グーグルロボットの検索に影響するって記事で読んだことあるし。

カスタマイズって、ほんと難しい~~~!!

マイルを貯めて年に1回「ヨーロッパ往復ANAビジネスクラス」無料特典航空券ゲットも夢じゃない!?
banner eearning ana millage.jpg


スポンサーリンク









人気記事

カテゴリ

過去ログ