WordPressからFacebookに投稿する際の画像とOGP設定。
この記事は2014/05/04に公開され2014/05/05に更新、591回読まれました。
Facebook、肝心なところは英語の資料だし、仕様はチマチマと変わるし、ちゃんと追いかけるのも疲れるものです(^_^;
WordPressの投稿をFacebookに自動的にシェアする設定をしている場合、意図しない画像がサムネイルとして表示されることは常だと思います。記事のトップ画像を拾ってくれれば文句無しなのですが・・。
実際には画像の無い投稿もあるし、ページとして生成された場合、Facebook側では「ああ、これはテンプレート内の画像で、これは記事本文の画像だな」とか区別はしてくれないわけですから、仕方ないですよね。
とりあえず、テンプレートimagesフォルダ内の指定画像（fb_logo.png）を固定で表示するようにしてみました。
header.phpの<head>〜</head>内の適当な場所に設置してください。
- <!–//for FB//–>
- <meta property=”og:title” content=”<?php echo wp_specialchars(get_bloginfo(‘name’),1) ?>”/>
- <meta property=”og:description” content=”<?php bloginfo(‘description’); ?>”/>
- <meta property=”og:image” content=”<?php bloginfo(‘template_url’); ?>/images/fb_logo.png”/>
- <meta property=”og:url” content=”<?php bloginfo(‘home’)?>”/>
- <meta property=”og:type” content=”company”/>
- <meta property=”fb:admins” content=”●●●●●”/>
- <meta property=”og:site_name” content=”<?php echo wp_specialchars(get_bloginfo(‘name’),1) ?>”/>
- <!–//for FB//–>
admins ID（●●●●●）は、自分のページのキャラクター写真をクリックして表示されるペーURL（例：https://www.facebook.com/photo.php?fbid=655069704543299&set=a.131584676891807.●●●●●.100001208251318&type=1&theater）のset=a.に続く.（ドット）で区切られた2番目の数列です。
画像fb_logo.pngは600x600pxで用意します。トリミングされるメディアもありますので、600x315px内に主要な要素が収まるように調整します。ここではpngにしていますが、もちろんjpgでもOK。アニメーションGIFでも面白いかもしれませんが、テストしていません。
header.phpの設定が終わったら、https://developers.facebook.com/tools/debugでキャッシュをクリアしてください。「Input URL」にはWordPressのトップページURLを入力し「デバッグ」ボタンをクリックします。エラーが表示されなければOKです。
さて、思い通りに表示されるか試してみましょう。
ちょっと改造すると
- 投稿に記事がある場合は投稿内の最初の画像をog:imageに指定する。
- 無い場合は固定画像を表示する。
という指定が可能だと思います。作ったらまた公開します。