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

1. OGPとは？

OGPとは、ページがシェアされたときに、アイキャッチ画像やタイトル、要約文などを魅力的に表示してくれる設定のことです。

これならクリックしたくなりますよね。
TwitterカードもOGP設定と同じです。

なお、Twitterカードについては別の記事でイチから詳しく解説しています。詳しい仕組みに興味のある方はぜひチェックしてみてください。

【2020年版】Twitterカードとは？使い方と設定方法まとめ

OGP/Twitterカードで設定するべきタグ

をつけたタグが特に重要なものになります。

↑ ページがシェアされたときに、これらの情報をfacebookやtwitterのシステムが読みに来るわけですね。
og:type（ページタイプ）では、トップページなら「website」、記事ページなら「article」と入力します。
twitter:cardではカードの種類を実質2種類から選ぶことができます。画像が大きく表示されるように「summary_large_image」と入力するのがおすすめです（詳しくは先ほどリンクを載せたTwitterカードの解説を読んでみてください）。

2. OGPタグが設定されているかどうかを調べる

WordPressのテーマによっては、OGPタグがあらかじめ設定されています。また「All in One SEO Pack」などのプラグインを使って設定することもできます。
というわけで、まずは自分のブログにOGPタグが設定されているかどうかを調べましょう。こちらの手順はパソコンで行う必要があります。

手順1：記事ページを開く

手順2：右クリック

ページ内のどこでも良いので、右クリックします。

手順3：「ページのソースを表示」をクリック

ほとんどのブラウザでは、右クリックしたときのメニューに「ページのソースを表示」というものがあるので、こちらをクリックします。

手順4：「og:」で検索

すると、そのページを構成しているHTMLタグがずらっと表示されます。拒否反応が出てくる方もいるかもしれませんが、グッと耐えてください（笑）

ここで、Ctrl+Fのショートコードを実行します（Macなら⌘+F）。これでページ内の文字列を検索できるようになります。

↑ まずは「og:」と検索してみましょう。<meta property="og:◯◯というようなコードが見つかれば、OGP設定が書かれています（正しいかどうかは別として…）。

逆に「og:」でヒットしなければ、OGP設定はされていないので下の手順で設定を行いましょう。

3. WordPressでプラグイン無しでOGP設定をする方法

今回はプラグインを使わずに、OGP設定をする方法を紹介します。設定するのは「トップページ」と「投稿ページ/固定ページ」のみになります。

functions.phpにコードを貼付け

以下のコードをfunctions.phpにまるっと貼り付けます。大事なファイルなのでバックアップを取るのを忘れないように！

WordPressでバックアップを取る4つの方法（初心者向け）

/*********************
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 = 'TOPページ＆アイキャッチ画像がないときに使われる画像のURL';
    }

    //出力する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";

    //facebookのapp_id（設定する場合）
    $insert .= '<meta property="fb:app_id" content="ここにappIDを入力">' . "\n";
    //app_idを設定しない場合ここまで消す

    echo $insert;
  }
} //END my_meta_ogp

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

これでOGPタグがHTMLのheadタグ内に出力されるようになります。ただし、3箇所だけ書き換えを行う必要があります。オレンジの下線が引かれている部分です。

書き換え1：TOPページ＆アイキャッチ画像がないときに使われる画像のURL

トップページがシェアされたときや、記事ページにアイキャッチ画像が登録されていなかったときに使われる画像のURLをこちらに貼り付けます。

管理画面の「メディア」から画像をアップロードし、その画像の「URL」を貼り付ければOKです。

書き換え2：ツイッターのアカウント名（twitter:site）

<meta name="twitter:site" content="~" />のcontent=""内にTwitterのアカウント名（ユーザー名）を入力します。
個人のツイッターアカウントでOKです。このとき@も含めるようにしましょう。
content="@saruwakakun"という感じですね。

書き換え3：アプリID（fb:app_id）

facebook向けのOGP設定として「fb:app_id」を指定するのが望ましいとされています（Facebookさん自身は「必須」と言っています）。これは、facebookでシェアされたときのクリックやインプレッションなどの解析ツールを使うために必要になります。
なのですが、このapp_idを取得するのが結構面倒なんですよね…。余裕のある方は「Facebook App IDの取得方法」を参考に取得してみてください。
取得したapp_idは、上述のコードの<meta property="fb:app_id" content="~">のcontent=""内に入力してくださいませ。

OGPタグがうまく設定できたかどうかチェックしよう

facebookとTwitterそれぞれで、ちゃんと設定ができているかを確認しておきましょう。

↑facebookの確認はこちらから。調べたいページのURLを入力して「デバッグ」をクリックするだけ。うまく設定できていれば、以下のようにプレビューなどが表示されます。

うまく反映されないときは「もう一度スクレイピング」をクリックしてみてください。facebookさんが再度そのページを読みに行ってくれます。

↑次にTwitterです。こちらも同じようにURLを入力して「Preview Card」をクリックするだけでOKです。