今やソーシャルメディアへのブログ記事の投稿は、ブログへのアクセス誘導に重要な位置を占めています。また、そのソーシャルメディアで拡散でもされれば、ブログへのアクセスは格段に伸びるでしょう。

しかし、単にブログ記事のリンクをソーシャルメディアで紹介するだけではダメです。それだけではクリックしてくれません。では、どうすればいいのか。

その答えは「Twitterカード」と「OGP」にあります。

つまり、「Twitterカード」と「OGP」をブログに設定すれば、ソーシャルメディアでのクリックが格段に上がるというわけです。

というわけで今回は、「Twitterカード」と「OGP」の機能紹介とワードプレスに設定する方法を紹介していきましょう。

Twitterカードとは

ツイッターカードとは、ツイッターにてツイートで貼り付けた記事、または誰かが貼ってくれた場合、視覚的にPRするための機能です。具体的にはツイートの中で「アイキャッチ画像」や「記事のタイトル」、または自分で設定した画像が表示されるようになります。

例えば、こんな感じ。

または、こんな感じ。

このように、文字だけのツイートよりも、Twitterカードを設定することで、視覚的にPRされ、魅力的なツイートを演出することができます。その結果、シェアした記事がクリックされるというわけです。

ツイッターでは、文字だけのツイートよりも画像付き(サムネイル)の方が何となくクリックしたくなりますよね。その心理をついているのが、Twitterカードという機能です。

Twitterカードの設定については、後ほどご紹介させていただきます。

OGPとは

OGPとは、基本的に機能はTwitterカードと同じです。ただ、Twitterカードと少し違うのは、Twitterカードがツイートだけの投稿にたいし、OGPはフェイスブックとかラインとか、他のソーシャルメディアでも画像付き(サムネイル)の投稿ができるという所です。

つまり、ソーシャルメディアで魅力的に拡散されたければ、OGPの設定は必須というわけです。

このOGPの設定方法についてもこの記事内で紹介していきます。

SPONSORED LINK

ワードプレスに「Twitterカード」と「OGP」を設定する方法

では、ここからワードプレスに「Twitterカード」と「OGP」を設定する方法を紹介していきましょう。

ワードプレスにタグを追加する

まず、「Twitterカード」と「OGP」を設定するには、設定するためのコードが必要です。そのコードは以下の通りです。

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を出力

このコードは「サルワカさん」のサイトを参考にさせていただきました。「Twitterカード」と「OGP」の設定については他にもたくさんの記事がありますが、このコードが一番、安定して設定しやすかったです。なので、当ブログでも紹介させていただきます。

さて、このコードをコピーします。コピーしたらワードプレスの管理画面から外観を選択。そして、テーマ編集をクリックして、その中の functions.php を選びます。

外観 > テーマ編集 > functions.php

そして、先ほどコピーしたコードを functions.php の一番下の部分にペーストして追加します。

コードを3箇所カスタマイズする

functions.php にコードをペーストしたら、3箇所だけカスタマイズします。

カスタマイズする箇所は、先ほどのコード内にある赤い部分です。

  1. TOPページ&アイキャッチ画像がないときに使われる画像のURL
  2. ツイッターのアカウント名
  3. ここにappIDを入力

① 画像URLの追加

まず、①の部分には、画像のURLを追加します。このURLは、ワードプレス内にある「メディア」から選択してください。

選択したら、右側にあるURLをコピーして、コード内に貼り付けます。

ワードプレス内にある「メディア」のURLをコピーする。

② ツイッターのアカウント名(ユーザー名)を追加

次に、②の部分では、ツイッターのアカウント名(ユーザー名)を追加します。

アカウント名を追加する際には 「@」もつけておきましょう。つまり、私のアカウントで言えば、「@affiliaterkiyo」ということになります。

③ appIDの追加

最後は、appIDの入力です。これは、フェイスブックで取得するアプリのIDです。これは15桁の数字からなるもので、取得方法については「Facebook App ID(アプリID)の取得方法」を参考にしてください。

さて、appIDを取得したら、コード内に追加して更新をクリックします。

これで、「Twitterカード」と「OGP」の設定は完了です。

「Twitterカード」と「OGP」を確かめる

「Twitterカード」と「OGP」の設定を終えたら、実際にちゃんと設定されたか確認してみましょう。

Twitterカードの確認方法

まず、Twitterカードは以下から確認します。

Twitterカードを確認する

記事のURLを入力して「Preview Card」をクリックするだけで確認できます。

記事URLを入力してTwitterカードを確認する。

以下のようになればOKです。

Twitterカードの設定がうまくいけば表示されます。

OGPの確認方法

facebookの確認は以下から確認します(先にフェイスブックにログインしておいてください)。

→ OGPを確認する

クリック後、調べたいページのURLを入力して「デバッグ」をクリックすれば確認できます。なお、フェイスブック内でシェアしたことのある記事だけになりますので、まず先に、記事をフェイスブックでシェアしておきましょうね。

以上で、「Twitterカード」と「OGP」の設定方法は終了です。

なお、今回のようにコードの追加という設定が面倒ならば、初めから「Twitterカード」と「OGP」が設定されているテーマをインストールするのも一つの手です。

例えば、

賢威テンプレート

などは、とても簡単に設定できますよ。

関連記事はこちら