« 今年もISICOで開催されています!ネットショップスキルアップ講座のお知らせ | メイン | 白山高山植物公園の期間限定オープンガーデンに行って登山気分を味わってきました »

TOP> Webをカスタマイズ

FacebookのOGP設定をURLリンターのエラーを元に再考、FacebookとWebサイトの連携を改善する

このWebサイトには、Facebookとの連携を図るOGPを設定している。

Googleアナリティクスの新機能にソーシャルメニュー(コンテンツ>ソーシャル)が強化されたことからOGP機能の設定確認、活用方法を改めて考えるための再設定を行った。

以前、Zenbackを元にしたOGP設定についての設定方法「Facebookとの効果的な連携活用ができるOGPをZenbackのFacebook関連機能を利用して実装してみた」を書いた。

がその後、Zenbackの利用を止めたので、現在はFacebook指定のXFBML形式で「いいね!」ボタン、「送る」ボタン、そして、Facebook用のコメントを各記事の下部に設置している。

Facebookが提供しているURLリンターで、久々にページのチェックを行ったところ、エラーが発生していることが判明。
(本当は毎回、記事を書いた時にチェックするのが理想だ。)

「解決する必要があるオープンソースの警告」で出たメッセージ

1.[fb:author]というオブジェクトタイプはない
2.[og:image]で設定されている画像が、200pxより小さい。
3.それに伴い設定されたメタデータが上手く反映されない。云々(たぶん・・・)のような感じ

FacebookのURLリンターのエラー表示

・1を解決
[fb:author]→[<meta property="og:type" content="author" />]
ただし、[og:type]はすでに[<meta property="og:type" content="article" />]で設定されているため、2つtypeを指定するとエラー表示される。

参考:「Open Graph ProtocolのObject types」 by Facebook developers

初期のFacebookの本などには、[og:author]として[<meta property="og:author" content="name xxxxx" />]と書かれているが、これもNG。
複数人で運営しているサイトやブログでなければ、adminで著者情報は表示できるので、設定する必要はないかと思われる。
また、CMSで構築された記事であれば、[author]を記事ごとに変更することは、変数指定などを行わないと実現は難しい。(WordPressなどはプラグインがあると思うが・・・)

デフォルトのOGPコードを設定するためには、Facebook developersサイトにLikeボタンのタグを提示できるのと同様に、「Open Graph Tags」を利用して発行できる(以前はなかったような気がするが・・・?)

Step 2 - Get Open Graph Tags by Facebook

Open Graph Tagsでコードを出力

・2を解決
以前は、画像サイズの大きさの指定はなかったが、Facebookは常にバージョンアップされるので対応するしかない。
またFBデザインの変更に伴い変更されるかもしれないので、多少大きめ設定が良いであろう。

今までは記事の画像が表示されずサイドメニューなどのアイコン画像が取得されていてミスマッチだったので、固定の画像設定をしていた。
しかし、現在は[og:image]を設定していなくても、記事の最初の画像を表示してくれるようになっているようなので、[og:image]は設定していなくても良いかと思う。

但し、設定していないとURLリンターには以下のメッセージが表示される。
まあ、無視しましょう(笑)

------------------------------------
修正が必要な[いいね!]ボタンの警告

Like Button Tag Missing: og:image is missing. The og:image meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.
解決する必要があるオープングラフの警告

Inferred Property: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

------------------------------------

・3を解決
1と2を解決したら、表示されなくなった。


ということで、OGPの再設定は完了。

FacebookインサイトでのWebサイトの登録についても再度見直しを行い、サイト上でのFacebookアクションをきちんと把握することが必要である。

また、Googleアナリティクスのソーシャル>ソーシャルプラグインとの互換性、および検証も行なっていく必要がある。今のところ、なんだか両者は一部、照合しているが全く一致しているようではない気がする。
以後の記事で報告していくつもり。

関連記事:「Googleアナリティクスの新機能、ソーシャル分析のためのトラッキングコードの設定・Facebookの場合」

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)