【Bloggerカスタマイズ】3つの画像タグ、使いどころを考える
先日、ブログのカスタマイズをしました。
記事一覧をタイトルのみのリストからサムネイル付きに変更。
その際、同じ画像でも「タグの種類」と「使う場所」によって反映されたりされなかったりすることを知りました。
ワーオBloggerムズカシイネー！でもそんなところも好きよー。
というわけで、Bloggerの画像タグについて気づいたことを書いていきます。
このタグ、使える？使えない？
今回調べたのは
- data:post.thumbnailUrl
- data:blog.postImageThumbnailUrl
- data:post.firstImageUrl
という3つの画像データタグ。どれも「その記事の最初の画像URLを呼び出す」タグです。
それぞれについて
- head内でOGP画像として使えるか
- 記事一覧画面でサムネイル画像として使えるか
を検証しました。
data:post.thumbnailUrl- OGP：使える
- サムネイル：使える
- 備考：そのまま使うと72 x 72px
- OGP：使える
- サムネイル：使えない
- OGP：使えない
- サムネイル：使える
- 備考：カエレバ・ヨメレバの商品画像も適用される
そのまま使うとスピードテストで問題視される
えに的結論
- OGP：data:blog.postImageThumbnailUrlを使う
- サムネイル：data:post.firstImageUrlをリサイズして使う
OGP画像にはdata:blog.postImageThumbnailUrl
webページのタイトルやイメージ画像などの情報を伝えるOGP。BloggerではSNSシェアのほか、ランキングサイトの投稿情報としても使われています。
Googleいわく、現在OGP画像の推奨サイズは最低600 x 315px、できれば1200 x 630px以上、縦横比は1.91:1が望ましいとか。
このガイドラインに沿うならdata:post.thumbnailUrlでは小さすぎるのでdata:blog.postImageThumbnailUrlを使った方が良さそう。
ただ、このブログの画像は「新 絵心教室」の書き出しサイズ640 x 480 pxに合わせて基本4:3。まあボーダーラインは越えているし、多少サイズが合わなくてもいいやとざっくり設定しました。
webページがシェアされた時、どんな表示になるか試したい場合はOGP確認ツールもおすすめです。
サムネイルにはdata:post.firstImageUrl
今回の主目的、記事一覧画面のサムネイルにはdata:post.firstImageUrlを使うことにしました。
上で挙げたように、そのまま使うとスピードテストで問題視されます。どうもCSSでリサイズしただけでは元のサイズと同じと判断されてしまうよう。
要は、画像を呼び出す→CSSでリサイズ・装飾ではなく、画像をリサイズして呼び出す→CSSで装飾という流れにできればいいので
img expr:src='resizeImage(data:post.firstImageUrl, 幅の数値,)'
これでよし。この上からCSSで装飾し、スピードテストの問題も解決しました。
とりまとめ
試行錯誤が楽しいBlogger。
走らせて初めてわかることも多いので、実験用に非公開ブログを作りました 笑。
これからも「速度制限でもサクサク読める広告ほぼなしブログ」を目指して改良していこうと思います。
＼Thanks for reading!／
