アイキャッチ未設定時のOGP画像をカテゴリーやタグから自動設定する方法

はじめに

SNSでシェアされた際に表示されるOGP画像は、アイキャッチ画像、SNS画像が設定されていない記事では「NO IMAGE」になってしまいます。

そこで、サムネイルと同様に、カテゴリーやタグに登録された画像をOGP画像として反映します。

この記事では、この方法について説明します。

Cocoonの各カードにおけるサムネイル表示の仕様を解説

「Cocoonの各種カードにおけるサムネイル表示の仕様とフォールバックの仕組み」を解説。エントリーカード、ナビカード、外部ブログカードごとの画像参照元や「NO IMAGE」となる原因を整理し、フィルターフック（get_external_blogcard_thumbnail_url）を使って外部ブログカードのサムネイルを任意の画像に差し替える方法を分かりやすく紹介します。

chuya.s239.xrea.com

実装手順

以下のコードを追加します。

add_filter('ogp_card_ogp_image', function($ogp_image) {
  // 投稿ページではない場合、またはアイキャッチが設定済みの場合は処理対象外
  if (!is_single() || has_post_thumbnail()) {
    return $ogp_image;
  }

  $post_id = get_the_ID();

  // SNS画像を適用
  $sns_image = get_singular_sns_image_url();
  if ($sns_image) {
    return $sns_image;
  }

  // カテゴリー・タグ等のフォールバック画像を適用
  $fallback_image = get_categorized_no_image_url($ogp_image, 1200, 630, $post_id, true);
  if ($fallback_image) {
    return $fallback_image;
  }

  return $ogp_image;
});

参考：ホームイメージ画像を自動設定する方法

前述のコードに加え、カテゴリーやタグにアイキャッチ画像が設定されていない場合は、Cocoon設定→OGP→「ホームイメージ」に設定した画像をOGP画像として適用します。

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('ogp_card_ogp_image', function($ogp_image) {
  // 投稿ページではない場合、またはアイキャッチが設定済みの場合は処理対象外
  if (!is_single() || has_post_thumbnail()) {
    return $ogp_image;
  }

  $post_id = get_the_ID();

  // SNS画像を適用
  $sns_image = get_singular_sns_image_url();
  if ($sns_image) {
    return $sns_image;
  }

  // カテゴリー・タグ等のフォールバック画像を取得
  $fallback_image = get_categorized_no_image_url($ogp_image, 1200, 630, $post_id, true);

  // NO IMAGEの場合はOGPホームイメージに置換
  if ($fallback_image === get_no_image_url()) {
    $fallback_image = get_ogp_home_image_url();
  }

  return $fallback_image;
});

さいごに

今回紹介した方法を使えば、アイキャッチ画像を個別に設定していない記事であっても、カテゴリーやタグ画像を自動的にフォールバックしてOGP画像として出力できるようになります。
SNS上で「NO IMAGE」が表示されてしまうのを防ぎ、見た目のクオリティを保ちながらクリック率の向上も期待できます。