Webページを Facebook 等にシェアした際に適切な情報を表示させる OGP。これを WordPress のテーマファイルに設定する方法は、ググるといろいろ紹介されています。

その中の og:image を設定する部分の記述ですが、大抵、次のように紹介されています。

<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?).*?>/i';  // 投稿記事に画像があるか調べる
if ( is_single() or is_page() ){  // 記事か固定ページの場合
  if ( has_post_thumbnail() ){  // アイキャッチがある場合
    $image_id = get_post_thumbnail_id();
    $image = wp_get_attachment_image_src( $image_id, 'full');
    echo '<meta property="og:image" content="'.$image[0].'">'. "\n";
  } elseif ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive() ){  // アイキャッチは無いが画像がある場合
    echo '<meta property="og:image" content="'.$imgurl[2].'">'. "\n";
  } else {  // 画像が1つも無い場合
    echo '<meta property="og:image" content="'. get_bloginfo('template_url'). '/images/ogp_image.png">'. "\n";
  }
} else {  // 記事や固定ページ以外の場合（ホーム、カテゴリーなど）
  echo '<meta property="og:image" content="'. get_bloginfo('template_url'). '/images/ogp_image.png">'. "\n";
}
?>

記事ページか固定ページの場合、アイキャッチ画像があればそれを、アイキャッチ画像は無いが本文に画像がある場合はそれを、画像がない場合と記事や固定ページ以外は予め用意したデフォルト画像（上記では ogp_image.png）を設定するという記述です。

ただ、Facebook の仕様では 200×200px に満たないサイズの画像は og:image として設定できないため、上記の記述では、本文内に小さい画像がある場合は、シェアした際に画像が表示されません。

そこで、画像が 200×200px に満たない場合はデフォルト画像を設定するようにしてみました。

上記の記述で、アイキャッチ画像の場合は wp_get_attachment_image_src 関数で画像の url を取得していますが、この関数は同時に画像の width と height も配列として取得していますので、この値で条件分岐できます。

wp_get_attachment_image_src( $attachment_id, $size );

  • [0] => url
  • [1] => width
  • [2] => height

一方、本文内の画像は PHP の preg_match 関数で本文から画像を検索してその url を取得していますので、更にこの url から getimagesize 関数で画像の情報を配列として取得して条件分岐するようにします。

getimagesize( $filename );

  • [0] => width
  • [1] => height
  • [2] => 画像の種類
  • [3] => サイズの文字列
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?).*?>/i';  // 投稿記事に画像があるか調べる
if ( is_single() or is_page() ){  // 記事か固定ページの場合
  if ( has_post_thumbnail() ){  // アイキャッチがある場合
    $image_id = get_post_thumbnail_id();
    $image = wp_get_attachment_image_src( $image_id, 'full');
    if ( $image[1] >= 200 && $image[2] >= 200 ){  // アイキャッチのサイズが 200×200 以上の場合
      echo '<meta property="og:image" content="'.$image[0].'">'. "\n";
    } else {  // アイキャッチのサイズが小さい場合
      echo '<meta property="og:image" content="'. get_bloginfo('template_url'). '/images/ogp_image.png">'. "\n";
    }
  } elseif ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive() ){  // アイキャッチは無いが画像がある場合
    $imagesize = getimagesize( $imgurl[2] );
    if ( $imagesize[0] >= 200 && $imagesize[1] >= 200 ){  // 画像のサイズが 200×200 以上の場合
      echo '<meta property="og:image" content="'.$imgurl[2].'">'. "\n";
    } else {  // 画像のサイズが小さい場合
      echo '<meta property="og:image" content="'. get_bloginfo('template_url'). '/images/ogp_image.png">'. "\n";
    }
  } else {  // 画像が1つも無い場合
    echo '<meta property="og:image" content="'. get_bloginfo('template_url'). '/images/ogp_image.png">'. "\n";
  }
} else {  // 記事や固定ページ以外の場合（ホーム、カテゴリーなど）
  echo '<meta property="og:image" content="'. get_bloginfo('template_url'). '/images/ogp_image.png">'. "\n";
}
?>

これで画像が 200×200px に満たない場合はデフォルト画像が設定されます。

画像のサイズが小さい場合や画像が無い場合に、デフォルト画像を指定する記述が何度も繰り返されていますので、メンテナンス性を考慮すると変数として定義して代入した方がよいかもしれません。

ちなみに、og:image の推奨サイズは 1200×630px 以上、最低でも 600×315px とされています。