WordPressでOGP,Twitterカードの設定（プラグイン無し）

以前にOGPタグ、Twitterカードの情報をまとめていますが、WordPressでプラグインを利用せずにOGPタグを出力する方法の備忘録。

OGPで出力する情報は以下の内容です。

<meta property="og:title" content="ページのタイトル">
<meta property="og:url" content="ページのURL">
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋">
<meta property="og:image" content="画像のURL">
<meta property="og:site_name" content="サイト名">
<meta property="fb:app_id" content="appIDを入力">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="カード種類">
<meta name="twitter:site" content="@Twitterユーザー名">

functions.phpにコードを加える

headタグ内にOGPタグを動的に出力するため、functions.phpに以下のコードを追加します。

function my_ogp() {
  if( is_front_page() || is_home() || is_singular() ){
    global $post;
    $og_site_name = get_bloginfo('name');
    $og_title = '';
    $og_description = '';
    $og_url = '';
    $og_image = '';
    $html = '';
    //記事＆固定ページ
    if( is_singular() ) {
      setup_postdata($post);
      $og_title = $post->post_title;
      $og_description = mb_substr(get_the_excerpt(), 0, 100);
      $og_url = get_permalink();
      if(has_post_thumbnail() ) {
    	       $eyecatch = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
    	       $og_image = $eyecatch[0];
    	   }
      wp_reset_postdata();
      $og_type ='article';
	   }
//トップページ
	if ( is_front_page() || is_home() ) {
       $og_title = get_bloginfo('name');
       $og_description = get_bloginfo('description');
       $og_url = home_url();
       $og_image = 'トップページ用画像のURL';
       $og_type ='website';
    }
    //OGPタグの出力
    $html .= '<meta property="og:title" content="'.esc_attr($og_title).'" />' . "\n";
    $html .= '<meta property="og:description" content="'.esc_attr($og_description).'" />' . "\n";
    $html .= '<meta property="og:type" content="'.$og_type.'" />' . "\n";
    $html .= '<meta property="og:url" content="'.esc_url($og_url).'" />' . "\n";
    $html .= '<meta property="og:image" content="'.esc_url($og_image).'" />' . "\n";
    $html .= '<meta property="og:site_name" content="'.esc_attr($og_site_name).'" />' . "\n";
    $html .= '<meta property="fb:app_id" content="facebookのappID">' . "\n";
    $html .= '<meta property="og:locale" content="ja_JP" />' . "\n";
    $html .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";
    $html .= '<meta name="twitter:site" content="Twitterアカウント名" />' . "\n";
    echo $html;
  }
}
add_action('wp_head','my_ogp');

いくつか参考にさせて頂いたサイトがあったのですが、トップページの条件分岐がどうもうまくいかず、is_singularとis_front_pageを別々に記述しました。

Facebook シェアデバッカー
https://developers.facebook.com/tools/debug/