フェイスブック用にOGPの設定してたら修正が必要な[いいね！]ボタンの警告？

OGP(Open Graph protocol)って知ってますか？
「フェイスブックなどのSNSがブログやサイトの情報を持って行く際にOGPの情報を参考にする」ようです。どんなサイト管理者も注目する要素ですね。

エラーが出る「修正が必要な[いいね！]ボタンの警告」

OGPの設定をして「ひゃっほー」となっている私をあざ笑うかのようにフェイスブックのデバッカーがエラーを吐く・・・

・Facebookのデバッカー

エラーの内容は下記のとおりです。

Admins And App ID Missing:
fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

Google翻訳での和訳をそれっぽく：
FB：adminとfb：APP_IDタグが無いよｗ Facebookが素敵なニュースフィード(高いクリック率を実現するフィード)を作るためには、このタグが必要だよ！

これはいかんですよ！高いクリック率なんて言われたら、エラーを改善するしかない！

素敵なニュースフィードを作ってもらうために

まず、一般的なOGPは下記です。

<meta property="og:title" content="<!--ページタイトル -->">
<meta property="og:type" content="blog">
<meta property="og:url" content="<!--URL -->">
<meta property="og:image" content="<!--OGP用サムネイル画像URL -->">
<meta property="og:site_name" content="<!--サイトタイトル -->">
<meta property="og:description" content="<!--ページの概要 -->" />
<meta property="og:locale" content="ja_JP" />

このOGPさえちゃんと設定できていれば適切な情報をSNSに送ることは可能なのです。
でも、フェイスブックさんは「足りねぇ！」とおっしゃるので、このOGPメタタグにFB用のOGPメタを追加しますよ！

フェイスブック用のOGPメタタグ

<meta property="fb:admins" content="<!--admin -->" />
<meta property="fb:app_id" content="<!--app_id -->">  

上記2つが足りないというエラーなので、この2つを追加します。
それでは、一つずつ数値の確認をします。

fb:adminsの確認

Like Buttonを作る画面のStep2にてOGP作成フォームが用意されています！ログインしている状態でフォームを見てみるとAdminに数字が載っています・・・それです！

仕様が変わったようでステップ２のフォームがなくなっています。
代わりにこちらにアクセスして id を確認して下さい。

fb:app_idの確認

これが面倒くさいのです。デベロッパー登録が必要です。
「デベロッパー登録って何？おいしいの？苦いの？」という人はぜひお調べ下さい。
でもご心配なく実は、上記のadminsのタグだけでエラーは消えます。

デベロッパーと言われて「( ﾟдﾟ)ﾋﾟｰﾝｯ!」と来る人はアプリ設定画面の
「App ID/API Key」を確認して下さい。・・・それです！

OGPのソースコードを合体させます☆-(ノﾟДﾟ)八(ﾟДﾟ )ノｲｴｰｲ

合体して完了です。

<meta property="fb:admins" content="<!--admin -->" />
<meta property="fb:app_id" content="<!--app_id -->">  
<meta property="og:title" content="<!--ページタイトル -->">
<meta property="og:type" content="blog">
<meta property="og:url" content="<!--URL -->">
<meta property="og:image" content="<!--OGP用サムネイル画像URL -->">
<meta property="og:site_name" content="<!--サイトタイトル -->">
<meta property="og:description" content="<!--ページの概要 -->" />
<meta property="og:locale" content="ja_JP" />

以上で「修正が必要な[いいね！]ボタンの警告」は消えます(｀･ω･´)ゞ

※はみ出し情報
「修正が必要な[いいね！]ボタンの警告」みたいなエラーはいくつかあるみたい。
「解決する必要があるオープングラフの警告」など見たことがあります。

原因となっていたのは、私の経験だと下記があげられます。

警告の原因種類

「fb:admins/fb:app_id」が無い場合
「og:image」で指定している画像が200px以下の場合
「og:locale」の設定がない場合

正直・・・エラーが出っぱなしでも正常にフィードは作られていたので、そのままでも良かったんですが、たまたま翻訳にかけてみたら「(高いクリック率を実現するフィード)」なんて書かれてる。そんなこと言われちゃ修正必至でしょうよ・・・サービス固有のタグは消え去る方向で進んで欲しい気持ちでいっぱいです(｀･ω･´)ゞ