Bloggerの記事で画像を使う際の注意点@imaokilog

記事に使う画像の管理サービスをGoogleフォトからImgurへ移行したところ、いくつかの問題に気が付いた。

記事のサムネイル画像が表示されない

記事リストのサムネイル画像が表示されなくなってしまった。

`thumbnailUrl`データタグの仕様

どうやらBlogウィジェットのthumbnailUrlデータタグはGoogleサーバー¹にある画像でのみ有効になるようだ。
Googleとそれ以外のサーバーの画像が混在している場合は、Googleサーバーの画像がサムネイル化される。

Googleサーバーの画像の内、サムネイル化される画像の正確な条件はよく分かっていないようだ。

対策

複数の画像管理サービスを使うことは避けたい。
また、記事側の仕込みも共有との絡みがあるので大きくは変えられない。

そこで、thumbnailUrlの代わりにfirstImageUrlの値をJavaScriptで書き換えることを試みた。

記事の冒頭に非表示属性の元サイズ画像を貼っておく
これは本来共有のための仕込みで、これまでもやっていた。
```
<div class="hidden"><img src="https://i.imgur.com/1234567.png" alt=""></div>
```

firstImageUrlを利用してサムネイル部分のHTMLを生成

<div class='thumbnail'>
  <img src='https://i.imgur.com/1234567.png' alt=''/>
</div>

URLをサムネイルサイズのものに書き換える
この場合はSmall Squareサイズを示す"s"をファイル名末尾に追加。
```
<div class='thumbnail'>
  <img src='https://i.imgur.com/1234567s.png' alt=''/>
</div>
```

結果

やはり大きな画像を読み込んだ後でサムネイル画像に切り替わるという挙動になるため、通信状況によっては酷く不恰好なことになってしまう。
よって現状のBloggerでthumbnailUrlを利用する場合は、素直にGoogleのサービスを使って画像を管理するのが無難である。

今回はImgurの利用が目的なので、潔くthumbnailUrlの利用は諦めることにした。

画像のURLが変わる

ブログがHTTPSを使用している場合は、HTTPの画像URLを貼ると出力時に自動的にGoogleサーバーにコピーされた画像のURLに差し替えられてしまうようだ。

HTTPの画像URL

HTTPを使用した場合、次のように差し替えられる。
HTTPのURL

パブリッシュした記事のHTML

<img src="http://i.imgur.com/mo8kreus.png" alt="HTTPのURL" title="">

ブラウザに出力されたHTML

<img src="https://blogger.googleusercontent.com/img/proxy/AVvXsEiugl4f9rAjqyNhZKLJM1Nw_9cdp0ynoqlZIjeOy_kzC4TXJcNuX10IrIwrEOZPMYiPehgBSDB6qQelST4whnWwaMfdID4Q7Y0hjngKqNMQgp43FRspgS3y1uQ821-LbQ==s0-d" alt="HTTPのURL" title="">

HTTPSの画像URL

HTTPSではそのままのURLが使用される。
HTTPSのURL

パブリッシュ後の記事のHTML

<img src="https://i.imgur.com/mo8kreus.png" alt="HTTPSのURL" title="">

ブラウザに出力されたHTML

<img src="https://i.imgur.com/mo8kreus.png" alt="HTTPSのURL" title="">

混在コンテンツ対策

これはHTTPとHTTPSの混在を避けるための対策だと思われる。

混在コンテンツ - Security | MDN

ただのお節介機能なので通常の利用において気にする必要はないが、できればHTTPSで統一するように意識はしておきたい。

最後に

Bloggerの仕様は検索しても正確な情報が出てこないことの方が多い。
今回の記事の内容も例に漏れず推測の域を出ていない。

融通の利かないところはあるが、無料ということを考えるとこれで十分な気もする。

bp.blogspot.comとgoogleusercontent.comで確認したが、他にもあるかもしれない。

投稿