y.o.designers-works

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: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
    

HTML5以外

    <html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://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="http://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]'); ?>
  

ショートコードでカスタムテンプレートを読み込みます。
※コピーして使うときは[ ](大括弧)を半角に直してください。

まとめ

プラグインは便利だけど、デザインが崩れたり、予期せぬ挙動が起きたりするので気をつけながら使いたいです。

参考にさせて頂いたサイト

スポンサーリンク

他にオススメな記事