2020/05/05

Blogger - 本ブログのテーマ等の変更


いくつか理由があって、本ブログのテーマや、記事の構造などを変更してみました。1つは、トップページに表示される記事が少ないと思ったこと。他に、Google のインデックス登録が進まないのが、レスポンスが悪いせいではないかと思ったことや、Blogger テーマの XML の構造が複雑で管理しにくいと思ったことなどです。
ざっと、どんなことをやったか書いておきたいと思います。


トップページに表示される記事が少ない件

今まで、トップページには最新の5件の記事を全文表示していたのですが、ちょっとトップページにしては長いなと思ったのと、5件だとすぐ流れてしまうのでもっと件数を増やしたいなと思ったのが発端です。

そこで、<data:post.snippet /> で表示される文章量を減らして、件数の設定を増やしてみたのですが、どうしても10件前後しか表示されません。
調べてみると、Blogger では表示件数を増やしても1ページには 1MB におさまる範囲でしか表示されないとのことでした。そこで、トップページ用のレイアウトを小さく作り直してみたのですが、まったく効果がありませんでした。、
よくよく再調査してみると、どうも 1MB というのは、内部的な記事情報のサイズ制限のようで、記事情報取得後に削減する <data:post.snippet /> や、レイアウトの方を小さくする取り組みは無意味と分かりました。

そのため、これまでのほぼ全ての記事に「追記の区切り (<!--more-->)」を入れることにしました。これを入れると、記事一覧取得時の本文が、その前までで切れるようになります。これでやっとうまくいきました。
こうすることで、トップページだけでなく、検索やラベルページでの記事一覧もコンパクトになって表示件数が増えて、いい感じになりました。

というわけで、トップページは本文抜粋で20件表示となりました。

レスポンス問題

このブログ、なかなか Google に記事がインデキシングされなくて困っています。Google Search Console によると、「検出 - インデックス未登録」で止まっている記事が4割近くあります。レスポンスが悪くてクローラが記事まで入ってきてくれていないのかなと思い、レスポンス性能を改善しようと思いました。

まず、Blogger テーマのコンパクト化を行いました。
ベースとなっているテーマの機能のうち、使っていない機能が多数あるので、ごっそり削ぎ落としました。
また、Blogger では widget.js や widget css bundle の読み込みが応答性能を悪くしており、次のようなトリックが効くそうなので、入れてみました。

  1. </body>

    <!–</body>–> </body>
    に変える
  2. <b:skin><![CDATA[

    &lt;style type=&quot;text/css&quot;&gt;
    &lt;!-- /*<b:skin><![CDATA[*/
    に変える
なんとなく、速くなったような気はしますが、ピンと来ていません。ちょっと様子を見ようかと思います。

Blogger テーマの整理

レスポンス対策の一貫でもあるのですが、Blogger テーマの余分な要素の整理を行いました。

拡張性を持たせるために、マクロでセクションを作っている箇所や、テーマカスタマイズ用に CSS に対していろんな変数を定義している箇所は、このブログでは必要としていないので、つぶしてしまいました。
DOM の構造としても、faux-column が使われているようだったのですが、CSS と突き合わせてみると、機能していないように見えたので、除去しました。

これでサイズも縮み、インデントも浅くなり、処理速度も速くなったんじゃないかと思います。まぁやはりピンと来ていないのではありますが……。

その他

ラベルをハッシュタグ風に # 付けてみたりとか、画面上部の Blogger NavBar 領域を抹消してみたりとか、マイナーな修正を少々。あと、関連記事の質を上げるため、あまり意味のないラベルを除去したりしました。