FacebookのOGP(og:video)を細かく調べてみた

FacebookのOGP(og:video)を細かく調べてみた 以前、SMMLabに下記のような記事を寄稿しました。
【保存版】やるとやらないでは大違い!Facebookいいね!ボタンを最適化する「OGP」設定方法まとめ | ソーシャルメディアマーケティングラボ
この時、あまり触れなかったog:videoについて詳細に見てみます。

基本 Open Graph Protocol - Facebook開発者に記載のある最低限だと下記になります。
<meta property="og:video" content="http://example.com/awesome.swf" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:secure_url" content="https://secure.example.com/awesome.swf" />

og:video:secure_urlがないとhttpsで閲覧しているユーザーは閲覧ができないとのことです。
YouTubeでは記載なくても再生されますが、Vimeoは一応og:video:secure_urlの指定があります。
またFLASHに対応していないデバイスに対しては、html5のvideoで表示させるためmp4の記載もある方がいいようです。

YouTubeの記載例 Lady Gaga - Born This Way を例に見ていきます。

このページでの記載は以下のようになっています。
<meta property="og:url" content="http://www.youtube.com/watch?v=wV1FrqwZyKw"> <meta property="og:title" content="Lady Gaga - Born This Way"> <meta property="og:description" content="WRITTEN BY LADY GAGA. EXECUTIVE PRODUCER: VINCENT HERBERT. DIRECTED BY NICK KNIGHT. CHOREOGRAPHY BY LAURIE ANN GIBSON. #VEVOCertified on Oct. 3, 2012. http:/..."> <meta property="og:type" content="video">
<meta property="og:image" content="http://i4.ytimg.com/vi/wV1FrqwZyKw/mqdefault.jpg">
<meta property="og:video" content="http://www.youtube.com/v/wV1FrqwZyKw?version=3&autohide=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="1920">
<meta property="og:video:height" content="1080">
og:video:secure_urlもmp4の記載もありません。
Facebookにシェアするとこんな具合になります。

三角の再生ボタンをクリックすることで、Facebook内で再生されます。

さて、少しひねくれてvideoの記載を省いていったらどうなるか見てみましょう。

例1 og:typeとog:videoのみにすると・・・
<meta property="og:type" content="video">
<meta property="og:video" content="http://www.youtube.com/v/wV1FrqwZyKw?version=3&autohide=1">


クリックすると再生されずに、ページURLへ遷移され残念な感じです。

例2 og:imageを抜いてみると・・・
<meta property="og:type" content="video">
<meta property="og:video" content="http://www.youtube.com/v/wV1FrqwZyKw?version=3&autohide=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="1920">
<meta property="og:video:height" content="1080">

videoに限らず、imageがないと例1同様な表示になると同時に、せっかくvideo属性を記述したのに、Facebook内で再生されません。

例3 imageを無関係なものに変えてみます。
<meta property="og:type" content="video">
<meta property="og:image" content="http://www.skuare.net/mt/mt-static/support/assets_c/userpics/userpic-1-100x100.png">
<meta property="og:video" content="http://www.youtube.com/v/wV1FrqwZyKw?version=3&autohide=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="1920">
<meta property="og:video:height" content="1080">

クリックするとFacebookで再生され、skuareがGagaを歌う感じになりました。

例4 videoの幅を変えてみます。
<meta property="og:type" content="video">
<meta property="og:image" content="http://www.skuare.net/mt/mt-static/support/assets_c/userpics/userpic-1-100x100.png">
<meta property="og:video" content="http://www.youtube.com/v/wV1FrqwZyKw?version=3&autohide=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="320">
<meta property="og:video:height" content="1080">

Facebookに表示されるのは普通ですが・・・

小さすぎる!と言われて砂嵐となり再生されませんでした。。。

というわけで、幅などの指定はなくても問題無さそうですが、og:type、og:image、og:videoはしっかり指定しましょう。

sponsors

「FacebookのOGP(og:video)を細かく調べてみた」をシェアする

記事作成:
記事URL:

TOP > > > FacebookのOGP(og:video)を細かく調べてみた