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を宣伝に使っている時や別キャラクターで運営していて、人目を引くようなタイトルや画像にしたい場合に別途指定しておけば採用されます。

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

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

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

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