OGP(Open Graph protocol)って知ってますか?
「フェイスブックなどのSNSがブログやサイトの情報を持って行く際にOGPの情報を参考にする」ようです。どんなサイト管理者も注目する要素ですね。
OGPの設定をして「ひゃっほー」となっている私をあざ笑うかのようにフェイスブックのデバッカーがエラーを吐く・・・
エラーの内容は下記のとおりです。
Google翻訳での和訳をそれっぽく:
FB:adminとfb:APP_IDタグが無いよw 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メタを追加しますよ!
<meta property="fb:admins" content="<!--admin -->" /> <meta property="fb:app_id" content="<!--app_id -->">
上記2つが足りないというエラーなので、この2つを追加します。
それでは、一つずつ数値の確認をします。
fb:adminsの確認
Like Buttonを作る画面のStep2にてOGP作成フォームが用意されています!ログインしている状態でフォームを見てみるとAdminに数字が載っています・・・それです!
仕様が変わったようでステップ2のフォームがなくなっています。
代わりにこちらにアクセスして id を確認して下さい。
fb:app_idの確認
これが面倒くさいのです。デベロッパー登録が必要です。
「デベロッパー登録って何?おいしいの?苦いの?」という人はぜひお調べ下さい。
でもご心配なく実は、上記のadminsのタグだけでエラーは消えます。
デベロッパーと言われて「( ゚д゚)ピーンッ!」と来る人はアプリ設定画面の
「App ID/API Key」を確認して下さい。・・・それです!
合体して完了です。
<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」の設定がない場合
正直・・・エラーが出っぱなしでも正常にフィードは作られていたので、そのままでも良かったんですが、たまたま翻訳にかけてみたら「(高いクリック率を実現するフィード)」なんて書かれてる。そんなこと言われちゃ修正必至でしょうよ・・・サービス固有のタグは消え去る方向で進んで欲しい気持ちでいっぱいです(`・ω・´)ゞ