前回、OGPについてざっくりとお話ししました。
今回は実際にOGPを設定してたり、いざ設定するときに使うツールを紹介します。
TwitterのOGPツール
TwitterのOGPがらみで使うツールはひとつしかなく、それが「
Card Validator」です。
使うタイミングとしては、ふたつ。
その1: サイトに設定したOGPがうまくいってるか確認するとき
Card Validatorの左側のテキストボックスに、OGPを設定したサイトのURLを入力してエンターを押すだけ!問題なく設定されてれば、右側にプレビューが表示されます。
その2: OGPの設定を変えたけどTwitterに反映されないとき
もうひとつの使うタイミングとしては、OGPで引っ張ってくる画像やサイト名などを変更したときです。
OGPの設定を変えたとき、その変更はほっといても時間が経てば反映されますが、すぐ変更を反映したい場合などは、Card Validator を使うとよいです。
Card ValidatorはOGPの設定をチェックするだけではなく、TwitterのサーバーにあるOGPのキャッシュを更新する機能も兼ね揃えています。
FacebookのOGPツール
Facebookの方がややこしく、ふたつのページが用意されています。
- シェアデバッガー
- Open Graph オブジェクトデバッガー
Twitterの場合は Card Validator だけなので簡単ですが、Facebookの場合は少し複雑で、上で挙げたふたつのページは、それぞれ役割がちょっと違います。
シェアデバッガーでは、ウェブサイトのコンテンツがFacebookやMessengerなどでシェアされたときに使用された情報を見ることができます。…(中略)…Open Graphオブジェクトデバッガーは、オブジェクトの情報をチェックするためのものです。
なるほど(わからん)。
ぐぐってみると、Open Graph オブジェクトデバッガーは「OGPのキャッシュクリアと再取得を行う」ページ、シェアデバッガーは「FacebookにURLがシェアされたときの見え方をチェックする」ページらしかったです。
したがって、「その1: サイトに設定したOGPがうまくいってるか確認するとき」にはシェアデバッガーを、「その2: OGPの設定を変えたけどTwitterに反映されないとき」にはOpen Graph オブジェクトデバッガーを使うと良さそうですね。
シェアデバッガーを使ってみるとこんなふうに表示されました。(一部)
Open Graph オブジェクトデバッガーはこんな感じに(一部)。すごく似てますが使われている言葉が少し違っていて、役割が分断されているのが感じられますね。
おわりに
OGPの設定を変えたけどうまくいかない方を多く見かけます。そんな方々に少しでもお役に立てれば幸いです。