Click

注意!あなたのBloggerのメインページは投稿数が勝手に減っているかも!

2020/09/29

Blogger

はじめに

最近ブログを更新したところ、とても不思議な現象に遭遇しました。

このブログは「メインページに掲載する投稿数の上限」を10記事に設定しているのですが、メインページ(トップページ)には4記事しか表示されないのです。



「何で表示される投稿数が少ないんだろう」「テンプレートを弄りすぎたせいかな」と疑いました。


原因調査

当ブログのテンプレートはQooQを利用させて頂いてますが、オリジナルのバージョンに戻しても変わりません。更に標準テンプレートに変えても4記事表示です。

テンプレートは無関係だと分かったので、ある特定の記事が悪さをしているのかも知れないと疑いました。

そう思った理由は、当ブログは記事にはいくつかHTMLを埋め込んでいるからです。

構文エラーが発生しているのではと思い、タグ関係をチェックしましたが記事内におかしな部分は見つかりませんでした。

次にテストサイトに当ブログの記事をコピーしてみたところ、メインページには4記事しか表示されません。

テストサイトでも不思議現象が再現するのです。

記事のどこかが悪さをしていると確信したのですが、原因がつかめません。

自力では解決できそうにないので、ググってみたところ、類似現象の報告するブログを多数見つけました。


なぜメインページの投稿数が変わるのか?

各ブログに共通していたことは、Blogger側がメインページの記事数を意図的に制限している、というものでした。

詳しく調べてみるとBloggerはページの読み込み時間を短縮させるために、2010年からメインページの記事数を調整している、ということが分かりました。


Bloggerが制限している容量

Auto Pagination on Blogger」の記事によると、(a)ページ上のHTMLの量と(b)ページ上の画像の数に応じて、コンテンツの量を動的に調整しているようです。

(a)は今は記載されてませんが、昔のBloggerヘルプには下記のようにメインページのサイズは1MBに制限している、と説明があったようです。


ページのサイズ: ブログのメインページやアーカイブページの1ページのサイズは、1MB までに制限されています。この容量はテキストのみで数百ページ分に相当しますが、ブログのトップ ページで数百件の投稿を公開している場合は制限を超えることがあります。制限に達した場合は、「006 Blogger サポートにご連絡ください」というエラー メッセージが表示されます。このエラーを回避するには、メイン ページの投稿の数を減らします。これにより、ページの読み込み時間が短縮されるというメリットもあります。


では本当に当ブログのメインページのサイズは1MBを超えているのでしょうか。

GTmetrix」で計測したところ、ページサイズは704KBで1MB未満でした。


と言うことはページ上の画像の数が制限を超えている可能性がある、ということになります。

しかし、当ブログのメインページは記事のアイキャッチ画像が4つ、人気の投稿の記事のアイキャッチ画像が3つ、管理人のアイコン画像が1つ、フォロワーのアイコン画像が6つありますが、どれも大きな画像サイズではありません。

カード型のテンプレートは関係ないかもと思いました。


そうなると、読み込みに影響が大きいのは、全記事表示のテンプレートです。

全記事を読み込む標準テンプレートは「Simple」「Picture Window」「Awesome Inc.」「Watermark」「Ethereal」「Travel」があります。

試しにブログのテンプレートを「Simple」に変更し「GTmetrix」で計測するとページサイズは2.45MBで1MBを大きく超えました。


しかし、1MBがを大きく超えているにもかかわらず、メインページの投稿数は4記事のままです。

本来はもっと記事数が減るはずですが、そうなってません。


従って「トップページの容量は1MB以下に制限されている」というのは都市伝説であることが分かりました。

考えてみたら当たり前のことで、毎回ページサイズを計測していたら、めちゃ遅くなるはずで、Bloggerはそんなことはやってないのです。


となると残る指標は(b)ページ上の画像の数です。


Bloggerが制限している画像の数

ではBloggerが制限している画像の数はいくつなのでしょうか。

Bloggerは画像サイズをわざわざ計測はしないと思われるので、imgタグの数をカウントして判断しているのでは、予想しました。

そこで、テストサイトで下記のようにimgタグを埋め込んだページを作成してみました。

1個だけ画像参照を設定し、残りは空にしました。



imgタグの数を変化させてテストしたところ、50個以上になると記事数が1に減ったのです。


これで管理人の予想は確証に変わりました。

この後いろいろテストした結果メインページは、imgタグの合計が50個以上の場合は1投稿、imgタグの合計が49個以下は、その範囲内の投稿記事とプラス1投稿を表示する、ということが分かりました。


Bloggerがメインページの記事数を制限させている仕組みは分かったのですが、対策を考える必要があります。


設定した投稿数を表示させる方法

「メインページに掲載する投稿数の上限」で設定した投稿数をきちんと表示させる方法は意外と簡単でした。

追記の区切りを入れるのです。

追記の区切りの挿入方法ですが、投稿モードでは追記の区切りを入れたい位置で「追記を挿入」をクリックします。



HTMLモードでは、追記の区切りを入れたい位置に<!--more-->を入力するのです。

凄く簡単ですね。

全記事表示のテンプレートをご使用の方は、記事の先頭から1番目の段落に入れて下さい。メインページでは追記を入れた場所まで表示され、その後は「続きを読む」が表示されます。

要は「続きを読む」以降は読み込まれないのです。


カード型表示のテンプレートをご使用の方は、記事の先頭側であれば、どこでも良いです。

管理人は読み込み量を最小にするため、1行目に入れることにしました。



以上の対策を入れた結果、メインページは無事10個投稿が表示されるようになりました。


2020年9月29日 追記

記事の追記<!--more-->を本文の先頭に入れるのはマズイことが分かりました。

理由は、meta description(記事の概要)が読み込まれなくなるためです。

最初の段落の後に入れるべきでした。

以上、訂正します。


まとめ

Bloggerは読み込み時間を短縮するために、良かれと思ってメインページの投稿数を勝手に減らしていることが分かりました。

 現在loading="lazy"を入れれば画像を遅延読込できるにも関わらず、レガシーなWebサイトが過大なトラフィックを発生させないよう、やむを得ず対応していると思われます。

記事に追記の区切り入れるのは、ひと手間なので、自動で入るウェジエットがあると便利かも、と思いました。


気軽に足跡残してね!

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

それでは今回の記事はこれでおしまい。

Author

自分の写真
このブログのヒーローヘッダーは「きれいなお姉さん」がブラウザのアクセプト比に合わせてランダムに表示されます。
\ Follow me! /

Follower

Labels

Blogger (4) hatenablog (3) GitHub (2) Blog (1) Git (1) JavaScript (1) PC (1) Repair (1) WebDesign (1)

QooQ