OGP SNS

OGPがらみでよく使うページをまとめた

前回、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の方がややこしく、ふたつのページが用意されています。
  1. シェアデバッガー
  2. 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の設定を変えたけどうまくいかない方を多く見かけます。そんな方々に少しでもお役に立てれば幸いです。