このブログのテンプレを弄ってみた

このブログのテンプレはとある（忘れた）共有テンプレの改造なのですが、色々とdivの構造やhタグのつけ方など
色々と不自然なところがあったので直してみるとともに細かい最適化も施してみました。

そしたらなんかGoogleアド先生に高評価をもらいました。


変更点は以下のとおり

• h1だったブログタイトルをpタグに
このブログのタイトルってあんまり重要じゃないんですよね。
企業などのように名前が顔というわけではないのでh1にタイトルを入れる必要がないんです。
しかもtitleタグにタイトルとして入っているので十分ではないかと。


• hタグの順番を変更
ブログで一番重要なのは"記事のタイトル"だと思っています。
なぜなら検索したときに一番ヒットするのがブログの"記事のタイトル"だからです。
なのでブログの記事タイトルをh1で囲ってみました。
そして記事中でh2,h3を使うようにするといい感じにクローラーに拾ってもらえることでしょう。


• divの階層をしっかりと定義
ソースを見てみたら、ブログのコンテンツ部分やサイド部分の一つ一つがdivで囲われておらず、
ただ並べてあるような状態だったので適切にdivで囲って手直ししてみました。
適切なdiv階層の定義はクローラビリティが上がるためSEO的にも重要です。


• サイドバーのタイトルを分かりやすいものに
たとえば新規記事ならTopicsとかリンク集だったらLinksなどに設定してクローラーがdivの中のh3を読み取り
「ああこれはtopicsでこれがlinksの入れ子なのか」と理解しやすくすることが狙いです。（効果はのほどは定かではありませんがgooglebotの中の人ならやってくれるはず）


• 無駄なスタイルを除去
どこも参照していない無駄なセレクタやオプションなどを除去し、略せるところは略してみました。


• CSS,HTMLの圧縮
ブラウザに解釈されないコメントや改行,インデントを除去してみました。
メンテナンス性は下がりますが、自分ひとりで管理しているので問題ありません。


• widthを%で指定することで画面のサイズに合わせて伸び縮み
一応ターゲットの解像度としては、まだシェアが少しある1024(PC)がギリギリ見えるという形で調節してあります。
1280から快適に見えて、1920までがサポート範囲としています。
もしかしたら2560x1600以上の解像度の環境で見ているというクライアントもいるかもしれませんし、これから主流になるかもしれません。
Fの法則というものがありまして、右上の広告に目をやらせたいという下心が少なからずあるわけです。
2560x1600や4096x2160などといった大解像度で見られてしまったらFの右上の効果が薄くなってしまいます。
それをどうにかするために全体を囲った<div id="all">でmax-widthを1920pxに制限してみました。

こんなもんですかね。たいしたことはしていません。
もしよかったらこのページのソースを参考にしてみてくださいな。