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メタ情報を追加する方法

WordPressサイトのコンテンツがFacebookで美しく見えるようにしたいですか?WordPressテーマにFacebook Open Graphメタデータを追加する必要があります。

オープングラフのメタデータは、Facebookや他のソーシャルメディアサイトにWordPressの投稿やページに関する情報を提供し、誰かがそれらを共有したときにそれらがどのように見えるかをコントロールすることができます。

この投稿では、WordPressテーマでFacebook Open Graphメタデータを簡単に追加する方法を紹介します。WPBeginnerで使用しているAll In One SEOを含む3種類の方法を紹介するので、あなたのWordPressサイトに最適な方法を選んでください。

How to Add Facebook Open Graph Meta Data in WordPress Themes

以下のクイックリンクから、最も興味のある方法に直接ジャンプすることができる:

方法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ファイルにコードをコピー&ペーストする必要があります。しかし、私たちは、WordPressでカスタマイザーコードをより簡単かつ安全に追加できるWPCodeプラグインを使用してコードを追加することをお勧めします。

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

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

有効化した後、WordPressダッシュボードからCode Snippets ” + Add Snippetに行くことができます。

ライブラリから「Add basic Open Graph Tags」スニペットを探します。見つけたらマウスオーバーし、「Use snippet」ボタンをクリックします。

Select the 'Add basic Open Graph Tags' snippet from the library

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

WPCode automatically adds the code for Open Graph data

その後、スニペットを「有効化」に切り替え、「更新」ボタンをクリックするだけです。テーマがWordPressヘッダーにFacebook Open Graphメタデータを表示するようになります。

Activate and update snippet

上級ユーザーであれば、以下のコードをテーマの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のエキスパートガイド

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$編集プロセスをご覧ください。

アバター

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

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

  1. WPBeginner Staff

    Did you set a featured image? did you replace the default image URL in the code with your own image URL?

  2. Ikix

    Hello, I’ve tried everything i could an i can’t display thumbnail image when i post my blog url on facebook, i already add the code as you said, i download tons of plugings and there is no image in facebook! can you help me please? pleeease!

  3. Jason C.

    what about just for a single image to be added to the thumbnail options in Facebook? I’ve noticed it picks up my featured image no problem, but doesn’t pick up the others in the post. Is there a way to manually add them with some quick code?

  4. WPBeginner Staff

    Sorry the plugin is no longer available. We have updated the article, with new information. Hope this will help you add Facebook Open Graph Meta Data into your WordPress. site.

  5. M

    its still pulling the image from the sidebar instead of the image i have put in the functions file?

  6. damian

    What about og:description?

  7. Musadiq

    Hi,

    How can I include a facebook in the code above? So it can directly publish an article to our profile timeline and also to our facebook page. Thank you

  8. Hassan

    its not working for me when i share my posts on face book its only shows my last instagram pics

  9. Loes Liemburg

    Hi, I installed this plug-in, but can’t see the OG-options in my settings menu. I’ve refreshed and waited, but still nothing. What has gone wrong?

  10. Manuel Gomez

    This line means that the image will use the medium size?

    $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘medium’ );

    If i replace for “big” will use the big image? i would like to see the link post with the new format in facebook, because i can get more clics.

    Thanks!

  11. Alexandra

    Thank you! the code worked perfectly!

    • M

      Unfortunately this did not work for me, I can’t even see it being output in the WP head source code. I’m using the code method as I don’t want to add any plugins to the site.

      I’ve checked the htaccess file and that is not causing any issues since it’s blank except for the perma link declaration.

      Its also not a caching plugin either since I dont have one in place. Any ideas?

      • M

        Actually sorry this did work, but unfortunately using the debugger tool it still seems that posting a link on my timeline still does not show the og:image.

        Even if it’s there in the json. Its really bizarre. The debugger shows the post but without any image in the share preview. Any ideas anyone?

  12. Attila

    Hello Syed,
    I have use many plugins to extract my graph meta info since I’ve started to use Wordpress and Facebook and I can say that “Facebook Open Graph Meta for WordPress” is the most simple yet professional plugin so far.

    I have a minor issue tough…when debugging my posts link with the the Facebook debugger, my Raw Open Graph Document Information does not show up properly. I have special characters included as my content is in Hungarian language.

    Here is an example:
    Meta Tag:

    I would appreciate if someone could tell me how to fix this.

    Thanks in advance and keep up the good work.

    Best Regards

    • JessDelAngel

      HI!

      Did you find a solution for this?

      Regards

  13. Jim

    Works well – thanks. This is still the best way to integrate without a plugin, yes?

  14. ally

    I’ve been using this code for a long time but recently there’s been problems, it doesn’t always pull the image. I used the linter and found this errror:

    Inferred Property The ‘og:description’ property should be explicitly provided, even if a value can be inferred from other tags.

    So I added the description tag and that seems to have resolved the image issue but now it no longer displays the article content.

    Any idea’s how to resolve this? I just need to show the first few lines of content.

    Thanks

      • Goob

        Yoast’s SEO Plugin doesn’t seem to have single page og:descriptions built-in.

        • Editorial Staff

          Yes it does have it built-in. By default it pulls your meta description, but it also has the option for you to modify the description from the Yoast SEO meta box.

  15. Theo

    Hi there,

    I was just wondering whether it is possible to have a different “og:type” for a post and a page. As it stands (well from what I understand) is that for everything in Wordpress, this sets the “og:type” to article.

    What if I want to set “og:type” of page to say “website” and for a post “article”?

    Any suggestions or help much appreciated :)

    Thanks

  16. Editorial Staff

    You have to attach the post thumbnail using the featured image function.

    管理者

  17. seitanist

    Can someone explain why

    global $post;

    is needed and where it falls in the generated code?

    • wpbeginner

      @seitanist Yes the reason why global $post is added because this code is being added outside the Loop in the section of the page. In order to pull the right information, we must call global $post which makes all those tags work.

  18. seitanist

    This worked great! Thanks!!!

  19. Editorial Staff

    You can try disabling the social feature in Yoast’s plugin and download Otto’s Simple Facebook Connect plugin. Just activate it and the base would take care of it.

    管理者

  20. Cno

    Hello, everything worked! When i put the link of my specific blog post on my facebook wall, I have the right thumbnail, description and site name. But the post on facebook also automatically shows the complete url of my site (right under the blog title). Instead I want it to show the permalink of the specific blog post – not the url of my site. This way i can integrate the ‘likes’ for that particular post in wordpress. Please! Anyone?

  21. StephanePerez

    Hi, i tried to insall the plugin but can’t activate it because of a fatal error : Cannot redeclare add_opengraph_doctype()…/fbogmeta.php on line 24

    What i’m supposed to do?

    Thanks!

  22. techhogger

    Hi pasted this codes as per the instruction on my blog techhogger.com but still issue does not seem to resolve. I can see my adsense codes in the description area. Kindly help.

    • waqaslone

      @techhogger same problem with…let me know if u find any solution.

      • wpbeginner

        @waqaslone@techhogger For the description to appear, you have to use the excerpts. Alternatively, you can use Otto’s Simple Facebook Connect plugin and just turn the Base on. That would take care of everything for you.

        • techhogger

          @wpbeginner@waqaslone@techhogger

          I did everything. Even tried the plugin you said. Just try to share any post from my blog and you will know what exactly is happening. To some extend I was able to remove codes appearing from the description section. But now I can’t see description and thumbails of the post while sharing it on fb. Will be thankful if I get your help.

        • wpbeginner

          @techhogger@waqaslone We are using the method shared on this page on our own website. Everything works. We are using SFC on List25 and it works perfectly fine. Not sure why you are having these issues. SFC has a very smart way to parse through your content and pull out description. So I know for a fact that it pulls out description. It also pulls out all images. This most likely means that there is another plugin that is interfering on your site.Do you have a WP plugin to add the like box or the like button? or any other FB plugin?

        • techhogger

          @wpbeginner@waqaslone I tried to share again after your last reply. And the same happens. I can see only post title with description as my blog’s description instead of post description and no thumbnail. I am using Digg Digg plugin for social sharing .

        • wpbeginner

          @techhogger@waqaslone Please turn on Otto’s Simple Facebook Connect plugin. Remove the code that you have added in your functions.php …

        • techhogger

          @wpbeginner@waqaslone I think its working now. I downloaded and configured the plugin again. And now it seems to be working. Can you have a look and let me know if everything is fine now.

  23. ChristopherJosephDowney

    I am used to putting meta tags in the HTML on Blogger. Switching to Wordpress has been a headache in this aspect, as I have no HTML to edit and am not used to CSS. This plug-in is a dream, but it doesn’t seem to be working correctly. My question is this: It appears I have 3 different ID’s: My facebook profile, my facebook fan page (the one my blog links to) and my OG debugger ID that appears on the developer debugger page; which ID do I need to use for the plug-in? No matter which one I put in the plug-in when I click “debug” the thumbnail does not update and is always one of the advertisement’s gif’s. Can I have more than one default thumbnail like I would using megatags in HTML?

  24. RobKara

    When a user hits my wordpress page “object” then how do i get the facebook userid if its a facebook user viewing the page? Does facebook send a signed_request or facebook userid via the querystring?

    • wpbeginner

      @RobKara This question should be asked in the Open Graph forum because it is beyond the scope of this article.

  25. MetalPhil

    So I installed this stuff on my website (AngryMetalGuy.com) and it doesn’t work. I have *no* clue why. I am beyond frustrated and super confused. If you could please, please, please, please, pleeeease help me that would be awesome.

  26. lizbizz

    This solved my problem for the Share on Facebook button, but now when I try to share a post from my site to Facebook using Hootsuite’s Hootlet, the description text box is empty. It shows the correct thumbnail and URL but no article preview text. It worked before and still works for other sites, so I think it happened when I installed the plugin…help?

  27. SaijoGeorge

    @wpbeginner Facepalm … Thanks for the quick replay mate :)

  28. wpbeginner

    @SaijoGeorge It will only output your post’s defined excerpt. If you don’t specify an excerpt, then nothing will be displayed.

  29. SaijoGeorge

    Great plugin .. the only issue I seem to be having is that the meta property=”og:description” spits out some random data :( . Thr url for a sample post is 1800pocketpc.com/watch-out-for-windows-phone-7/22453/ similar issue on another blog bestwp7games.com/crazy-horses-match-maker-a-path-drawing-game.html ( here og:description comes out to be blank ) I am using thesis variations on both of those sites .. was wondering if any of you guys have come across this issue

    It’s also worth noting that meta description tag on those pages seems to ouput the right data

  30. wpbeginner

    @CarlosDeGuzman It takes a while for the linter to update.

  31. CarlosDeGuzman

    Hi wpbeginner! I installed the plugin on my site, ww w.swimbikerun.ph and it’s not working. I’m still getting these errors on the linter. Also no thumbnails are showing when you share a post on fb. Hope you can help :)

    Also its not showing the description

    Warning

    Required Property Missingog:title is required

    Required Property Missingog:type is required

    Required Property Missingog:url is required

    Required Property Missingog:image is required

  32. wpbeginner

    @ReyCalantaol It has nothing to do with SEO…. the Open Graph data is for Facebook…..

  33. wpbeginner

    @arabsciences@Tia Peterson You have to add the Meta Description and our plugin does that for you…

  34. wpbeginner

    @arabsciences@Tia Peterson You have to add the Meta Description and our plugin does that for you…

  35. wpbeginner

    @Tia Peterson Yes, you would need to re-install through the repository.

  36. wpbeginner

    @Tia Peterson Yes, you would need to re-install through the repository.

  37. arabsciences

    Hi

    How do pull description from aal in one seo plugin.?

    it it not working for me

  38. arabsciences

    @Tia Peterson@wpbeginner

    I use All in one seo plugin and could not pull the description to show in url linter

  39. arabsciences

    @Tia Peterson@wpbeginner

    I found a fix for that which shows first 300 characters of the post.

    just change og:description to :

    <meta property=”og:description” content=”<?php echo strip_tags(get_the_excerpt($post->ID)); ?>” />

  40. ClyoBeck

    Okay, I’ve gone back to the original theme files and uploaded the original functions.php file. No go. Still a blank screen. I’m thinking up upgrading the theme to see if that will help. I’m wondering if the code I put in the functions.php file, somehow, changed something else. Is that possible?

  41. wpbeginner

    @ClyoBeck Make sure that there are no extra spaces at the bottom of the functions.php file …

  42. ClyoBeck

    Hi guys,

    I should have just downloaded the plug-in. Instead I copied and pasted the code above into my functions.php file and now my blog has disappeared.

    I went into my server and, having made copies of the php file in notepad, uploaded the old file. Still no luck.

    Looks like I’m going to have to hire a programmer to fix this.

    Any advice?

  43. Livefyre

    @wpbeginner Thanks. I don’t think I got the update, though. Should I just download the plugin again from the WP plugin repository and re-install?

  44. wpbeginner

    @Tia Peterson Just uploaded the fix for this and another issue. It should be live within 15 minutes or sooner (whenever the SVN updates go through).

  45. wpbeginner

    @SteveJoseph@joshuatj Also with the linter (not sure exactly what the number is) but if your post has that many likes, then it won’t reset the description / title and such… If I am correct, then that number is not very high…

  46. SteveJoseph

    @wpbeginner@joshuatj Thanks for the response wpbeginner. I tried your plugin within the last 3 days so was fairly certain it was the latest version but that didn’t seem to work for me. I’m going to go with your suggestion that it will fix itself but the current solution is not the most ideal. It’s pulling the description from my blog “intro” section which is helpful in telling the audience about me but does very little to support why they should click on the article or shared item. Thankfully it does show the correct image and post headline just not the description from the post itself.

    Since Facebook hyped open graph so much you’d like to have imagined they would have made sure this was working and buttoned up pretty solid. Thanks again.

  47. Tia Peterson

    Hi! For some reason, the plugin doesn’t pull a description. At first, I figured out that it was pulling the description from the ‘excerpt’ field, so I started using that field every time. Now, it doesn’t even pull from that. Not sure why. I am using the latest version of the plugin, StudioPress News Child Theme for Genesis, and Wordpress version 3.1.

    Here is our most recent post to show you that when you paste this URL into Facebook, only the image and title show up. In the source code, the description field for the open graph plugin is completely empty. http://www.bizchickblogs.com/2011/08/what-do-you-know-about-naturopathy.html

    Thanks for your help!

  48. wpbeginner

    @SteveJoseph Facebook takes a bit long to update older posts, but it will fix itself.

返信を残す

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