Facebook　コミュニティ規約違反対策でOGP設定を変更｜Bloggerカスタマイズ【備忘録】

　このところFacebookでリンクを貼ろうとするとWeb-tonbori堂アネックスのエントリをアップするとコミュニティ規約違反の警告が出てくるのです。それまではまったく普通にアップできていたのに去年の年末にアップしたのまで消えているので、とりあえずコミュニティ規約違反はしていないという報告を出てきたダイアログボックスのリンクからFacebookのヘルプデスクへ送りました。しかし一度も連絡は無いしその後も同じメッセージが出てくるばかり。なのでFacebookシェアデバッカーを使おうにも許可されていないURLとしか出てきません。それであれこれ試す事にしました。

画像はイメージです

トライ&エラー

　最初はまずエントリから全てのURLを削除する事からはじめてみました。実際にはURL抜きのテキストベースのテストエントリを作って投稿してみると同じダイアログメッセージが出てきます。何度やっても同じ事の繰り返しなので、ちょっと待てよこれダイアログ画面の文字列、うちのエントリでもブログのアドレス（URL）じゃないぞと気が付きました。

ダイアログ画面/伏せているところにあるのが問題のあるURLの表示

今まではざっと見ただけでしたが、よくよくダイアログ画面のメッセージのところをよく確認するとある文字列があり、どうやらこの文字列のリンクがコミュニティ規約違反ということのようです。この文字列はURLのhttp後のようで自分のブログアドレスかと思い込んでましたがよく見るとうちのブログのURLではありません。またエントリにはこのようなURLはありません。ですがこのURLには思い当たるところがありました。

　ネタを明かすと実はこれブログのOGP設定で使用させていただいているwebアプリのURLでした。このURLはhttpsではなくhttpでした。最近はhttpsでないURLは「保護されていない通信」としてセキュリティに難ありと判定されます。そのためOGP設定リクエスト送信時にセキュリティ対策としてこの先のURLはセキュリティ的に難ありではじかれるのではないかという仮説を立ててみました。

ブラウザのアドレスバー/保護されている通信状態、鍵がそれを示している

ブラウザのアドレスバー/保護されていない通信、セキュリティに問題がある状態

　テーマ編集でそのURLを削除してみたところ、無事にFacebookにリンクが通りました。それでもTwitterカードで適切な画像表示をするために使わせていただいてたWebアプリだったのでTwitterカードがちゃんと表示出来るかTwitterでも表示出来るか試してみるとそちらも無事に表示できました。使用しているテーマ「QooQ」は新しいテーマなのでTwitterカードが最初から実装されており何もしていない時から表示は可能でしたのでWebアプリは今までお世話になっていましたが思い切ってここはざっくりと削除しました。

　もしFacebook関連で急に「コミュニティ規約違反」が出たときにはダイアログメッセージをよく読んで、表示文字列のURLがhttpかどうかを確認して「保護されていない通信」の場合はそれ削除、ないしは保護された通信（https）に変更するとコミュニティ規約違反は解消されるかもしれません。少なくともtonbori堂のブログではテーマにあるHTML内にあるOGP関係のコード記述からhttpのリンクのあるものは全て削除したところ問題なく表示されるようになりました。

　こうなったのは「保護されていない通信」ではパスワードの流出や情報が盗まれる恐れがあり昨今の状況（個人情報保護やEUの情報規制の関係）で厳しくなってきたのではと思われます。ともかく穴は塞ぐに限るという事で今後新たなサービスなどを導入する際はセキュリティ対策も考慮に入れるターンに来たと思われます。とりあえずはリンクのOGPが効いて表示されるようになったので今回はここまでですが、また何かがひっかかるかもしれません。バグ取りと同じでBloggerは自由度も高いですがそれなりにリスクがあることも頭に入れておきたいですね。以下ソースコードを残しておきます。

テーマ編集

<!head>下のOGP設定を記述している部分を結局書き換える事で決着しました。現在のtonbori堂のテーマでのOGP設定は以下の通りです。幾つかの部分はそれぞれの設定に即して書き換えて下さい。テーマ編集をして書き換える前には必ずバックアップをとって、変更後はそれぞれ挙動を確認してください。

<!-- OGP 共通 -->
<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ja_JP' property='og:locale'/>
<!-- og:image -->
<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
<b:else/>
<meta content='エントリ画像が無い時に画像サムネイル表示させたいURL' property='og:image'/>
</b:if>
<!-- Facebook用設定 -->
<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='&quot;ja_JP&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='Facebookで取得したapp-ID' property='fb:app_id'/>
<!-- End Open Graph metadata -->
<!-- OGP Twitter -->
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta expr:content='エントリ画像が無い時に画像サムネイル表示させたいURL' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>

　以上が今のtonbori堂のOGP設定です。Facebookのapp-IDは以前にOGP関係のエントリに書きましたが、自らで取得したものを入れるようにして下さい。これは手順通りにすれば取れると思います。一応アプリ開発用のIDですが一般に使用されるadmini-IDと違い個人IDに紐付けされないので個人情報保護の観点からこちらを挿入する事が望ましいと思われます。またリンク付き投稿前にFacebookシェアデバッカーでリンクの画像を読み込むようにして下さい。最初は画像が無い状態なのでしばらくしてから「もう一度スクレイピング」ボタンをクリックすると画像が読み込まれます。そうすれば投稿時にスムーズに表示されるかと思います。あと適切な画像が無い場合の代替画像に関しては若干上手くいっていないようですが、表示に関してとりあえずはこちらの意図通りになっているので今回はまずリンクを通すことを最優先ということでこの仕様でいくことにしました。

シェアデバッガー - Facebook for Developers

　tonbori堂の場合はこれでコミュニティ規約違反は出なくなりましたが、他の方で引っかかっている方はエントリや文章の見直しとともに、テーマに入れたスクリプトや外部アプリのリンクがどうなっているか、現状httpsとhttpが混在しているとこういう事が起こり得る可能性はこれからも多いかと思います。使用されている全てのURL関係も当たってみることをおすすめします。（テーマの中にあるhttpはページ内検索ctrl+Fで検索できます。エントリ内も同様です。）

前回OGP設定のエントリBloggerでOGP設定とTwitterカードを改めてなんとかしてみた。｜Bloggerカスタマイズ-Web-tonbori堂アネックス

追記：エントリのテキスト中にあるURLがブロックされている例もありました。ニュースソースとして貼っていたものです。削除すればリンクが通りました。該当リンクが報告されたとありますが、ソース先のURLもちゃんとしたサイトのものなのですが…。個別エントリもそれぞれチェックは必要かと思います。出典元リンクなどが入っている時などは特に。ともかくトライ&エラーは今後も続きそうです。