メディア運営者に役立つ Facebook OGP のキャッシュクリアが簡単にできるChrome 拡張機能を開発しました。

Facebook OGP のキャッシュクリアを簡単に！Chrome 拡張：OGP Debugger を公開しました。

開発にいたった経緯

僕はこのブログ以外に、あるメディアを運営しております。
そのメディアはある地域特化型メディアなんですが、ありがたいことに Facebook ページの登録者数（いいね数）も3万人を超えており、記事を書いたら毎回 Facebook にも流すように　Facebook の更新も行っています。
Facebook ページで記事を流すとき、フィード作成時にURLを貼り付けて、Facebook のクローラーが巡回して該当のページタイトルやサムネイルイメージを取得するんですが、どうしてかこの1回目のURL貼り付けではうまく必要な情報を拾ってくれないんですよね。
もういちどやりなおしても1回目の取得情報をキャッシュしているので、意図したオブジェクトを表示するためにはこのキャッシュ情報を毎回クリアしないといけないんですよ。
１．Facebook のディベロッパーサイトにアクセス
２．記事URLを入力
３．キャッシュをクリア
という作業が必要で、単純なんですがこれが毎日と続くと意外と大変です。

OGP checker が使えない

そんな時に便利だったのがもともと Chrome 拡張としてストアに公開されていた、OGP checker というのがあったんですが、今日使ってみると Facebook の仕様変更なのかわからないんですが、使えなくなっていました。
ダウンロード数も 1,200 ほどあったので、これは相当困っている人もいたはずです。

アップデートを待とうと考えたけど…

そもそも Chrome の拡張機能は Javascript で作ることができるうえ、僕が愛用していた OGP checker の機能自体はとても簡単だったので、作ることにしました。
30分もあればできるだろうと思っていたんですが、Chrome 拡張仕様でページURL取得にハマってしまい、結局 2 時間ほどかかってしまいました。
Chrome 拡張の開発ドキュメントはこちらが参考になります。

Develop Extensions：https://developer.chrome.com/extensions/devguide

開発した Chrome 拡張は自分だけで使うこともできるのですが、きっと困っている人もいると思うので、chrome ウェブストアに公開しておきました。
もちろん無料で使えるので使ってみてください。

Chrome拡張：OGP Debugger

Chrome 拡張を追加すると、アドレスバーの右にこんな歯車のアイコンで出てきます。

機能は簡単で、記事を開いてこのFacebook 色の歯車アイコンをクリックするだけです。
Facebook のディベロッパーサイトがURLが入った状態で立ち上がるので、そのページで OGP 情報を確認してみてください。
キャッシュクリアが必要な場合はそのページにある もう一度スクレイピング というボタンを押すとキャッシュがクリアされて再クロールします。

まとめ｜牛丼一杯我慢しました

それにしても無料で公開するだけなのに Chrome のディベロッパー登録に $5 も払ったのは痛い(泣)
平成最後の日は今夢中になっているEA開発に充てようと思っていたのに、思わぬ寄り道をしてしまいました。
使ってみてね！