ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【マナブログコピー(WordPressテーマ)】Twitter用のOGP設定をする方法

その他の追加設定

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、ツイッター用のOGP設定について学べます。

注意念のため必ずコードのBackupを取っておいてください。※トラブル等あった場合は責任は負えませんので必ず自己責任でお願いします。

当ブログについて

マナブログさんに参考マニュアルとして掲載して頂きました😆
本家認定のマニュアルです。

【Manablog Copy】Twitter用のOGP設定をする方法

OGP設定とは、Twitterでよく見られる紹介先のイメージ画像を表示する設定です。自分のブログなどTwitterで紹介する場合は、きちんと表示したいですよね。

設定方法は以下です。

管理画面外観テーマエディターheader.phpにアクセスします。


46行目と47行目マーク以降の部分に、自分のTwitterIDを入力しましょう。


ちなみにTwitterIDとは、こちらになります。

OGPが上手く反映されない時の対処方法(追記:2019年11月23日)

上記のOGP設定をしてしばらく運用していましたが、下記の現象が見られました。

  • トップページをSNSでシェアした時に上手くOGPが反映しない
  • 下層ページのリード文章が反映されない

ということで、下記の手順で修正を加えました。

注意念のため必ずコードのBackupを取っておいてください。※トラブル等あった場合は責任は負えませんので必ず自己責任でお願いします。

既存のOGP設定を一旦削除

管理画面外観テーマエディターheader.phpにアクセスして、42行目あたりの<--!OGP設定-->から75行目あたりの<--!/OGP設定-->までを全て削除します。

functions.phpにOGP制御の記述を追記

管理画面外観テーマエディターfunctions.phpに下記のコードを追加します。


/*********************
OGPタグ/Twitterカード設定を出力
*********************/
function my_meta_ogp() {
  if( is_front_page() || is_home() || is_singular() ){
    global $post;
    $ogp_title = '';
    $ogp_descr = '';
    $ogp_url = '';
    $ogp_img = '';
    $insert = '';

    if( is_singular() ) { //記事&固定ページ
       setup_postdata($post);
       $ogp_title = $post->post_title;
       $ogp_descr = mb_substr(get_the_excerpt(), 0, 100);
       $ogp_url = get_permalink();
       wp_reset_postdata();
    } elseif ( is_front_page() || is_home() ) { //トップページ
       $ogp_title = get_bloginfo('name');
       $ogp_descr = get_bloginfo('description');
       $ogp_url = home_url();
    }

    //og:type
    $ogp_type = ( is_front_page() || is_home() ) ? 'website' : 'article';

    //og:image
    if ( is_singular() && has_post_thumbnail() ) {
       $ps_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
       $ogp_img = $ps_thumb[0];
    } else {
     $ogp_img = '★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★';
    }

    //出力するOGPタグをまとめる
    $insert .= '<meta property="og:title" content="'.esc_attr($ogp_title).'" />' . "\n";
    $insert .= '<meta property="og:description" content="'.esc_attr($ogp_descr).'" />' . "\n";
    $insert .= '<meta property="og:type" content="'.$ogp_type.'" />' . "\n";
    $insert .= '<meta property="og:url" content="'.esc_url($ogp_url).'" />' . "\n";
    $insert .= '<meta property="og:image" content="'.esc_url($ogp_img).'" />' . "\n";
    $insert .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />' . "\n";
    $insert .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";
    $insert .= '<meta name="twitter:site" content="▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲" />' . "\n";
    $insert .= '<meta property="og:locale" content="ja_JP" />' . "\n";

    
    echo $insert;
  }
} //END my_meta_ogp

add_action('wp_head','my_meta_ogp');//headにOGPを出力


追加の際に2箇所修正を入れます。

①中盤に記載している★★★のコード部分は、アイキャッチ画像など読み込む画像が無い場合代替画像URLを指定します。

②コード終盤の▲▲▲には、@マークで始まる自分のTwitterIDを入れましょう

OGPがきちんと反映しているかテスト

テストについては、下記のテストサイトで調べます。

公式Card validator

トップページURLを入力して、下記のような表示になればOKです。


カスタムには下記のサイトを参考にさせて頂きました。

参考【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法


画像提供:Pikisuperstar – jp.freepik.com によって作成された calendar ベクトル



注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定