【アメブロ＆Facebookシェア】記事の顔！「サムネイル画像」を思い通りに♡

こんにちは。

ご訪問ありがとうございます。

暮らしの仕組み化

デジタルツールの活用で

もっと、ラクに暮らしたい！

やりたいことを叶えたい！

を応援します♡

福井県福井市のライフオーガナイザー®︎

中沢まみです。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

◆はじめましての方はこちら⇒★

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

今日は、ちょっと技術的なお話。

フェイスブックにブログ記事をシェアする、という方もいらっしゃると思いますが、「サムネイル画像」で困ったこと、ありませんか？

◆サムネイル画像って？

サムネイル画像は、記事の ”顔” とも言うべき画像です。

アイキャッチ画像とも呼ばれます。

アメブロだと記事一覧に表示されたり…

フェイスブックだと、こんな感じで表示されます。

見た人の目を引き（アイキャッチ）、クリックして記事を読んでもらうために重要な役割を果たしています。

◆具体的に困ることって？

サムネイル画像は、アメブロでもFacebookでも

基本的に「記事の中にあるはじめの画像」が自動で選ばれます。

例として挙げているこちらの記事は現在はこちらの画像が選ばれていますが、

改善前はアメブロではこちらのバナー画像。

facebookではプロフィール写真が選ばれていました。

意図した画像が表示されないことで

記事の内容が伝わりづらい

自分大好きか！みたいな誤解が生まれるかも…

と残念なことに。。。

そもそも、記事のシェアが多い人だと、

毎回プロフィール写真が出てくるのは抵抗ありますよね…＾＾；

◆何が原因でそうなるの？

改善前のアメブロ記事ではサムネイル画像として

記事の一番初めに出てきた「バナー画像」が採用されました。

改善前のfacebookシェアでは、

「プロフィール画像」が採用されました。

この2つの違いは、facebookの仕様にあります。

記事の一番初めに出てきた「バナー画像」のサイズは

「320×100」ピクセルです。

ピクセルというのはパソコン上のサイズの単位ですね。

facebookでは「600×315」ピクセル以上の画像でないと

サムネイル画像として採用されない仕組みだそう。（2018年4月現在）

og:image

オブジェクトの画像URL。サイズは600x315ピクセル以上である必要がありますが、1200x630以上を推奨します(5MB以内)。画像が切れてしまわないよう、アスペクト比をなるべく1.91:1に合わせます。ゲームアイコンは600x600ピクセル以上の正方形にする必要があります。複数の解像度を使用する場合は、複数のog:imageタグを含めることができます。公開後に画像を更新する場合、古いURLがキャッシュされていると更新できない可能性があるため、新しいURLを使用するようにします。

Open Graph - オブジェクトのプロパティ