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

OGPタグをプラグインなしで設定

記事内に商品プロモーションが含まれる場合があります

今回は、WordPressでプラグインを使わずにOGP設定をする方法とサンプルコードを紹介します。

1. OGPとは?

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

OGPタグを設定した場合

例えば、OGPタグがちゃんと設定されていると、facebookでシェアされたときに、このようにカード形式でリンクを表示してくれます。

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

設定なし何も設定していないと…

こちらはTwitterカードの設定をしていない場合です。

設定ありTwitterカードとは

こちらは、Twitterカードを設定している場合です。Twitterをやっている方ならきっと見たことがあるはず。

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

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

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

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

↑ ページがシェアされたときに、これらの情報を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タグがずらっと表示されます。拒否反応が出てくる方もいるかもしれませんが、グッと耐えてください(笑)

HTMLが表示される

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

ogp設定

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

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

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

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

functions.phpにコードを貼付け

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

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 = '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のogpデバッグ

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

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

OGPで表示される画像サイズチェックには・・・

「アイキャッチ画像サイズチェッカー」というものを使えば、Twitterやfacebookでシェアされたときにアイキャッチ画像がどのように表示されるのかをまとめてチェックすることができます。
ぜひご活用ください。


同じカテゴリーの記事
同じカテゴリーの記事一覧
WordPressの使い方
サルワカ