jetpackで自動書き出しされるOGPタグを停止し、自前でOGPタグを…

jet pack(プラグイン)でogpとTwitter Cardsが自動で書き出されるが、og:imageの設定がうまくいかなかったので自前で設定する方法
1:jet packのogp書き出しを停止する
functions.phpに記述
remove_action('wp_head','jetpack_og_tags'); add_filter( 'jetpack_enable_opengraph', '__return_false' );
2:header.phpにHTMLにコードを追加
HTML5
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">
HTML5以外
<html lang="ja" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
全てのページに適用させる必要があります。
3:ogp_info.php(カスタムテンプレート)にOGPのmeta情報を記述
ヘッダーにそのまま記述すると長ったらしくなるのでカスタムテンプレートを作成し、ショートコードで呼び出す
<meta property="og:type" content="blog"> <?php if (is_single()){ if(have_posts()): while(have_posts()): the_post(); echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n"; endwhile; endif; echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n"; echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n"; } else { echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n"; echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n"; echo '<meta property="og:url" content="https://example.com/">';echo "\n"; //サイトURL(/ありで指定する) } $str = $post->post_content; $searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i'; if (is_single()){ if (has_post_thumbnail()){ $image_id = get_post_thumbnail_id(); $image = wp_get_attachment_image_src( $image_id, 'full'); echo '<meta property="og:image" content="'.$image[0].'">';echo "\n"; } else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) { echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n"; } else { $ogp_image = get_template_directory_uri().'/images/ogp-image.jpg'; //投稿にサムネイルも画像も無い場合の処理 echo '<meta property="og:image" content="'.$ogp_image.'">';echo "\n"; } } else { if (get_header_image()){ echo '<meta property="og:image" content="'.get_header_image().'">';echo "\n"; } else { echo '<meta property="og:image" content="'.get_template_directory_uri().'/screenshot.png">';echo "\n"; //ヘッダーイメージがない場合は、テーマのスクリーンショット } } ?> <meta property="og:site_name" content="<?php bloginfo('name'); ?>"> <meta property="og:locale" content="ja_JP" /> <meta property="fb:app_id" content="facebookのApp-ID(15文字の半角数字)"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@Twitterアカウント">
4:ショートコードで呼び出す
functions.phpに記述
function ogp_info() { ob_start(); get_template_part('inc/ogp_info'); return ob_get_clean(); } add_shortcode('ogp_info', 'ogp_info');
この場合だとincディレクトリのogp_info.phpというカスタムテンプレートを指定。
header.phpの<head>~</head>内に
<? php echo do_shortcode('[ogp_info]'); ?>
ショートコードでカスタムテンプレートを読み込みます。
※コピーして使うときは[ ](大括弧)を半角に直してください。
まとめ
プラグインは便利だけど、デザインが崩れたり、予期せぬ挙動が起きたりするので気をつけながら使いたいです。