WordPressテーマにFacebook Open Graphメタデータを追加する方法

WordPressを使い始めたばかりの頃、Facebookで共有されたときに一部のウェブサイトは素晴らしく見えるのに、他のウェブサイトはひどく見えることに気づきました。その違いはコンテンツの質ではありませんでした。それはサイトの所有者がFacebook Open Graphメタデータを正しく設定していたかどうかでした。

FacebookのOpen Graphタグは、ソーシャルメディアプラットフォームにコンテンツをどのように表示するかを指示する命令です。これらがないと、Facebookはどの画像を使用し、どのテキストを表示するかを推測しなければならず、結果はしばしば悪いものになります。

適切なOpen Graphの実装により、共有時にWordPressの投稿がどのように表示されるかを正確に制御でき、エンゲージメントの向上とクリック数の増加につながります。

当社は何年にもわたり、数え切れないほどのWordPressユーザーがOpen Graphメタデータを実装するのを支援してきましたので、どの方法が最も効果的かを知っています。このチュートリアルでは、WordPressテーマにFacebook Open Graphタグを追加するためのいくつかの実績のあるアプローチを順を追って説明します。

WordPressテーマにFacebook Open Graphメタデータを追加する方法

下のクイックリンクを使用して、最も関心のある方法に直接ジャンプできます:

  1. AIOSEOでFacebook Open Graphメタデータを追加する
  2. Yoast SEOを使用してFacebook Open Graphメタデータを設定する
  3. Adding Facebook Open Graph Metadata Using Code

    方法1:AIOSEOでFacebook Open Graphメタデータを追加する

    All in One SEO は、300万以上のウェブサイトで使用されている人気のWordPress SEOプラグインです。これにより、検索エンジンだけでなく、FacebookやTwitterなどのソーシャルプラットフォーム向けにウェブサイトを簡単に最適化できます。

    まず、無料のAll in One SEOプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

    有効化したら、All in One SEO » Social Networks ページにアクセスする必要があります。ここで、FacebookページのURLとその他のすべてのソーシャルネットワークを入力できます。

    WordPress用AIOSEO SEOプラグイン

    次に、ページ上部のFacebookタブをクリックすると、Open Graph Markupがデフォルトで有効になっていることがわかります。

    記事にOpen Graph画像がない場合、デフォルトのFacebook OG画像を選択するには、「画像のアップロードまたは選択」ボタンをクリックできます。

    デフォルトのOpen Graph画像を設定

    下にスクロールすると、サイト名、説明、その他の設定をカスタマイズできます。完了したら、青い「変更を保存」ボタンをクリックすることを忘れないでください。

    サイト全体のOpen Graphメタタグを設定したので、次のステップは個々の投稿やページのOpen Graphメタデータを追加することです。

    デフォルトでは、AIOSEOは投稿タイトルと説明をOpen Graphのタイトルと説明に使用します。各ページや投稿のFacebookサムネイルを手動で設定することもできます。

    投稿またはページを編集し、エディタの下にある「AIOSEO設定」セクションまで下にスクロールします。ここから「ソーシャル」タブに切り替えると、サムネイルのプレビューが表示されます。

    AIOSEO Facebookプレビュー

    ここで、タイトルと説明だけでなく、ソーシャルメディアの画像を設定できます。

    「画像ソース」フィールドまでスクロールダウンするだけです。アイキャッチ画像を使用するか、カスタム画像またはその他のオプションをアップロードするかを選択できます。

    Facebookサムネイルとして使用するWordPress画像を選択する

    方法2:Yoast SEOを使用してFacebook Open Graphメタデータを設定する

    Yoast SEOは、WordPressサイトにFacebook Open Graphメタデータを追加するために使用できる別のWordPress SEOプラグインです。

    まず最初に行うべきことは、Yoast SEOプラグインをインストールして有効化することです。詳細は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

    有効にすると、Facebook Open Graphデータはデフォルトで有効になります。

    これは、Yoast SEO » 設定に移動し、ソーシャル共有セクションまでスクロールすることで確認できます。これで、Open Graphデータ機能が有効になっていることを確認できます。

    Facebook Open Graphを有効にする

    SEO » Social に移動し、「Add Open Graph meta data」の下にある「Enabled」オプションを選択する必要があります。

    設定を保存するか、続行して他のFacebookソーシャルオプションを構成できます。

    Facebookページやインサイトに使用している場合は、FacebookアプリIDを提供できます。また、ホームページのOpen Graphメタタイトル、説明、画像も変更できます。

    最後に、投稿またはページに画像が設定されていない場合に使用されるデフォルトの画像を設定できます。

    Yoast SEOのプレミアムバージョンでは、個々の投稿やページにOpen Graphメタデータを設定することもできます。投稿またはページを編集し、エディタの下にある「Yoast SEO」セクションまでスクロールダウンするだけです。

    Yoastを使用して投稿やページにOpen Graphメタデータを設定する

    ここから、その特定の投稿またはページにFacebookのサムネイルを設定できます。投稿タイトルや説明を設定しない場合、プラグインはSEOのメタタイトルと説明を使用します。

    これで投稿またはページを保存でき、プラグインがFacebook Open Graphメタデータを保存します。

    方法3: コードを使用してFacebook Open Graphメタデータを追加する

    この方法では、通常、コードをテーマのfunctions.phpファイルにコピー&ペーストする必要があります。しかし、カスタムコードをWordPressに追加するのをより簡単かつ安全にするために、代わりにWPCodeプラグインを使用してコードを追加することをお勧めします。

    WPCodeには、基本的なOpen Graphタグを追加するためのものを含む、すぐに使えるコードスニペットのライブラリも付属しているため、数回クリックするだけで済みます。

    まず、無料のWPCodeプラグインをインストールして有効化します。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

    アクティベート後、WordPressダッシュボードからCode Snippets » + Add Snippetに移動できます。

    ライブラリから「Add basic Open Graph Tags」スニペットを検索してください。見つけたら、カーソルを合わせ、「スニペットを使用」ボタンをクリックします。

    ライブラリから「基本的なOpen Graphタグを追加」スニペットを選択します

    その後、WPCodeがコードを自動的に追加し、サイト全体のヘッダーを挿入方法の場所として設定します。

    WPCodeはOpen Graphデータのコードを自動的に追加します

    これで、スニペットを「アクティブ」に切り替えて「更新」ボタンをクリックするだけです。これで、WordPressのヘッダーにFacebook Open Graphメタデータが表示されるようになります。

    スニペットを有効化して更新する

    上級ユーザーの場合は、以下のコードをテーマのfunctions.phpファイルにコピー&ペーストすることもできます。

    この操作ではテーマファイルを直接編集する必要があるため、変更を加える前に必ずテーマファイルをバックアップしてください。

    //Adding the Open Graph in the Language Attributes
    function add_opengraph_doctype( $output ) {
            return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
        }
    add_filter('language_attributes', 'add_opengraph_doctype');
     
    //Lets add Open Graph Meta Info
     
    function insert_fb_in_head() {
        global $post;
        if ( !is_singular()) //if it is not a post or a page
            return;
            echo '<meta property="fb:app_id" content="Your Facebook App ID" />';
            echo '<meta property="og:title" content="' . get_the_title() . '"/>';
            echo '<meta property="og:type" content="article"/>';
            echo '<meta property="og:url" content="' . get_permalink() . '"/>';
            echo '<meta property="og:site_name" content="Your Site Name Goes Here"/>';
        if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
            $default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
            echo '<meta property="og:image" content="' . $default_image . '"/>';
        }
        else{
            $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
            echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
        }
        echo "
    ";
    }
    add_action( 'wp_head', 'insert_fb_in_head', 5 );
    

    17行目の「Your Site Name Goes Here」にサイト名を追加してください。その後、19行目のデフォルトの画像URLを独自の画像URLのいずれかに変更する必要があります。

    ロゴ画像を配置することをお勧めします。これにより、投稿にサムネイルがない場合にサイトのロゴが使用されます。

    また、13行目に独自のFacebookアプリIDを追加する必要があります。Facebookアプリをお持ちでない場合は、コードから13行目を削除できます。

    FacebookとWordPressの専門家ガイド

    この記事がWordPressにFacebook Open Graphメタデータを追加するのに役立ったことを願っています。FacebookをWordPressで使用する方法に関連する他のガイドも参照することをお勧めします。

    この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

    開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

    究極のWordPressツールキット

    無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

    読者とのインタラクション

    222 CommentsLeave a Reply

    1. AIOSEOで、アイキャッチ画像のない投稿にデフォルトのOpen Graph画像を設定できるのは良いですね。
      アイキャッチ画像を設定していない古いブログ記事がいくつかあるので、私の全身ロゴ(私自身の写真も編集したもの)をOpen Graph画像として指定できるのは助かります。
      これにより、アイキャッチ画像を追加する時間がなくても、投稿がソーシャルメディアで適切に共有されるようになります。

    2. これは確かに役立ちますが、SEO Yoastのインターフェースはもはやこのようには見えません。更新が必要です。

      • Thank you for letting us know that their interface has been updated, we will look to update it when we update the article :)

        管理者

    3. チュートリアルありがとうございます。AIO SEOにOpen Graphを追加していましたが、AIO SEOがそれがないと表示するのでまだ驚いています。SEO評価でリフレッシュをクリックする必要があることに気づくまで約30分かかりました。これにより、プラグインは新しいWordPress設定をダウンロードし、新しいSEO分析を実行します。とても簡単なことなのに、こんなに時間がかかりました。

    4. こんにちは、コードスニペットをありがとうございます。試すのを楽しみにしています。一つ質問があります。これにより、Facebookが各ブログ投稿のサムネイル画像(「サムネイル」のことですか?)と抜粋を取得できるようになりますか、それとも行19で指定されたサイト全体のロゴ画像のみを使用しますか?Blog2Socialを試しましたが、投稿にサムネイル画像と抜粋がなく、見栄えが悪かったです。ありがとうございます!

      • コードスニペットは、投稿のアイキャッチ画像をアイキャッチ画像に設定する必要があります。

        管理者

    5. こんにちは、

      素晴らしいコードです。しかし、なぜ og:url と og:image が変更されないのでしょうか。デフォルトで画像が設定されていない投稿で試しましたが、FBデバッガーで確認すると、og:image 部分に追加した画像を取得するのではなく、フッターのロゴが選択されてしまいます。
      タイトルは機能しており、元のものから変更され、og:description も貼り付けました。最も重要なメタタグはすべてですが、画像と URL だけです。
      なぜでしょうか?

      ありがとうございます。
      アティラ

      • コードと一致するように更新されない最も一般的な理由ですので、WordPressサイトのキャッシュをクリアしたことを確認してください。

        管理者

    6. こんにちは、カスタム投稿タイプのOGタグを追加するためにコードをどのように変更できますか?if ( !is_singular()) をif ( is_singluar( array( ‘post’, ‘publications’) ) ) に変更しようとしましたが、ウェブサイトで致命的なエラーが発生しました。誰か助けてくれませんか、ありがとう

      • You should not need to modify the code to work with custom post types and it should work on them :)

        管理者

    7. こんにちは、提案されたすべての解決策を試しましたが、スキーマにいくつかのパラメータが不足しています。
      必須フィールドが不足しています: id
      必須フィールドが不足しています: price
      必須フィールドが不足しています: availability

      プラグインまたはfunction.phpコードの更新で解決策はありますか?

      • それはあなたがあなたのサイトで販売している製品のマークアップであり、All in One SEOにはあなたの製品にそのマークアップを追加するオプションがあります。

        管理者

    8. Yoast SEOの設定を使用した場合、Facebook共有で完璧な結果が表示されるまでに時間がかかりますか?それとも数分以内に機能し始めますか?

      • これは、サイトのキャッシュとFacebook側のキャッシュによって、かかる時間が異なります。

        管理者

          • すべてのソーシャルサイトで設定した内容が表示されない場合は、Yoastのサポートに連絡して、プラグインに問題がないことを確認してください。

    9. こんにちは
      Facebookで投稿を共有すると、投稿のアイキャッチ画像がこのようになります。
      しかし、WhatsAppで共有すると、リンクにアイキャッチ画像が表示されません。助けてください。

      • メタデータを追加するためにYoastを使用している場合は、まずYoastに連絡して既知の問題がないことを確認することをお勧めします。

        管理者

    10. プレビューでの私のタイトルは次のようになります:

      %%title%% %%page%% %%sep%% %%sitename%%

      これをどうやって修正すればいいですか?

    11. こんにちは、助けてください
      Facebookが私のサイトをブロックしました。Facebook開発者アプリでも、Facebookがブロックしたため、サイトをリンクできません。

      Facebookでウェブサイトのブロックを解除する方法を教えてください

    12. こんにちは

      チャイルドテーマを使用する場合、親テーマのfunctions.phpをコピーして、新しく作成したfunctions.phpに上記のスクリプトを追加し、チャイルドテーマフォルダにアップロードする必要がありますか?それとも、親テーマのfunctions.phpにスクリプトを追加するだけでよいですか?

      Sadieさん、お読みいただきありがとうございます

    13. カードに表示される「投稿者…」を削除するにはどうすればよいですか?

      現在、サイト名 | サイト名 By と表示される問題があります

      最初のウェブサイト名だけが表示され、二重に表示されないようにしたいのです。

    14. これは自己ホスト型ウェブサイトで使用しています。wordpress.com上にないサイトの場合、置き換えるべきUSER IDはどうすればよいですか?

    15. こんにちは。
      大きな問題があります!!
      Facebookで投稿を共有すると、投稿のアイキャッチ画像が表示されます。
      しかし、WhatsAppで共有すると、リンク付きのアイキャッチ画像が表示されません。助けてください。

    16. 全て順調ですが、まだ一つ問題があります。Facebook IDを追加するにはどうすればよいですか?このコードを使用した後、以下のFacebook IDメッセージが表示されます。

      「fb:app_id」プロパティは明示的に指定する必要があります。アプリIDを指定すると、Facebookに共有されたストーリーがアプリに正しく帰属するようになります。または、共有ダイアログを開く際にurlでapp_idを設定することもできます。

    17. この記事は楽しめましたが、2018年1月の時点でこの*手動コード*オプションは完全に機能しないようです。例えば、デフォルトの画像プロパティが機能することは確認しましたが、新しい投稿を作成する際に、「open graph (og)」メタデータを編集できるフィールドはどこにも表示されません。

      何か提案はありますか?よろしくお願いします!

    18. 素晴らしい情報をありがとうございます。しかし、一つ質問があります。

      私たちのサイトにFacebook Graphメタデータを追加することは、どれほど役立ちますか?

      そして、それが非常に役立つ場合、どのような目的で役立つのでしょうか?

    19. ウェブサイト全体ではなく、WordPressサイトの特定のページでサムネイル画像を 変更したい場合はどうすればよいですか?例えば、サイトのイベントページを共有したいのですが、ユニークで関連性のあるサムネイル画像を使いたいのです。助けてください?

      • ジンさん、こんにちは。質問の答えはもう得られましたか?私も同じ情報を探しています。
        ありがとうございます!

    20. こんにちは、WordPress SEO by Yoastを含めたいのですが、最新バージョンが私のWordPressバージョン(4.2.2)と互換性があるかどうかわかりません。有効にしても安全かどうか知っていますか?

      ありがとう、皆さん

    21. Facebookのプロフィールが公開されていないと、FacebookユーザーIDをここで使用することはできませんか?

    22. テーマに手動で追加するためのコードを追加しました。しかし、うまくいきません。FacebookのユーザーIDにアクセスするには、私のプロフィールは公開されている必要がありますか?

    23. これは今日でも有効ですか?試してみたところ動作しましたが、コードで次のことに気づきました:「xmlns:fb=”http://www.facebook.com/2008/fbml”‘;」

      2008年は少し古すぎませんか?今日使うべき新しいプロトコルはありますか?

    24. こんにちは、投稿ありがとうございます。1つ疑問が残りました。各投稿のメタタグは、説明していただいた関数によって動的に構築されると理解しました。しかし、その関数で呼び出される変数がどこで定義され、格納されているのかが分かりません。property=”og:type” content=”article”/ のように固定文字列で定義する場合。しかし、property=”og:title” content=”‘ . get_the_title() . ‘” のように使用する場合、get_the_title() 関数はどこから値を取得するのでしょうか?コードが各パラメータに対して適切なメタデータを取得できるように、各投稿の値を事前にどのように定義できますか?

      • get_the_title() は投稿のタイトルを取得します。別のものを使用したい場合は、メタボックスから値を取得することもできます。Advanced Custom Fieldsプラグインを使用している場合は、get_field(“my_field”) のようになります。通常のWordPressカスタムメタフィールドの場合は、get_post_meta($post->ID, “my_field”, true) のようになります。get_post_meta() を参照してください。

    25. 説明が分かりやすいです!Facebookは幅と高さの両方で最低200pxのサイズを必要とするため、それ以外の場合は投稿の別の画像が使用されるため、アイキャッチ画像のサイズを確認するコードをどこに追加できるか考えています。
      何かお手伝いいただけると幸いです!

    26. Yoastを使ってメタデータを有効にし、Pinterestでリッチピンを使用できるようにしようとしています。このチュートリアルに書かれている通りに実行しましたが、Pinterestは私の投稿を認識しません。他に試せるプラグインはありますか?

    27. Yoastプラグインを追加しましたが、ソーシャルオプションがありません。助けてください。この問題で私は途方に暮れています。

      • Yoastをインストールしたら、「SEO » ダッシュボード » タイトルとメタディスクリプション」の下、さらにその中の「ソーシャル」を確認してください。
        ソーシャル設定で、Facebookタブの「Open Graphメタデータを追加」を有効にしてください。

        • このオプションは、プラグインのv4.6にはありません。
          SEO >> ダッシュボードの下には、ダッシュボード、一般、機能、会社情報、ウェブマスターツール、セキュリティのタブがあります。タイトルとメタやソーシャルに関する言及はありません。

          これは、Facebookのソーシャルプロフィールを設定していないからですか?OGの設定ができるだけで、これは必要ないはずです!

    28. 検索結果テンプレートにソーシャル共有を追加したので、各抜粋に共有ボタンがありますが、共有されるメタデータがめちゃくちゃで、これを制御できません。各メタディスクリプションが異なる20件の結果が同じページにある場合、これをより良く機能させる方法はありますか?

    29. こんにちは、助けていただけますか?コードをfunctionsに追加しましたが、headに何を追加すればよいですか?

    30. ホームページを除外するための良い改善策もここにあります:

      if (is_front_page()){ echo ""; echo ""; echo ""; }else{ echo ""; echo ""; }

    31. Yoastプラグインをダウンロードし、ホームページ用に設定しましたが、Facebookでウェブサイトを入力しても、指定した画像や記述したテキストスニペットが表示されません。
      また、提供されたリンクでFacebookのURLを見つけることもできません。エラーが表示されるだけです…
      デバッグを試しましたが、Facebookページはデバッグできず、キャッシュもないと表示されます。
      ということで…今のところ何も機能していません!

    32. こんにちは。

      SEO Yoastを持っていますが、新しい画像をアップロードしましたが、Facebookでまだ機能していません……???

    33. ありがとうございます。ヘッダーに手動でオープングラフを追加しました。完璧です!! ありがとうございます!!

    34. FacebookをWordPressページに接続するプロセスについて、この非常に詳細な説明をいただき、ありがとうございました。他のサイトや推奨事項に従って、何日も試していました。今晩、Google検索からあなたのページを見つけ、うまくいきました。やったー!本当にありがとうございます。

    35. この情報ありがとうございます。非常に分かりやすかったです。Yoastプラグインをアップロードし、すべての手順に従って保存しましたが、サムネイルはまだ空白のボックスのままです。反映されるのに時間がかかりますか?FacebookまたはWordPressにログアウトして再度ログインする必要がありますか?

    36. 皆さん、こんにちは。og:descriptionで問題が発生しています。共有ページでは基本的にすべてのフォーマットが失われています。改行が尊重されていませんが、これを制御するにはどうすればよいですか?
      よろしくお願いします!

    37. ありがとうございます。サイトから直接ソーシャルボタンを使用してリンクを共有したいのですが。しかし、例えばFacebookの共有ボタンをクリックすると、画像と説明は以前の情報を使用しています。Yoast SEOを使用して画像と説明を更新し、その投稿の画像と説明を特別にカスタマイズしたにもかかわらず。私が間違っていることは何ですか?

    38. ありがとうございます。どれくらいこのことを理解しようとしていたか分かりません。レシピの場合はZiPLISTで簡単にできましたが、記事の場合は理解できませんでした。

    39. こんにちは!解決方法がわからない問題があります。ブログや特定のページからFacebookにリンクを共有しようとすると、「ページが見つかりません」というメッセージが表示されるか、理解できない記号の付いたリンクが表示されます。オブジェクトデバッガーでリンクを確認したところ、次のメッセージが表示されました:必須プロパティ「og:title」がタイプ「string」として提供されていません。どうすれば解決できますか?

    40. @Syed Balkhi。----- 質問があります。すべてのタグを設定し、警告なしでクリーンなデバッグテスト結果を得た後、誰かが私のウェブページで使用しているFacebookいいねボタンをクリックすると、Facebookタイムラインフィードに表示されず、最近のアクティビティセクションにのみ表示されます。なぜですか?いいねボタンをクリックしたときにニュースフィードに直接表示されるように、他に何か追加する必要がありますか??????

    返信する

    コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。