縦長画像から Facebook og:image に最適な画像を自動生成する
--
💡Crop Hints — WordPress Pluginは「Hawk Vision — WordPress Plugin」にリニューアルされました。
— Crop Hints プラグインでつくる実装例 2
WordPress のテンプレートにおいて記事に指定されたアイキャッチ画像を、Facebook の og:image として <meta> タグに出力するテーマは数多く存在します。
しかし og:image は Facebook の推奨 によれば 1200 × 630 ピクセルの横長画像の指定が前提となっており、アイキャッチ画像が縦長の場合、共有時の表示が残念なものになることが多いです。
例えば以下の画像が指定されていることを考えましょう。
この場合、記事を Facebook 上にシェアした際のタイムラインでの見え方は
のようになってしまい、被写体である女性の顔が完全に隠れた残念なものとなってしまいます。
書き上げた記事をより目を引く形でシェアするためにアイキャッチ画像を設定しても、このような見え方になると魅力度が下がりクリック率も低下してしまうかもしれません。
クロップヒントを確認
ではここでこの写真から抽出されたクロップヒントを見てみます。
Google Cloud Vision AI によれば、この写真の最も重要なエリア（＝クロップヒント）は女性の顔部分であると正確に評価されています。このクロップヒントを含む画像を og:image 用として切り出すことができれば、シェア時の表示を改善できそうなことが分かりますね。
Smart Cropped Images
通常であればここで手動で画像の切り出し作業を行うところですが、Crop Hints プラグインの Pro Edition がサポートする “Smart Cropped Images” を利用すると、この作業を WordPress に任せることができます。
テンプレート中で Smart Cropped Image を取得するのに必要な記述は次のとおり。パブリック関数 crophints_get_sci を使います。
<?php$image = crophints_get_sci(array(
'post_id' => 751, // 画像の投稿id
'size' => 'full', // サイズ
'aspect' => 1.905, // アスペクト比
'force_generate' => true // 強制的生成オプション
));?>
前述のとおり Facebook の og:image の推奨サイズは 1200 × 630 ピクセルであることから、アスペクト比には 1.905 (= 1200/630) を指定しました。
加えて、取得しようとしている Smart Cropped Image がまだ生成されていない場合には、画像の強制生成オプション force_generate を true にすることで関数実行時に生成も行うことが可能です。
こうして得られる $image の中身は次のとおり。
Array
(
[status] => 'success’
[src] => Array
(
[0] => 'http://crophints.com/wp/wp-content/uploads/crophints/2020/06/asiya-kiev-fFPsHOyNNN8-unsplash_ch-auto_sci-1905_full.jpg'
[1] => 1705
[2] => 895
[3] => 1
)
[size] => 'full'
[aspect] => 1.905
[crophint] => 'auto'
[is_sci] => 1
[load] => 'generated'
)メタ情報も含め様々な返り値が含まれていますが、生成された Smart Cropped Images は $image['src'] に格納されています。画像 URL を <img> タグで表示させてみると
となりました。クロップヒントの領域を含み、かつ与えたアスペクト比で画像が生成されていることが分かったと思います。
この Smart Cropped Image を og:image に指定されているアイキャッチ画像と差し替えて <head> 内に出力すれば、タイムラインにおけるシェアイメージの表示は完璧なものとなります。
<meta property="og:image" content="<?php echo $image['src'][0]; ?>">
同様にして twitter:image の出力にも使えるテクニックですのでご活用ください。
