Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

Facebook OGP 小技集

FacebookのOGPを簡単に確認するための5つの便利ツール

投稿日:


ogp_01
ご無沙汰しております、ヤガーです。
今までのFacebook関連のネタや、OGPに関する記事を書いてきましたが、さすがに企業サイトやブログなどではOGPの設定が浸透してきていると思います。OGPがあるとないとではウォールに流れた際の反応が全然違いますからね。で、このOGPなんですがFacebookはパフォーマンスのためか一度読んだものはキャッシュしてしまいます。metaタグの構成を変えたり、そもそも記事内容を変更したとしても、1度でもいいね!押されているとその状態のOGP設定が残ってしまいます。
そこで、OGPの設定を確認するためのFacebook公式ツール「デバッガー」を使うのですが、このデバッガーを使うとキャッシュもクリアできるので、表示が切り替わらないって場合にも有効です。
このデバッガー関連の便利ツールを5つ紹介します。

1)Facebook公式デバッガー

デバッガー – Facebook開発者
120525-0001
先に紹介した、本家デバッガーです。以前はURL Linterなんて名前でしたが、APIのアクセストークンなどを確認したりもできる、統合的なデバッグツールにバージョンアップされました。
OGPの確認をしたい場合は、上のスクリーンショットのように調べたいURLを入力して「デバッグ」を押します。

2)ブックマークレット

OGPタグチェックのブックマークレットを作成しました! – SINAPlog
120525-0002
頻繁にチェックする場合は、デバッガーの画面に行ってURLを貼り付けるのも面倒だと思います。そこでブックマークレットから簡単にチェックできるツールを公開されている方がいました。上記ページからブックマークレットをブラウザに登録しておいて調べたいページで実行するだけです。
デバッガーをAPIとして実行し、LightBox風に結果を表示してくれます。
説明が日本語なのも嬉しいですね。

3)Firefoxアドオン

FacebookのOGPcheckerのFirefoxアドオンを作ったよ。 – milkteaさんち。
120525-0003
Firefoxアドオンもありました。
上記ページからリンクされているGitHubページへ行き、ogpcheckerをダウンロードします。解凍してでてきたxpiファイルをFirefoxに放り込めばインストールできます。
インストールされると右クリックメニューに「OGP Checker」が追加されるのでクリックすると、FacebookのデバッガーにURLが入った状態でジャンプします。

4)Chrome拡張

FacebookのOGPを簡単に確認するためのChrome拡張作ったよー : 異聞録 @ikko
120525-0005
やっぱり、Chrome拡張もありました。
上記ページからリンクされているChromeウェブストアからインストールできます。
インストールされるとツールバーと右クリックメニューに「OGPを確認」ボタンが追加されるのでクリックすると、FacebookのデバッガーにURLが入った状態でジャンプします。

5)OGP一括デバッガー(Facebookアプリ)

OGP一括デバッガー All About en Factory (オールアバウトエンファクトリー)
120525-0006
最後にかなりマニアックなツールもご紹介。
とくに、CMSやWEBサービスなどを運営している人は、テンプレートをいじって大量のOGPキャッシュをクリアしたいケースもあると思います。そんな時にデバッガーを一度に複数URL(最大100件!)を対象に実行できるというものです。
※このツールはFacebookページのTabアプリとして提供されているためAll About en Factory社のFacebookページにいいね!が必要です。
120525-0007
テキストエリアがあるので、改行区切りで複数のURLを入力します。(URLが区切られていれば改行じゃなくスペースやタブでもいいみたいです。URLをエクセルなどでエクスポート出来る人はそこからコピペが早いと思います)
で、「デバッグを開始」を押すと。
120525-0008
下に、各URLのチェック結果がサマリーで表示されます。
問題があるURLの「+」ボタンを押すと、
120525-0009
問題の詳細を確認することができました。
メッセージが英語(デバッガーの原文ママ)なのでちょっと分かりにくいかもしれませんが、最大100件のチェックができてキャッシュもクリアできるのでものすごい便利です!
開発者のみなさんは使いやすそうなものを選んで試してみてくださいね。

-Facebook, OGP, 小技集

執筆者:

関連記事

[N]ネタフル x [S]シカマケ = ブログデザイン勉強会 第3回:自分探しの旅は一周して写真に回帰

昨日は、ネタフルのコグレマサトさん主催、視覚マーケティングのススメの著者で鬼コーチこと(w)ウジトモコさんを講師に迎えての勉強会の第3回に行ってきました。 これまで、第1回では1枚絵で、第2回ではテー …

ちょっとまった!→FeedBurner経由の分散したブックマークを一つにまとめる方法

つい先日、FeedBurnerのトラッキング用パラメーターを取り除くUserScriptというのを公開したのですが、FeedBurnerやTwitterFeedが勝手に追加してくるパラメーターがウザイ …

no image

第7回:サムネイル作成APIをJavaScriptで簡単に切り替える方法

SimpleAPIをはじめたくさんのサムネイルAPIサービス(もちろん無料)のおかげで、簡単にサイトのスクリーンショットをサムネイル画像として自分のブログに貼り付ける事ができるようになりました。すでに …

屋外イベントでライブ配信と会場モニター映写した時の色々

このGWに自分が管理人として運営している千葉県富津市のローカルメディア富津っ子として、地元イベントのお手伝いをしてきたのですが、ちょっとテックよりな内容をこちらに記録しておこうと思います。 そのイベン …

no image

第5回:twitter の JavaScript Badge を改造する

しつこく twitter ネタでまいります。 前回の記事で JavaScript の Badge がちゃんと動くようになりました。これで CSS を使えば自由にレイアウトできるようにはなったんだけど、 …

スポンサードリンク

スポンサードリンク