【注意】Bloggerの画像はGoogleに勝手に書き換えられているかも
はじめに
管理人はBloggerでブログを運用してますが、最近衝撃的な出来事に遭遇しました。
それはBloggerに画像をアップロードすると、新しいドメインblogger.googleusercontent.com
にアップロードされるのです。
これまでは、ある裏技でhttps://lh3.googleusercontent.com/
のドメインの画像URLを取得してましたが、画像アップロードのUIが変わったため、この裏技は封じられてしまいました。
これだけなら衝撃的とは言い難いのですが、決定的に驚いたのは、何と過去記事に埋め込んだ画像のURLが新しい形式のURL:
https:// blogger.googleusercontent.com/img/…
に勝手に書き換えられていたのです。
しかもご丁寧に、作成途中の下書きで非公開の記事の画像URLも書き換えられており、念の入り用です。
なんて親切な対応なんだ!と感心される人がいらっしゃるかも知れませんが、「余計な事を無断で勝手にやりやがって!」と思いました。😤
IB-Noteさんやmizusameさんの記事で解説しているURLも書き換えられてました。
「ブログの画像URLを書き換えるなんて聞いてないよー」と思って調べたら、Bloggerヘルプにしっかり記載されてました。
注:上記はhttps://lh3.googleusercontent.com/blogger_img_proxy/…
の画像を埋め込んでます。
気づくのが遅すぎました!
過去裏技でわざわざhttps://lh3.googleusercontent.com/
の画像URLを参照して記事を作成していたのが、すべて無駄な努力となってしまいました。覆水盆に返らず。😭
2024年3月27日 追記
はてなブログ時代はGoogleフォトの画像を埋め込んでいて、Bloggerに移転した際もそのまま使用してます。
そしてGoogleフォトの画像はhttps://lh3.googleusercontent.com/
なのですが、これは変換対象ではなく、そのまま残ってます。
新しいドメインのダメなところ
Bloggerの画像が保存される新しいドメインは2つ欠点があります。
一番影響が大きいのは、画像の表示が遅くなることです。
ざっくり言って、10倍以上遅くなりました。
数十KBのwebp画像を呼び出す場合、以前は50ミリ秒以下でしたが、新しいドメインはサーバーはレスポンスが遅く500ミリ秒~1300ミリ秒かかるのです。
たった0.5秒~1.3秒と思われるかも知れませんが、ページスピードに関心がある方は気になる遅延だと思います。
2つめは、URLがやたら長くなったことです。これはセキュリティ強化で、長いハッシュを使用しているためだと想像しますが、HTMLで編集する際、意味不明の文字列にイライラする時があります。
考えられる今後の対応策
Googleフォトに画像をアップし直リンクを取得し、(https://lh3.googleusercontent.com/pw/…
)利用する手段があります。
テストしたところ読み込み時間は最大で半減しましたが、魅力的なスピードではありません。
更に都合が悪いことに、記事の1番目の画像はアイキャッチ画像(og:image
)になるのですが、Googleフォトの直リンクURLはアイキャッチ画像に変換できずエラーになるのです。
試行錯誤の結果、https://lh3.googleusercontent.com/
から画像を取得できる、面倒臭い裏技を見つけたので紹介します。
なお、この面倒臭い裏技も、いつか使えなくなる可能性があるのでご承知おき下さい。💦
lh3.googleusercontent.comに画像をアップする方法
意外と簡単なのですが、灯台下暗しで確認するのに少々時間がかかりました。
Bloggerはアイキャッチ画像を自動で作成してくれるのですが、実はこのアイキャッチ画像のURLはhttps://lh3.googleusercontent.com/blogger_img_proxy/…
なのです。
このシステムを逆手にとることでhttps://lh3.googleusercontent.com/
に画像をアップできることがわかりました。
(注)使用するテンプレートの種類によっては、埋め込んだ画像URLがそのままアイキャッチ画像となっているものもあります。
作成手順
記事の1番目にBlogger以外にアップロードした画像を埋め込むことで、https://lh3.googleusercontent.com/blogger_img_proxy/…
の画像が作成され、HTMLにメタ情報として埋め込まれます。
Bloggerの記事のソースを開くと、<meta
content='https://lh3.googleusercontent.com/blogger_img_proxy/…'
property='og:image'/>
を見つけることが出来ると思います。
注:上記はhttps://lh3.googleusercontent.com/blogger_img_proxy/…
の画像を埋め込んでます。
このog:image
のURLを再利用すれば良いのです。
デメリットとメリット
Bloggerとは違うサーバーに一度画像を保存する必要があり、面倒臭いのがデメリットです。
メリットはGoogleが勝手に画像のURLを書き換えることはないので安心です。また、慣れればこちらが便利かも知れません。
例えば、はてなブログは「はてなフォトライフ」に画像が保存されますが、これを画像ストレージに使えば良いです。しかも、毎月300MBまでの画像を無料でアップロードできます。
はてなブログはクソ遅いので大丈夫と心配されるかも知れませんが、画像表示のレスポンスは実は早いです。
なお「はてなフォトライフ」にWebP画像はアップロードできませんが、og:imageのhttps://lh3.googleusercontent.com/blogger_img_proxy/…
に-rw
を追加すれば、自動でWebP画像になります。
注意
記事の1番目にhttps://blogger.googleusercontent.com/img/…
の画像がある場合はhttps://lh3.googleusercontent.com/blogger_img_proxy/…
には変換されません。
また、先に書きましたが、Googleフォトの直リンクURL:https://lh3.googleusercontent.com/pw/…
はエラーになるので使用できません。
更に、JetThemeで記事の1番目の画像にhttps://lh3.googleusercontent.com/blogger_img_proxy/…
を使用すると、トップページのカードの画像が中央のみ表示されおかしくなるので使わない方が良いでしょう。
これはアイキャッチの画像URLに‐c
が付与されている為です。‐c
を削除するとこの現象は回避できますが、今度はPOPULAR POSTSやRECENT POSTのアイキャッチ画像が劣化してしまいます。
‐n
に変更するとこの問題は解決できますが、当ブログではJetThemeに埋め込んでいる[email protected]/main.js
を微修正して回避致しました。
その他の注意
SNSに投稿すると記事のog:image
が表示されない場合があります。また、変換に失敗するとog:image
はhttps://lh3-testonly.googleusercontent.com/blogger_img_proxy/…
にアドレスが変わるようです。
また、-e365
のパラメータを付けないと1日でURLにアクセスできなくなりました。
この場合は、素直に新しい形式の画像を1番目に埋め込むのが無難だと思います。
まとめ
Googleが提供しているサービスは、Googleの都合で改悪されるリスクがあり、注意が必要だと分かりました。
ページスピードは速いに越したことはありませんが、記事の内容が役に立っているのかが、一番重要なポイントです。
非営利のブログや誰の役にも立ってないブログは、0.5秒~1.3秒の遅延に目くじらを立て気にする必要はないでしょう。
そうは言っても気になる方は、新しい裏技をお試し下さい 。
気軽に足跡残してね!
この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。
それでは今回の記事はこれでおしまい。
えー、困りますね。たしかに画像URL変わってますね。
リモさん、お久しぶりです。今回の画像URL書き換えは表示が遅くて本当に困ってます。
トップビューのページパフォーマンスの悪化は打つ手なしかなと思ってます。
お久しぶりです。まだ手首が治らなくてすっかりブログから遠ざかっています。
私も画像は毎回旧URLでアップしてたのに水の泡です。。泣 ページスピードの点がほんと困りますね。
ブログデザインのプチリニューアル、良いですね ^ ^