2014年11月6日木曜日

ソーシャル メディアで選択利用される画像の優先順位

OGP の og:image、schema.org の itemprop="image"、Twitter カードの twitter:imageのうち、ソーシャルメディアで共有された際に選択される画像について調べてみました。

Facebook Twitter Cards Google+ Pinterest

Facebook

og:image 以外は見ない。 複数の og:image がある場合は、Facebook から URL をシェアするとユーザーが画像を選択できる。シェアボタンは、どのイメージが選択されるか不明で選択されない場合もある。og:image がない場合はページ内のイメージが選択される。

Twitter Cards

twitter:image があれば選択される。twitter:image がない場合は og:image が選択される。 複数の og:image がある場合は最後の og:image が選択される。
twitter はキャッシュが残ってるようで、一度投稿された画像は設定し直してもすぐには反映されない。

Google plus IconGoogle+

twitter:image は見ない。og:image と itemprop="image" を認識する。ユーザーが画像を選択可能。 デフォルトは、itemprop="image"。 Google+ もキャッシュが残ってるようで、一度投稿された画像は設定し直してもすぐには反映されない。

Pinterest

og:image 以外は見ない。ページ内の画像は通常どおりピンできる。
法人用のプロモートピンは、Schema.org マークアップを認識するらしいですが、通常の個人アカウントでは、itemprop="image"は見ていないのを確認済。

SHARED

特殊な例ですが、オンラインストレージの SHARED は、リンクを登録できます。使用されるイメージは最初の og:image が使われる。ない場合はページ内の適当なイメージ。

AddThis

AddThis の Recommended は、最初の og:image が使われる。ない場合はブランクで表示されない。

結果から、すべて OGP で統一すれば良いということになります。

Twitter card はタイプの設定のみ必要。
<meta name='twitter:card' content='summary'>

twitter:titletwitter:description も og:title ,og:description で代替できますが、Twitter を宣伝に使っている時や別キャラクターで運営していて、人目を引くようなタイトルや画像にしたい場合に別途指定しておけば採用されます。

余談ですが、検索エンジンの Bing は、twitter:description を見ていて、検索結果のスニペットに表示させることがあります。

Google+ の構造化データは <body> に置けるのが強みです。構造の中に組み込んで、「何の」画像かを検索エンジンに明示できます。シェアする画像はユーザーが選択できるので、Web制作側としては一番、気をつかわなくて済むサービスです。

Pinterest のリンクは、rel="nofollow"が付いているものの、関連のある独自の面白い画像を作成、OGPに設定しておけば、Pinやクリックされるのでサイトの宣伝に使えるかもしれません。

無料で利用させて戴いているレンタルサーバーは、基本的に他サーバーからの画像の呼び出しを禁じている為、Picasa に画像をおいて確認しました。サーバーの独自の仕様については調べておく必要があります。

ちなみに、運営しているサイトに置いた画像の場合は、Facebook のシェアする画像は O.K ですが、Debugger から画像をクリックするとアクセス不可。Pinterest の Web から追加も不可。Google+ の共有からの画像へのアクセスは可能でした。