FacebookのOGP画像のタグ設定/確認方法！デバッガーでキャッシュ削除するには？

実名で登録し、現実の友人とネットワーク上の友人のどちらとも繋がりができる、世界的に有名なSNSのFacebook。Facebookを知らない方は少ないかもしれませんが、FacebookのOGPを知らない方は案外多いかもしれません。今回はそんなFacebookのOGPについて詳しく解説いたします。

OGP(Open Graph Protocol/オープン グラフ プロトコル)とは、SNS上に載せたWebページや画像などの内容を、正しく伝えるためのプロトコルのことです。

OGPを設定することでURLの詳細を伝えることができ、ユーザーにとって閲覧しやすい状態になるため、あなたが載せた内容に人が集まりやすくなります。SNSでサイトや記事などをシェアしたいと思ったときはOGPを活用しましょう。

プロトコルとは、コンピューター同士の言語のようなものです。会話をするうえで言語を合わせることが当たり前のように、プロトコルが正しく設定されていないと、きちんと通信が繋がらず、意図した通りに内容が表示されません。

例えば、Web上で使われている【http】もプロトコルの一つです。【http】タグを使うことでお互いの通信が正しく繋がり、正しい内容の受け渡しができます。OGPも同じように、Facebook上でより分かりやすく内容を伝え、多くの方と内容をシェアすることができます。

上記の説明でも、「OGPとは？」「プロトコルとは？」というような疑問が浮かんだままでしたら、「プロトコルとは、ネットワークに必要なルール」とざっくり覚えておきましょう。このルールは基本的に変わることがないので、意味が理解できずそのまま丸覚えしてしまってもOGPを使うことはできます。

OGPのメリットはやはり、閲覧者に対する分かりやすさと、その結果、OGPで設定したサイトや記事のアクセス数の増加です。

テキストのみがぎっしり詰まった記事と、画像やテキストが程よく並べられた記事、どちらの方が好まれるでしょうか。大多数が後者を選ぶことでしょう。つまり、まずは内容より見た目が重要です。人の印象がおよそ半分ほど見た目で決まるように、人間は視覚情報に重きを置く生物です。

いきなり伝えたいことを山のように書いて投稿したとして、どんなに内容が良くても大半の方は見た目のテキスト量に引いてしまいます。しかし、OGPを設定して、タイトルや画像で簡単な情報をワンクッションとして置くと、その見た目に興味を持ちリンクにアクセスしてくれます。

OGPは、内容に興味を持たせるという非常に大きなメリットを持っているということです。

逆にOGPのデメリットは何か気になる方もいるでしょう。結論から言いますと、デメリットはほとんどありません。強いて言うなら、パソコン初心者には聞きなれない用語が多く、少し手間がかかるという点でしょうか。

OGPの設定内容が違うと上手く反映されないため、OGPを設定することに四苦八苦するかもしれません。しかしそれさえ乗り越えれば、アクセス数が伸び悩んでいるサイトや記事などの、アクセス数を増やすことができるかもしれません。得られる恩恵はとても大きいので、OGPを設定して損することはないでしょう。

まずはOGPの基本の設定から確認しましょう。OGPは【html】の【head】内にmetaタグを設定することでできます。
 

OGPの基本は大まかな分け方として、4種類あります。

OGPではページタイトルの設定は必須です。URLや画像だけを載せても、シェアしたい相手には載せた意図が伝わりません。シェアしたい相手にしっかり印象が残るよう、タイトルの設定をしましょう。全体的に20文字以内が理想と言われています。

ページタイトル設定のタグ

OGPの設定時にページのURLも忘れないように設定しましょう。URLがなければリンクが繋がらず、Webページに移動できません。シェアしたい相手がWebページに移動しやすいように、しっかりとURLを設定してください。

ページのURL設定のタグ

画像のURLも設定します。画像のURLを設定できていなければ、正しい画像が表示されず、シェアしたい相手に疑問を持たれてしまうでしょう。画像は内容に対する第一印象の半分以上を占めます。OGPはそんな視覚情報を与える強みがあります。OGPの強みを生かすためにも、内容に関係があり、シェアしたい相手の心をつかむような画像を選びましょう。

画像のURL設定のタグ

この時点で画像のサイズを調整できるようでしたら調整しましょう。画像のサイズが大きすぎでも、小さすぎても、見づらいと思われてしまいます。今は、画像のサイズを簡単に調整できるアプリなどもありますので、簡単にサイズを変更できます。画像のサイズと一緒に少しだけ画像を加工すれば、見栄えも変わってさらに印象に残りやすくなるでしょう。

ちなみに、Facebookで推奨されている画像サイズは【720ピクセル(幅)】【960ピクセル(幅)】【2048ピクセル(幅)】です。画像を綺麗に表示させたいなら最大サイズの【2048ピクセル(幅)】が適しています。投稿する画像サイズを一度確認して、Facebookに合った画像を選びましょう。

必須項目ではありませんが、OGPはホームページのタイトルや、ページの説明文、連絡先なども設定できます。内容に応じて必要なタグを設定しましょう。ページの説明文はメタディスクリプションを使用すると良いです。

メタディスクリプションとは、description(ディスクリプション)のmetaタグという意味です。ディスクリプションは説明文や広告文のことで、検索結果などに表示されます。ページタイトルと同様に、人に見てもらいやすくするうえでとても重要なものです。

こちらを設定することで載せた内容がさらに見やすくなり、シェアしたい相手にとって親切な表示になるので、ぜひ設定しておきましょう。

その他の設定のタグ

基本的なOGPの設定方法は4点、【ページタイトル】【ページのURL】【画像のURL】【その他の設定】です。こちらをしっかり念頭に置いたうえで、FacebookのOGP設定方法とは具体的にどういうものか、確認しましょう。

FacebookのOGP設定には、なくてはならないものが存在します。それは【Facebook App ID】の存在です。FacebookのOGP設定に【Facebook App ID】は必須です、こちらがないと内容を投稿したあなたの管理者情報を、Facebookが確認できないため、OGPが上手く設定されずエラーが出てしまいます。

そのため、【Facebook App ID】を持っていない方は、OGP設定のため【Facebook ​​​​​​​App ID】を取得する必要があります。

【Facebook App ID】とは、名前の通りFacebook用のIDのことで、OGPの設定時やアプリの作成時に必ず必要なものです。しかし、【Facebook App ID】の取得方法は少し特殊ですので、順を追って説明いたします。

まずは、【facebook for developers】を開きましょう。

【facebook for developers】の右上にある【マイアプリ】という欄を選択し、【新しいアプリを追加】を選びましょう。

【新しいアプリIDを作成】と表示が出ます。表示名を入力し、連絡先メールアドレスが正しいことを確認して、【アプリIDを作成してください】を選んでください。

セキュリティチェックでOKが出たら、新しいアプリのページが表示されます。ダッシュボードを選択すると、上の方にアプリIDの記載があり、これが【Facebook App ID】です。

このままだと、【Facebook App ID】が使えない状態なので、【Facebook App IDを有効にしましょう。

左にある【設定(ベーシック)】を選択し、プライバシーポリシーのURLを入力します。そのまま下にスクロールすると【プラットフォームを追加】とありますので、そちらを選択してプラットフォームを追加しましょう。FacebookのOGTのために使うなら、【ウェブサイト】で大丈夫です。

最後に、左にある【アプリレビュー】を選択し、「○○を公開しますか？」と記載された箇所を【いいえ】から【はい】に変更すれば完了です。

この一連の設定をすることで、【Facebook App ID】を使用できます。

しかし、Facebookは仕様が良く変わるため、現在(2018年12月14日)の設定方法とは違う方法に代わる可能性があります。こちらの記事を確認しながら操作していただけるのはとてもありがたいですが、公式の説明も確認しておきましょう。

OGPをしっかり設定しても、それがFacebookに表示されなければ非常に困惑するでしょう。そうならないために、OGPで【fb:app_id】というタグを設定しましょう。【fb:app_id】タグを設定することで、設定したOGPをFacebookで正しく表示させられます。

fb:app_idタグ

【App ID】を取得するのは面倒だと言う方は、【fb:admins】というタグを使用する方法もあります。内容としては【fb:app_id】タグと同じで、設定したOGPをFacebookで正しく表示させてくれます。

ただし、【fb:admins】タグには大きな注意点があります。【fb:admins】タグは、【adminID】という個人IDを使用するため、個人情報が開けっ広げな状態になってしまいます。

企業アカウントの方は問題ないでしょうが、個人アカウントの方はリスクが大きいでしょう。そのため個人アカウントの場合は、個人情報を守るためにも、OGP設定の際は【fb:app_id】タグの利用をおすすめします。

それでもOGP設定時に、【fb:admins】を使用するという方は、【adminID】を確認しましょう。

確認方法は何点かあります。一つ目は、Webサービスで確認する方法です。
テキストボックスにURLを張り付けて、【Find numeric ID】を選択するだけです。

二つ目は、Facebookアカウントで確認する方法です。
Facebookアカウントを開き、自分のプロフィール写真を表示させます。その画面のアドレスバーを確認してください。URLの最後あたりが【〇〇〇〇〇&type=1&theater】と記載されています、この【〇〇〇〇〇】の部分があなたの【adminID】です。

fb:adminsタグ

FacebookでOGPを利用し、記事をシェアしようとしたは良いものの、URLやタグが本当に正しく設定されているか、OGPが思い描いたように反映されるか、不安という方もいらっしゃるでしょう。FacebookのOGPを確認する方法があれば確認して安心を得たいはずです。

ご安心ください、FacebookのOGP確認方法はあります。FacebookのOGP設定は【シェアデバッガー】で確認しましょう。

【シェアデバッガー(Facebookデバッガー)】とは、FacebookのOGPも含めた、多種多様なデータを閲覧し確認できるツールのことです。

お持ちのFacebookアカウントでアクセスして確認してみましょう。URLを入力し、【デバッグ】を選択するだけで確認できます。

例えば、上の画像のように【Facebook URLはクロールされません。】とエラーが出た場合、Facebook上ではOGPが正しく機能していないことがはっきりと分かります。まずは、URLを入力してOGPの情報が表示されるかどうかが分かれ目でしょう。

【シェアデバッガー(Facebookデバッガー)】は、設定したURLの間違いがあるかどうか確認できますし、設定したリンクのプレビューも閲覧できるので、自分が思い描いている記事と、シェアしたい相手が見た時の記事とのズレが発生せずに済みます。気になる方は【シェアデバッガー(Facebookデバッガー)】を使ってOGPの確認をしてみましょう。

ちなみに、【シェアデバッガー(Facebookデバッガー)】のほかに、【オブジェクトデバッガー】というものもあります。【オブジェクトデバッガー】とは、OGP専用のデバッガーのことで、内容は【シェアデバッガー(Facebookデバッガー)】と同様です。どちらを使用してもOGPの内容は確認できますので、使用したい方を使用しましょう。

OGPで設定した画像のサイズが正しいかどうかも気になる点でしょう。画像サイズを確認する方法も、もちろんございます。

画像サイズの確認には【OGP画像シミュレーター】を利用しましょう。

【OGP画像シミュレーター】とは、Facebook上で投稿した画像がどのように表示されるかシミュレートするツールのことです。【ドラッグ&ドロップで画像を追加】のところに画像を追加するだけで、Facebook上でどれくらいのサイズで表示されるか確認できます。

【OGP画像シミュレーター】で画像サイズの変更はできませんので、画像サイズを変更したい場合はアプリなどを使い、画像サイズを調整しましょう。

FacebookでOGPの設定を修正した場合や変更した場合、最新の情報が反映されず、OGPの内容が以前のままというケースがあります。FacebookにOGPの古いキャッシュが残っていることが原因かもしれません。OGPの設定に限らず、古いキャッシュが残ったままだと様々な不具合が発生しやすいです。

その際は古いキャッシュをクリアして、OGPの問題が改善されたか確認してみましょう。キャッシュのクリアには【シェアデバッガー(Facebookデバッガー)】を使用します。

【シェアデバッガー(Facebookデバッガー)】にアクセスし、URLを入力してキャッシュ情報を確認しましょう。キャッシュ情報を確認し、キャッシュをクリアしても大丈夫だと判断したら、【もう一度スクレイピング】を選択します。そうすると、キャッシュがクリアされ、最新の情報が反映されます。

【オブジェクトデバッガー】でも同様に、キャッシュをクリアできます。どちらがより優れているというのはありませんので、古いキャッシュをクリアしたい場合はどちらかを利用しましょう。

キャッシュをクリアしても問題が改善されない場合、キャッシュが問題ではなく、修正したOGPの内容に何か問題があるかもしれません。まずはキャッシュのクリアを試し、キャッシュの問題ではなかった時は別の問題にも目を向けてみましょう。

そもそも、FacebookのOGPを設定する際、何に気を付ければいいか分からない、という方もいるかもしれません。そんな方のために、FacebookのOGP設定で気をつけるべきポイントをご説明します。

まず、FacebookのOGP設定は1ページ毎に設定することが重要です。シェアしたい画像がたくさんあった場合、全てをOGP設定しようとしても、OGPは正しく設定されません。画像を複数設定できるのは企業アカウントのみで、個人アカウントでは設定できません。

そのため1ページ毎にOGTを設定する必要があります。OGTの項目を1ページずつ設定するのは大変でしょうが、多くの方に閲覧してもらえるよう頑張りましょう。

気を付けていただきたいのが、全てのサイトがOGP設定できるとは限らないという点です。サイトの種類によっては、OGP設定してもエラーが出るというケースが発生します。

OGP設定したいサイトが、設定可能なサイトなのか確認しましょう。OGP設定が難しいようであれば、【Yoast SEO】【All in One SEO】などのWordPressのプラグインを利用してみましょう。

「OGPとは？」「プロトコルとは？」そうやって疑問に思う方は少なくありません。OGPという文字列だけで小難しそうな印象を持ち、苦手意識が芽生えてしまう方もいるでしょう。しかし、今回説明したようにOGPは少しの手間と時間を使うことで、非常に便利な機能を発揮してくれます。

Facebookを使用するなら、多くのユーザーにサイトや記事をシェアしたいはずです。たくさんのユーザーに見てもらい、繋がることができる結果を生み出してくれるのがOGPです。一度、FacebookのOGPを使用してみましょう。使用することでOGPに慣れ、OGPに対する苦手意識がなくなるかもしれません。