WordPress

WordPress JetpackのOGPタグのデフォルト画像とアーカイブ系での出力

More than 1 year has passed since last update.


og:image のデフォルト画像を変更する


優先順位


  1. 投稿・固定ページ・カスタム投稿タイプの記事ページ( is_singler )ではアイキャッチ画像+本文内の画像

  2. 作成者別アーカイブ( is_author )ではそのユーザーのアイコン

  3. 該当する画像がなければサイトアイコン(WordPress 4.3以降)

  4. 1-3に該当する画像がなければデフォルト画像(https://s0.wp.com/i/blank.jpg)


デフォルトの画像設定

jetpack_open_graph_image_default フィルターにフックする。

テーマの functions.php に書くかプラグインにしておく。

下記はテーマにある画像 /images/my_open_graph_image_default.png 利用の場合。

function my_open_graph_image_default( $image ) {

$image = get_stylesheet_directory_uri() . '/images/my_open_graph_image_default.png';
return $image;
}
add_filter( 'jetpack_open_graph_image_default', 'my_open_graph_image_default' );

なお、WordPress 4.3 以降に実装されたサイトアイコンはもともと Favion や WordPress.com 関連での利用が前提なので、正方形にトリミングされてしまう。

現状、サイトアイコンを設定したうえでそれ以外の画像を og:image のデフォルト画像にしたい場合は jetpack_open_graph_tags フィルターにフックする。

function my_jetpack_open_graph_tags( $tags ) {

$og_image_default = get_site_icon_url( 512 );
if ( $tags["og:image"] == $og_image_default ) {
$tags["og:image"] = get_stylesheet_directory_uri() . '/images/my_open_graph_image_default.png';
$tags["og:image:width"] = 600; // 画像の幅
$tags["og:image:height"] = 400; // 画像の高さ
}
return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'my_jetpack_open_graph_tags' );


アーカイブ系で Jetpack の OGP タグを出力

デフォルトで対応しているのは、HOME( is_front_page )、ブログトップ( is_home )、作成者別アーカイブ( is_author )、投稿・固定ページ・カスタム投稿タイプの記事ページ( is_singler )の4種でアーカイブ系では出力されない。

jetpack_open_graph_base_tags フィルターにフックする。

カテゴリー、タグ、タクソノミーアーカイブ及びカスタム投稿タイプのアーカイブに対応したコード。日別アーカイブへの対応や og タグの中身はお好みで。

function my_jetpack_open_graph_base_tags( $tags ) {

if ( ! is_archive() )
return $tags;

$tags['og:type'] = 'object';
$tags['og:title'] = get_the_archive_title();
if ( is_category() || is_tag() || is_tax() ) {
$object = get_queried_object();
$tags['og:description'] = esc_attr( get_the_archive_description() );
$tags['og:url'] = get_term_link( $object->term_id, $object->taxonomy );
} elseif ( is_post_type_archive() ) {
$object = get_queried_object();
$tags['og:description'] = esc_attr( $object->description );
$tags['og:url'] = get_post_type_archive_link( $object->name );
}
return $tags;
}
add_filter( 'jetpack_open_graph_base_tags', 'my_jetpack_open_graph_base_tags' );


カテゴリーごとに og:image 変えたい

jetpack_open_graph_tags フィルターにフックする。

WPのダッシュボードからカテゴリーごとに og:image 用の画像を設定したい場合は、別途 Advanced Custom Fields などを使ってよしなに。

ここではあくまで出力のみ。大抵の場合、カテゴリーIDが取れればなんとかなる。

例としてテーマに /images/my_open_graph_image_category_{カテゴリーID}.png を用意しておく。

function my_category_jetpack_open_graph_tags( $tags ) {

if ( is_category() ) {
$object = get_queried_object();
$tags["og:image"] = get_stylesheet_directory_uri() . '/images/my_open_graph_image_category_' . $object->term_id . '.png';
$tags["og:image:width"] = 600; // 画像の幅
$tags["og:image:height"] = 400; // 画像の高さ
}
return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'my_category_jetpack_open_graph_tags' );