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］'); ?>
ショートコードでカスタムテンプレートを読み込みます。
※コピーして使うときは［ ］（大括弧）を半角に直してください。
まとめ
プラグインは便利だけど、デザインが崩れたり、予期せぬ挙動が起きたりするので気をつけながら使いたいです。
