WordPress All in One SEOを使いつつ1発でシェア画像を表示する方法

FacebookやTwitterに投稿した記事をシェアする際、最初のシェアの時に画像が表示されないことありませんか？

実はog:imageにwidthとheightを指定すると改善されるんです！

ですが、利用者の多い All in One SEOでは、自動的にog:image:width、og:image：heightを出力してくれません。

そこで、今回はAll in One SEOを使いつつもog:image:width、og:image：heightを指定するfunction.phpを紹介します。

まず、aiosp_opengraph_metaというフィルターを使います。
ogp関係の出力に関するフィルターで、og:なんたらと出力している部分のフックです。

add_filter( 'aiosp_opengraph_meta', 'ogp_image_width',10,3 );

で、上記フィルターを使い、og:imageを出力している部分をフックします。
上部にある$ogpimage_width_heightは後の別actionで使うためにスコープを外にしています。
下記のfunctionではthumbnailでfacebookの場合（og:imageを出力しようとしている時）に処理を追加し、
og:imageのwidthとheightを取得し、og:image:widthとog:image:heightを出力しています。

$ogpimage_width_height ="";
function ogp_image_width($filtered_value, $t, $k){
  if( $k == 'thumbnail' && $t == 'facebook' ){
    global $ogpimage_width_height;
    $image = getimagesize($filtered_value);
    $ogpimage_width_height .= '<meta property="og:image:width" content="'.$image[0].'" />';
    $ogpimage_width_height .= '<meta property="og:image:height" content="'.$image[1].'" />';
  }
  return $filtered_value;
}

最後に、All in One SEOのメタに追加すべく、下記のactionを利用します。
先ほどの$ogpimage_width_heightをglobalで呼び出し、それを出力しているだけです。

add_action( 'aioseop_modules_wp_head', 'add_to_aioseop_head' );
function add_to_aioseop_head(){
  global $ogpimage_width_height;
  echo $ogpimage_width_height;
}

まとめ

まとめますと、function.phpに下記のコードを追加するだけです。

// ogp:imageのwidth、heightを表示
// https://blog.maromaro.co.jp/archives/5860
$ogpimage_width_height ="";
function ogp_image_width($filtered_value, $t, $k){
  if( $k == 'thumbnail' && $t == 'facebook' ){
    global $ogpimage_width_height;
    $image = getimagesize($filtered_value);
    $ogpimage_width_height .= '<meta property="og:image:width" content="'.$image[0].'" />';
    $ogpimage_width_height .= '<meta property="og:image:height" content="'.$image[1].'" />';
  }
  return $filtered_value;
}
add_filter( 'aiosp_opengraph_meta', 'ogp_image_width',10,3 );
add_action( 'aioseop_modules_wp_head', 'add_to_aioseop_head' );
function add_to_aioseop_head(){
  global $ogpimage_width_height;
  echo $ogpimage_width_height;
}

以上です。
うまくいきましたでしょうか！