FacebookOpenGraphデバッガーを使用して一般的なエラーを修正する方法

公開: 2020-08-25

Facebookデバッガーは、任意のページのOpenGraphタグを分析およびトラブルシューティングできるようにするツールです。 デバッガーを使用すると、ソーシャルメディアのリッチスニペット内のエラーの原因にすばやく焦点を合わせることができます。

ソーシャルメディアとFacebook自体は、あらゆるマーケティング戦略の重要な要素であるため、このツールの使用方法を知っていると、利益を得ることができます。

FacebookデバッガとOpenGraphについて話しましょう！

OpenGraphとは何ですか（そしてWordPressでタグを追加する方法）

OpenGraphは、ページや投稿にメタデータを追加するために使用できるタグのコレクションを指します。 ソーシャルメディアプラットフォームは、これらのOpenGraphタグを使用して、ユーザーに表示するリッチスニペットを生成します。

Facebookのリッチスニペットの例。

OpenGraphタグを使用しない場合、ソーシャルメディアプラットフォームは、ページを共有するときにページのスニペットを自動的に生成します。 ただし、そのアプローチでは、これらのリッチスニペットの外観を完全に制御できなくなります。

つまり、添付の画像が見栄えが悪い場合は、WordPress内で変更する必要があります。 Facebookが使用するメタディスクリプションが気に入らない場合は、コンテンツも変更する必要があります。 全体として、ソーシャルをトラフィックソースとして活用したい場合、これは賢明なアプローチではありません。

この単純な例でも、バックグラウンドで複数のOpenGraphタグを追加する必要があります。 リッチスニペットの場合、次のタグを使用する必要があります。 

<meta property="og:title" content="Article Title"/>
<meta property="og:description" content="Article Description"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://example.com/link/to/article"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="og:image" content="http://example.com/image/src.jpg"/>

この例は、OpenGraphタグとその使用方法に関する以前のElegant Themesの記事からのものです（これを読む必要があります！）。 一言で言えば、OpenGraphタグをコンテンツに追加する方法は2つあります。

  1. 手動で。 スキーママークアップと同様に、OpenGraphタグをページに手動で追加できます。 欠点は、ソーシャルメディアで共有したいWebサイトのすべてのページに対してこれを行う必要があることです。
  2. プラグインの使用。 コンテンツのOpenGraphタグを自動的に生成するプラグインはたくさんあります。 最も人気のあるプラグインオプションはYoastSEOですが、他の人もこれを行うことができます。

残念ながら、YoastSEOの無料バージョンにはリッチスニペットプレビュー機能が含まれていません。 ただし、単純なエディターを使用してコンテンツのOpenGraphタグを変更することはできます。

もしも すでにYoastSEOを使用している場合、OpenGraph機能を利用するのが、ソーシャルメディアスニペットを希望どおりに正確に表示するための最も簡単な方法です。

OpenGraphにFacebookデバッガーを使用する必要がある理由

Facebookデバッガーは、ソーシャルメディアのリッチスニペットが全面的に完全に機能するようにするのに役立つツールです。 これを使用するには、Facebook開発者向けの共有デバッガーページにアクセスするだけです。 ここで、タグを確認するページのURLを入力し、[デバッグ]ボタンをクリックします。

Facebookデバッガー。

デバッガーを使用するのにFacebookアカウントも必要ありません。 URLを分析するとすぐに、正規URLなどの情報とともにリッチスニペットのプレビューが表示されます。

動作中のFacebookデバッガー。

さらに下にスクロールすると、ページのすべてのOpenGraphタグを分析できます。

OpenGraphタグのリスト。

Facebookデバッガーでは、エラーを修正したり、タグを直接変更したりすることはできません。 ただし、Facebookでコンテンツがどのように表示されるかのプレビューは表示されます。 さらに重要なことに、OpenGraphタグでエラーを検出した場合にも警告が表示されます。

Facebookデバッガーの警告。

この特定のエラーは、次のセクションでトラブルシューティングする方法を示す3つのエラーの1つです。

Facebookデバッガーを使用して3つの一般的なOpenGraphエラーを修正する方法

このセクションでは、主にFacebookデバッガーに依存します。 ただし、Yoast SEOを使用している場合は、プラグインがいくつかのOpenGraphエラーの修正にどのように役立つかについても説明します。 それを手に入れよう！

1. URLを再度スクレイピングして、関連する画像を更新します

OpenGraphタグで発生する可能性のある最も一般的なエラーの1つは、Facebookデバッガーに古い注目の画像が表示されることです。 これは、ページまたは投稿の関連画像を更新したときにFacebookで自動的に更新されないために発生します。 画像にOpenGraphタグを使用すると、Facebookはパフォーマンスを向上させるためにそれらのファイルを最後にキャッシュします。 したがって、自分の側で注目の画像を更新する場合は、Facebookに同じことを「強制」する必要があります。

これを行う最も簡単な方法は、FacebookデバッガーのScrapeAgain機能を使用することです。 このオプションは、URLを最後にスクレイピングした日時と方法のすぐ下にあります。

スクレープアゲイン機能の使用。

[もう一度スクレイプ]ボタンをクリックして、[リンクプレビュー]セクションでページの注目画像が変更されるかどうかを確認します。 そうでない場合は、ボタンをもう一度クリックするとうまくいくことがあります（それほどハイテクではありませんが、機能します！）

画像のアップロードに失敗した場合は、ウェブサイトのキャッシュの問題に対処している可能性があります。 この場合、サイトのキャッシュをクリアしてから、[スクレイプアゲイン]ボタンを使用して、Facebookに画像情報の更新を強制する必要があります。

2.「プロパティはまだ利用できません」エラーを修正します

og：imageタグは、OpenGraphがソーシャルメディアプラットフォームが各ページに表示する画像ファイルを宣言するために使用するものです。 場合によっては、「og：imageプロパティはまだ利用できません」というエラーが発生する可能性があります。

OpenGraphイメージタグの警告。

これは、注目の画像の解像度に問題がある可能性があることを意味します。 画像のサイズが200×200未満の場合、まったく機能しません。

理想的には、ソーシャルメディアのリッチスニペットに設定する画像は、幅が1080ピクセル以上である必要があります。 大きな注目の画像は見栄えが良いだけでなく、ソーシャルメディア上のコンテンツに注目を集めるのにも役立ちます。

大きな注目の画像。

画像とog：imageタグについて詳しく知りたい場合は、ElegantThemesブログに別の記事があります。 簡単に言うと、Facebookデバッガーが画像のサイズに関連するエラーを返した場合、通常は次の2つの方法のいずれかを使用して修正できます。

  1. ページの注目画像を高解像度バージョンで更新します（そして、今後は高品質の画像を使用することに固執します！）。
  2. Yoast SEOを使用して、 og：imageタグ内の別の画像ファイルを示します。

Yoast SEOの場合、更新する投稿またはページの[ソーシャル]タブで「Facebook画像」を変更するオプションを見つけることができます。

新しいFacebook画像をアップロードしています。

画像または対応するタグを更新したら、Facebookデバッガーの[再度スクレイプ]ボタンを使用します。 「og：imageプロパティはまだ利用できません」という警告が消え、画像が正しく表示されるはずです。

3.不足しているfb：app_idプロパティをWebサイトに追加します

記事の前半で取り上げた警告に戻りましょう。

Facebookデバッガエラーの例。

この警告は、Webサイトに関連付けられているFacebookアプリIDがないことを意味します。 ソーシャルメディアでコンテンツを共有するためにアプリIDは必要ありませんが、FacebookInsightsにアクセスすることはできます。

Facebook Insightsがマーケティング活動の改善と投稿のパフォーマンスの測定に役立つことを考えると、セットアップに少し時間をかけるだけの価値があります。 これらの分析にアクセスすることに興味がある場合は、WebサイトのFacebookアプリIDを生成する必要があります。

アプリIDを取得したら、Yoast SEOを使用して、 fb：app_idプロパティを使用してアプリIDをページに追加できます。 これを行うには、サイトの[ SEO ] > [ソーシャル] > [Facebook ]タブに移動し、[ FacebookアプリID]フィールドを探します。

Yoastを使用してFacebookアプリIDをWordPressに追加します。

アプリIDを追加し、プラグインの設定への変更を保存すれば、準備は完了です。 今後、Facebookデバッガーは、欠落しているfb：app_idプロパティに関連するエラーを返さないようにする必要があります。

結論

Facebookデバッガーは非常に簡単に使用できます。 ただし、発生する可能性のあるエラーの中には、OpenGraphタグの基本的な理解がないと理解しにくいものがあります。 一般的に、Yoast SEOなどのプラグインを使用する場合は、タグを手動で設定する必要はありません。

Facebookデバッガーを使用すると、次の方法でOpenGraphエラーのトラブルシューティングをすばやく行うことができます。

  1. 関連する画像を更新するためにURLを再度スクレイピングします。
  2. 「og：imageプロパティはまだ利用できません」エラーを修正しました。
  3. 不足しているfb：app_idプロパティをWebサイトに追加します。

Facebookデバッガーの使用方法について質問がありますか？ 以下のコメントセクションでそれらについて話しましょう！

Sergey Targasov /shutterstock.comによる記事のサムネイル画像。