Crop-Thumbnailsプラグインでサムネイル画像をOGPに反映させてTwitterのサムネイルを好みの位置で表示させる【ワードプレス】

OGP（Open Graph Protocol）については今まであまり考えていなかったのですが、こちらのWordPressプラグイン「Crop-Thumbnails」で「任意の位置のCrop画像」をOGPに設定するには一体どうすれば…という点でどん詰まりになったので、アウトプットしながらどうにか試していきます。

Crop-Thumbnails

"Crop Thumbnails" made it easy to get exacly that specific image-detail you want to show in your featured image or galle...

OGP用のサイズを追加する
そもそもOGPの設定がどうなっているのか
プラグインにOGP用の設定を追加する方法
the_post_thumbnail_url()とは？
headにコードを差し込む
Twitterカードの画像（サムネイル）が前のままのときは…。
OGP画像（ Twitterカード画像）が変わりました！！
まとめ

OGP用のサイズを追加する

標準のThumbnailsに「OGP」用のサイズを追加します。追加する場所は、functions.phpの末尾あたりに追記しておきます（追加操作は要要注意）。add_image_sizeを使って、名前と横縦サイズを指定します。

//1200px 630px トリミング用サイズ
add_image_size('ogp1200x630', 1200, 630, true);

これで、サムネイルの中に「ogp1200x630」という名前が追加されます。

画像を設定して「Save Crop」を実行しますが・・・

TwitterのOGPの位置が、うんともすんとも、変わっていないようです…。うーん。

そもそもOGPの設定がどうなっているのか

アイキャッチ画像にCropした画像を設定しても、反映されないことが分かりました。

ここで、meta property=”og:image”、meta name=”twitter:image”を、それぞれどうなっているのか見てみます。

<meta property="og:image" content="https://demo.eguweb.net/wp-content/uploads/1920-1920.png">

<meta name="twitter:image" content="https://demo.eguweb.net/wp-content/uploads/1920-1920.png">

これは、おそらくwp_head()メソッドにogpタグ出力処理をフックさせるような感じで出力させているものと思われます。cocoonテーマでいくと、cocoon設定の中あたりがそれかと思れます（詳しく調べておらずすみません・・・！追記していきます）。

そうすると、meta property=”og:XXXX系のHTMLタグが追加されます。

プラグインにOGP用の設定を追加する方法

つまり、ここから言えることは、この「twitter:image」の画像にCropした画像（add_image_size(‘ogp1200x630’, 1200, 630, true);）の画像が設定されている必要があります。

ということで、ちょっと強引かもしれませんが、wp_head()の後に、twitter:imageとog:imageがheadに入るように追加します！（元々のOGP関連のHTMLを消す場合は、前のOGP設定をOFFにするなり必要に思われます）

<meta name="twitter:image" content="<?php the_post_thumbnail_url('ogp1200x630'); ?>" />
<meta property="og:image" content="<?php the_post_thumbnail_url('ogp1200x630'); ?>" />

the_post_thumbnail_url()とは？

the_post_thumbnail_url()を使うことで、アイキャッチ画像のURLを設定することができます。

使い方

<?php the_post_thumbnail( $size, $attr ); ?>

現在の投稿について、投稿編集画面で設定されたアイキャッチ画像（以前は投稿サムネイルと呼ばれていました）を表示します。
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_post_thumbnail

$size
（文字列 | 配列）（オプション）画像サイズ。キーワード（thumbnail, medium, large, full）、または add_image_size() で定義したカスタムサイズのキーワード、もしくは幅と高さをピクセルで指定する要素 2 つの配列、例えば array( 32, 32 )。

中の引数に、例えばfullと入れれば「フルサイズ」の画像、mediumと入れれば「中サイズ」の画像を指定することができます。

the_post_thumbnail( 'thumbnail' );        // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail( 'medium' );           // 中サイズ   (デフォルト 300px x 300px :最大値)
the_post_thumbnail( 'large' );            // 大サイズ   (デフォルト 640px x 640px :最大値)
the_post_thumbnail( 'full' );             // フルサイズ (アップロードした画像の元サイズ)
the_post_thumbnail( array( 100, 100 ) );  // 他のサイズ

そうすると、URLは下記のような状態になります。

https://demo.eguweb.net/wp-content/uploads/1920-1920-1024x1024.png
https://demo.eguweb.net/wp-content/uploads/1920-1920-300x300.png

headにコードを差し込む

あとは、head部分のwp_head();以降にコードを差し込めば、ogp1200x675がTwitterの画像として出力されることになります（はず。）

<meta name="twitter:image" content="<?php the_post_thumbnail_url('ogp1200x630'); ?>" />
<meta property="og:image" content="<?php the_post_thumbnail_url('ogp1200x630'); ?>" />