LoginSignup
6
4

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-06-16

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' );
6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4