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, 小技集

執筆者:

関連記事

Raspberry Pi 4 Model B 8GBでライブ配信(1) USB接続のWEBカメラ映像をFFmpegで保存してみる

ブログご無沙汰しております。ヤガーです。 本業のWEB開発と並行して、リモートワーク推奨の影響でライブ配信などの需要が高まっており、以前よりイベントなどで配信をしていた関係で様々な形式でのライブ配信方 …

第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法

前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。 ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 via: 第1 …

no image

JavaScriptのポップアップウィンドウ禁止しているブラウザへの代替処理

ものすごく今更な話しかもしれないけど、最近、IE・FirefoxはもちろんSafariやOperaを同時に起動していたりして気付いたんだけど、モダンブラウザにはポップアップブロック機能(別ウィンドウを …

【更新】ソーシャルメディアに共有するボタンの設置方法(Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ)

ソーシャルメディアの各サービスがこぞって「いいね!」などの共有ボタンをリリースしています。ブログやニュースメディアでも頻繁に目にする昨今ですが、色々なソーシャルボタンの設置方法をまとめて紹介したいと思 …

Ffmpegで複数動画を結合して一つの動画に出力

いつも、動画変換においてやりたいことがあってもコマンドを思い出せないFfmpeg。今回もこのごろ良く使うものを自分用のメモを兼ねて記録しておきます。

スポンサードリンク

スポンサードリンク