Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressテーマでFacebook Open Graphメタ情報を追加する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPress テーマに Facebook Open Graph メタデータを追加したいですか?

Open Graphメタデータは、Facebookや他のソーシャルメディアサイトがWordPressの投稿やページに関する情報を取得するのに役立ちます。また、Facebook で共有されたときにコンテンツがどのように表示されるかをコントロールすることもできます。

この投稿では、WordPressテーマにFacebook Open Graphメタデータを簡単に追加する方法を紹介します。

How to Add Facebook Open Graph Meta Data in WordPress Themes

あなたのWordPressサイトに最適な方法をお選びください:

方法1:AIOSEOでFacebookのオープングラフメタデータを追加する

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

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

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

The AIOSEO SEO plugin for WordPress

次に、ページ上部のFacebookタブをクリックすると、Open Graph Markupが初期設定で有効化されていることがわかります。

投稿にオープングラフ画像がない場合、「アップロードまたは画像を選択」ボタンをクリックして初期設定のFacebook OG画像を選択することができます。

Set default Open Graph image

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

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

初期設定では、AIOSEOは投稿のタイトルと説明をオープングラフのタイトルと説明に使用します。また、各ページや投稿にFacebookのサムネイルを手動で設定することもできます。

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

AIOSEO Facebook preview

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

画像ソース」フィールドまでスクロールしてください。アイキャッチ画像を使用するか、カスタム画像をアップロードするか、その他のオプションを選択できます。

Choose which WordPress image to use as your Facebook thumbnail

方法2: Yoast SEOを使ってFacebookのオープングラフメタデータを設定する

Yoast SEOもWordPressのSEOプラグインで、Facebook Open GraphメタデータをWordPressサイトに追加することができる。

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

有効化したFacebook Open Graphデータは初期設定で有効化されます。

これを確認するには、Yoast SEO ” 設定に行き、ソーシャル共有セクションまでスクロールダウンします。これで、Open Graphデータ機能が有効化されていることを確認できます。

Enable Facebook Open Graph

SEO ” Socialに移動し、’Add Open Graph meta data’の下にある’有効化’オプションを選択する必要があります。

設定を保存したり、続けて他のFacebookのソーシャルオプションを設定することができます。

FacebookページやインサイトにFacebookアプリIDを使用している場合は、それをプロバイダーとして提供できます。また、ホームページのオープングラフのメタ情報のタイトル、説明、画像を変更することもできます。

最後に、投稿やページに画像が設定されていない場合に使用する初期画像を設定することができます。

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

Set open graph meta data for post and pages using Yoast

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

投稿やページを保存すると、プラグインがFacebookのOpen Graphメタデータを保存します。

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

この方法ではテーマファイルを編集する必要があるので、変更を加える前にテーマファイルをバックアップしておいてください。

その後、このコードをテーマのfunctions.phpファイルにコピー&ペーストするか、WPCodeプラグイン(推奨)を使用してコードスニペットを追加するだけです。

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

有効化した後、WordPressダッシュボードからCode Snippets ” + Add Snippetに行くことができます。Add Your Custom Code (New Snippet)」と書かれた最初のスニペットにマウスオーバーし、「Use snippet」ボタンをクリックします。

Adding Your Custom Code in WPCode

新しいスニペットが作成されるので、タイトルを入力し、「PHP Snippet」コードタイプを選択します。その後、’Code Preview’セクションに以下のコードを投稿してください:

//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行目を削除してください。

The New Code Snippet in WPCode

コードの更新が完了したら、スニペットを「有効化」に切り替え、「スニペットを保存」ボタンをクリックします。テーマがWordPressヘッダーにFacebook Open Graphメタデータを表示するようになります。

FacebookとWordPressのエキスパートガイド

Facebook Open Graphメタデータを追加する方法はお分かりいただけたと思いますが、WordPressでFacebookを利用する方法に関する他のガイドもご覧ください:

この投稿がWordPressでFacebook Open Graphメタデータを追加するのにお役に立てば幸いです。WordPressでプレゼントやコンテストを開催する方法や、専門家が選ぶブログを成長させる最高のFacebookプラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

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

Reader Interactions

222件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Daniel says

    This is indeed helpful but SEO Yoast’s interface doesn’t look like this anymore. This needs updating.

    • WPBeginner Support says

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

      管理者

  3. Jiří Vaněk says

    Thanks for the tutorial. I’ve been adding Open Graph in AIO SEO and I’m still surprised that AIO SEO tells me there isn’t one. I spent about half an hour on this before I found out that I had to click refresh again in the SEO evaluation so that the plugin would download the new WordPress settings and do a new SEO analysis. Such a simple thing and it took me so long.

  4. Harry Goldhagen says

    Hello, thanks for the code snippet, I look forward to trying it. One question, will it then allow FB to pick up the featured image (is that the “thumbnail”?) and excerpt for each blog post, or will it just use the sitewide logo image designated in line 19? I’ve tried Blog2Social, but the posts lacked the featured image and excerpt and did not look good. Thanks!

    • WPBeginner Support says

      The code snippet should set your featured image to the featured image of the post.

      管理者

  5. Kiss Attila says

    Hi,

    Awesome code. BUT, why it’s not changes og:url and og:image. I tried with a post with no image set as default. But checking it on fb debugger, it picks up my logo from the footer instead of getting the image I added in the og:image part.
    Title is working it changed from the origin and I pasted og:description too. All the most important metas but image and url.
    Why is that?

    Thanks,
    Atila

    • WPBeginner Support says

      Please ensure you’ve cleared any caching on your WordPress site as that is the most common reason it would not update to match the code.

      管理者

  6. rehman says

    hi how can i modify the code to add OG tags for custom post types i tried by changing this line code if ( !is_singular()) to if ( is_singluar( array( ‘post’, ‘publications’) ) ) but my website throw fatal error. can anyone please help thank you

    • WPBeginner Support says

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

      管理者

  7. gabriele biagini says

    Hello, i tried all the solution suggested still i miss some parameter to the schema:
    A required field is missing: id
    A required field is missing: price
    A required field is missing: availability

    Is there any solution via plugin or updating the function.php code?

    • WPBeginner Support says

      That would be markup for a product you are selling on your site and All in One SEO does have the option to add that markup to your products.

      管理者

  8. Indranil Paul says

    If I use the Yoast SEO settings, will it take times for showing the perfect result in facebook share? Or will it start working within minutes?

    • WPBeginner Support says

      That would depend on your site’s caching and any caching on Facebook for how long it takes

      管理者

        • WPBeginner Support says

          If it is not showing what you set on every social site, you would want to reach out to Yoast’s support and let them know to ensure there isn’t a problem with the plugin.

  9. Udaya Bhaskar says

    Hello
    When I share my post in facebook it’s how my post featured image .
    But when I share in whatsapp it’s not show my featured image with link please help me..

    • WPBeginner Support says

      If you’re using Yoast to add the meta data, we would first recommend reaching out to Yoast to ensure that there aren’t any known issues.

      管理者

  10. Pramod Singh says

    Hello please help me
    Facebook has blocked my site, now in the Facebook developer app, I can not even link my site because it has blocked the Facebook

    Please tell me how to unblock your website with Facebook

  11. Sadie says

    Hello

    Please can you advise when using a child theme – do i need to copy the parent theme functions.php and then add the above script to a newly created functions.php and upload it to the child theme folder OR do I just add the script to the parent theme functions.php

    Thanks for reading Sadie

  12. Max says

    How would I remove the “By …” from appearing on the card?

    Currently we have an issue where it displays as: site-name | By site-name

    We just want the first website name to appear and not twice.

  13. Laura says

    I’m using this on a self-hosted website. What do I do about the USER ID that I’m supposed to replace since the site is not on wordpress.com?

  14. Suraj says

    Hello,
    I have a big problem!!
    When I share my post in facebook it’s how my post featured image .
    But when I share in whatsapp it’s not show my featured image with link please help me..

  15. Malik Adil says

    All Good, But still one problem, How to add Facebook ID..After using this code, following Facebook ID message appears.

    The ‘fb:app_id’ property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.

  16. Eric Hepperle says

    I enjoyed this article, but in January 2018 this *manual code* option doesn’t appear to work completely. For instance, though I have verified that the default image property works, when I create a new post, I don’t see ANYWHERE a field where one can begin to edit “open graph (og)” metadata.

    Suggestions? Thanks!

  17. Mahesh Yadav says

    Thanks for such great information. But I have one question.

    How helpful it is to add facebook graph meta data in our site..?

    And if it is very much helpful, for what purpose, it is helpful..?

  18. Jin Miller says

    What if I am wanting to change the thumbnail image not for the whole site, but just a page off my wordpress site : For example I’m trying to share an event page from my site and would like a unique, relevant thumbnail. Help?

  19. Vic says

    Hey, I wanted to include Worpress SEO by Yoast but Im not sure if latest version is compatible with my version of Worpress (4.2.2) do you know if is safe to activate?

    Thanks guys

  20. Martin says

    Does my Facebook profile have to be public in order for my Facebook User ID to be good to use here?

  21. Martin says

    I’ve added the code for manually adding this to my theme. However, things aren’t working. Does my profile have to be public in order for my Facebook user id to be accessible?

  22. Jordan Carter says

    Is this still valid for today? I tried it and works, but I noticed in the code the following: “xmlns:fb=”http://www.facebook.com/2008/fbml”‘;

    Isn’t 2008 a little old? Is there a newer protocol we should be using today?

  23. Wagner Lungov says

    Hello, thanks for posting. I remained with one doubt. I understood that the in each post is dynamically constructed by the functions you explained so well. What I can’t figure out is where the variables called by that function are defined and stored. When you put property=”og:type” content=”article”/, OK you are defining with a fixed string. But when you use: property=”og:title” content=”‘ . get_the_title() . ‘”, where is the function get_the_title() going to get it? How can I define before hand those values for each post in a way that the code will pick the right meta data for each parameter?

    • Jordan Carter says

      get_the_title() will get your post title. If you want to use something else, you could always get the value from a meta box. With the advanced custom fields plugin, it would be something like get_field(“my_field”), or with a regular WordPress custom meta field it would be get_post_meta($post->ID, “my_field”, true). See get_post_meta()

  24. Jolanda says

    Nicely explained! I try to figure out where I can add the code in checking the size of the featured image, since FB needs a size with a minimum of 200px for both width and height, otherwise it will use another image from the post.
    Any help would be great!

  25. Devyn says

    I’ve been trying to use Yoast to enable my meta data so I can use Rich Pins on Pinterest. I’ve done what this tutorial says, but Pinterest still won’t recognize my post. Is there another plugin I could try?

  26. Michelle says

    I added the Yoast plugin and there is no social option. Please help me. I am at my wits end with this issue.

    • Glenford says

      Once you have Yoast installed the look under SEO » Dashboard » Titles & Metas and under that is Social.
      in Social you should Enable the “Add Open Graph meta data” in the Facebook tab.

      • Xavier says

        This option just isn’t there with v4.6 of the plugin.
        Under SEO >> Dashboard, the tabs I have are: Dashboard, General, Features, Company info, Webmaster tools and Security. No mention of Titles & Metas or Social.

        Is this because I haven’t set up a Facebook social profile? Surely this shouldn’t be needed just to be able to configure OG stuff!

  27. joe Barrett says

    I added social sharing to the search result template, so each excerpt has a share button BUT the meta data that is shared is messed up and uncontrollable with this, is there a way to make this work better when there are 20 reuslts on the same page with different meta description for each?

  28. benjamin s says

    Here’s also a nice improvement to make an exception for the home-page:

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

  29. Laura K says

    I’ve downloaded the Yoast plugin, and set it up for my home page, but when I enter the website on Facebook it still won’t show the image I’ve specified, or the text snippet I’ve written.
    Also can’t find my Facebook URL using the link you provided, it just gives me an error…
    I tried debug but it says Facebook pages can’t be debugged, and they have no cache.
    Sooooo….nothing has worked so far!

  30. Courtney says

    Hi there,

    I have SEO Yoast and I uploaded the new image and its still not working on facebook……???

  31. D says

    I just wanted to thank you for this very thorough description on the process of connecting facebook to your wordpress page. I’ve been trying to do for days now following other sites and recommendations. This evening I came across your page from a google search and bam, it worked. Hooray! Thanks a lot.

  32. Amanda Paul says

    Thanks for this info. It was really easy to follow. I uploaded the Yoast plugin and followed all the steps and saved but the thumbnail is still just a blank box. does it take some time to flow through? Do I need to log out and back in again to Facebook? or WordPress?

  33. Daniele Besana says

    Hi guys, I’m having problems with og:description, basically all the formatting is missing on the shared page. New lines are not respected, how can I control that?
    Thanks!

  34. BK says

    Thanks for this. I want to share link directly from my site using the social button. However, when I click on for example the Facebook share button, the image and the description is still using a previous information. Although I have updated the image and description using Yoast SEO and specifically customise the image and description for that post. May I know what did I do wrongly?

  35. Robin says

    Thank you. I can’t tell you how long I have been trying to figure this out. Easy to do with ZiPLIST for recipes but could not figure it out for Articles.

  36. Maria says

    Hi! I have a issue that i don’t know how to solve. When I try to share a link on facebook from my blog, or a particular page this message appera “page not found” or the link with symbols I don’t understand. I controlled th elinks with object debugger and this is what appear: required property ‘og:title’ of type ‘string’ was not provided. How can I solve it, please?

  37. Salih Kulangara says

    @ Syed Balkhi. —– Just want to ask you this, After all I have got setup all the tags, and got a clean debug test result without any warning, when any one click on the Facebook Like button i used in my web page, it’s not showing up in the Facebook Timeline feed, just showing up in the recent activity section only, why is this, Is there anything else I have to add to get it be shown in the newsfeed directly when the click the LIKE button??????

返信を残す

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