Facebookなどで利用されているOpenGraph。ソーシャルメディアでシェアしてもらうことを考えるとこれの設定はほぼ必須ですよね。

今回はこのOpenGraphのうち、シェアされた時にアイキャッチ画像にもなるサイトのサムネイル（og:image）をWordPressのアイキャッチとあわせる設定をうちのブログでもようやく実装したのでやり方を共有します。

基本的なOpenGraphの設定は済んでいるものとして進めます。

まずはコードから。

まずは、実際に今回自分が導入したコードを紹介します。ヘッダー部分（たいていはheader.php）のog:imageの部分を書き換えます。

また、アイキャッチ機能を使いますので、有効化していない場合（投稿ページにアイキャッチが現れない場合）は、functions.phpに以下も書いて下さい。

簡単な説明 

今回は、

• 投稿または固定ページ（あと添付ファイルページ）の時かつ、
• アイキャッチが設定されている

という条件の時だけ、og:imageをアイキャッチ画像にするようにしました。

line:2 if (is_singular()) {}

まずはじめに、is_singular()で投稿の本文（詳細ページ）かどうかを判別しています。

is_singular() 関数は is_single() と is_page() と is_attachment() の判定が同時にできちゃう便利なやつです。

別々には判別出来ませんが、一覧表示されるページ以外のときに何か処理をさせたい場合などには便利です。

参考：条件分岐タグ – WordPress Codex 日本語版

なんでこうしたのかというと、一覧の時にシェアされた場合に、最新の投稿のアイキャッチが出てしまうのを防ぐためです。

このへんはサイトの運用スタンスにもよりますが、トップページをシェアした場合はサイト全体の概要を表示させ、個別ページ（投稿）をシェアされた場合はそれぞれに特化したOpenGraphを出したい場合なんかはこのような設定にした上で、トップページやカテゴリで更に細かく書き出し分けを行うのがいいのではないでしょうか？

自分も今回の例ではカテゴリ関連は含めていませんが、いずれはカテゴリページをシェアした場合はカテゴリ毎にサムネイルを出し分けなんてのもやってみようかと計画中です。

line:3 $pid = get_the_ID();

次に、$pid = get_the_ID(); ですが、これはループ外で投稿のIDを取り出す関数です。

中身は

と非常にシンプルですので、これをこのまま書いても大丈夫だと思います。

参考：関数リファレンス/get the ID – WordPress Codex 日本語版

line:4 if ( has_post_thumbnail($pid)) {}

続いて登場する has_post_thumbnail(); は、指定した投稿（省略時は現在の投稿）がアイキャッチを持っているかどうかを判別します。アイキャッチがあれば true なければ false がかえりますので、これでアイキャッチの有無により代替画像を出す設定ができますね。

参考：テンプレートタグ/has post thumbnail – WordPress Codex 日本語版

line:5 get_post_thumbnail_id();

次の get_post_thumbnail_id(); ですが、こちらは現在の投稿のアイキャッチIDを取得するものです。

参考：テンプレートタグ/get post thumbnail id

line:6 wp_get_attachment_image_src($eyecatch_id);

先ほど取得したアイキャッチのIDをもとに、wp_get_attachment_image_src(); でアイキャッチの情報を取得します。

使い方は、

wp_get_attachment_image_src(ID,サイズ,アイコン設定);

となります。

IDは添付ファイルのIDですね。

続いてサイズはthumbnail,medium,large,fullから指定するか、配列で幅と高さを指定します。

アイコン設定は、アイコン画像を使う場合にtrueにします。

ということで、これで画像情報が取れました。ですが、この wp_get_attachment_image_src() はURLと画像のサイズ（幅と高さ）を配列で返しますのでこのまま出力しても Array といわれてしまいます。

配列の中身は、

• [0] => URL
• [1] => 幅
• [2] => 高さ

となっていますので、今回欲しいのはURLだから

$ogimage = $ogimage[0];

としてURLを取り出しています。

参考：Function Reference/wp get attachment image src

基本的な部分は以上です。

他の else の部分はアイキャッチが見つからない場合や、アイキャッチをog:imageに設定したくないページでのデフォルト画像の設定になります。

自分で用意した画像のパスを $ogimage にはいるように書いておいて下さい。

そして最後に、og:imageを指定するメタタグを、

 という風に書き換えると、条件にマッチした画像のファイル名が content に代入されるようになり、アイキャッチを指定した投稿をシェアすればアイキャッチが、アイキャッチなしか、一覧ページの時はデフォルト画像が表示されるようになります。

テストする方法

Facebookには、オープングラフのテストをするためのデバッガーというツールがあります

アイキャッチ付きで投稿した上で、このサイトに個別記事のURLを入力すれば、実際に表示されるかを簡単にチェック出来ます。

もっと簡単な方法としては、出来上がった個別記事のURLをFacebookの投稿入力フィールドにペーストしてしまうことです。

URLを貼り付けると自動的に投稿の情報を取得しに行きますので、設定が済んでいれば投稿前でもOpenGraphのプレビューを見ることができます。