WordPressでプラグインを使わずにogpタグを設定する

ogpタグとは、ソーシャルメディアでシェアされた時の見え方を定義する情報です。
ogpタグを適切に設定していると、SNSでシェアされた時に、以下のような見栄えになります。

これはSNSでの見栄えにも関わるので、重要な設定項目となります。
今回は、WordPressでのogpタグの設定について説明していきます。

ogpタグを使用する方法

ogpタグを設定するには、大きく以下の二つの設定が必要になります。
・headタグにprefix属性を設定する。
・ogpタグをheadタグ内に記載する。

headタグにprefix属性を設定する

ogpタグを使用するには、このページがogpタグを使用するということを宣言しないといけません。
その宣言をするために、headタグに以下のような記載をする必要があります。

headタグのprefix要素

<head prefix="og: og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# [属性]: http://ogp.me/ns/[属性]#">

[属性]の部分は、ページによって異なります。
トップページならば「website」、記事ページなら「article」と記載する必要があります。

なので、php内で分岐処理が必要になってきます。
今のページがトップページなら「website」、そうでないなら「article」と記載する必要があります。
これは以下のようなロジックで制御可能です。

prefix要素の分岐処理

<?php 
    // ページタイプに応じて要素を分岐
    $attr = is_home() || is_front_page() ? 'website' : 'article';
?>
<head prefix="og: og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# <?php echo $attr?>: http://ogp.me/ns/<?php echo $attr?>#">

is_home() || is_front_page() で、現在のページがトップページかどうかを判定しています。
ちなみにheadタグなので、記載するファイルとしては、header.phpになります。

ogpタグをheadタグ内に記載する

prefix属性の宣言が終わったら、次に実際のogpタグを記載していきます。
ogpタグはheadタグ内に出力するので、wp_head()メソッドにogpタグ出力処理をフックさせるといいでしょう。

具体的には以下のようなロジックを追加します。
このロジックはfunction.phpに記載します。

Wordpressでogpタグを設定するサンプル

function out_ogp_tag() {
  $type = 'article';
  $title = get_the_title();
  $discription = '';
  $site_name = get_bloginfo('name');
  $thumbnail_img = '';

  if(is_home() || is_front_page()) {
      // topページの場合
      $type = 'website';
      $title = $site_name;
      $discription = 'サイトの説明';
      $thumbnail_img = [固定画像のパス];
  } else {
      // それ以外の場合
      $type = 'article';
      $title = get_the_title();
      // タグを除去し、プレーンテキストに変換する。先頭約70文字を取得。
      $discription = substr(strip_tags(strip_shortcodes(get_post(get_the_ID(), OBJECT, '')->post_content)), 0, 140); 
      $thumbnail_img = get_the_post_thumbnail_url(get_the_ID(), 'medium');
  }

  echo '<!-------ogpタグ - start------->';
  echo '<meta property="og:url" content="'
      . is_ssl() ? 'https' : 'http') . '://' . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] . '"/>';
  echo '<meta property="og:type" content="'. $type . ' "/>';
  echo '<meta property="og:title" content="'. $title . '" />';
  echo '<meta property="og:description" content="'. $discription . '" />';
  echo '<meta property="og:site_name" content="'. $site_name . '" />';
  echo '<meta property="og:image" content="'. $thumbnail_img . '" />';

  echo '<!----tiwitter - start---->';
  echo '<meta name="twitter:card" content="summary_large_image" />';
  echo '<meta name="twitter:site" content="' . $_SERVER["HTTP_HOST"] .'" />';
  echo '<meta name="twitter:title" content="'. $title . '" />';
  echo '<meta name="twitter:description" content="'. $discription . '" />';
  echo '<meta name="twitter:image" content="'. $thumbnail_img . '" />';
  echo '<!----tiwitter - end---->';

  echo '<!-------ogpタグ - end------->';
}
add_action('wp_head', 'out_ogp_tag');

前半部でトップページか記事ページかによって変数の値を切り替えています。
後半のechoの部分で、実際のogpタグを出力しています。
最後の add_action('wp_head', 'out_ogp_tag'); でogp出力処理をwp_headにフックさせています。
これによって、wp_headが実行されると、この処理も一緒に実行されます。

ogpタグについての説明

ロジック中にいくつかogpタグが登場しているので、それらについて簡単に説明します。

ogpタグの設定項目

og:url	ページのURLを設定します。
og:type	ページの種類を表します。トップページならwebsite、それ以外ならarticleを指定します。
og:title	ページのタイトルを設定します。
og:description	ページの説明です。このロジックでは、記事の本文の先頭70文字程度を抜き出しています。トップページでは固定文言を出しています。
og:image	画像です。このロジックでは、記事のサムネイルを指定します。トップページでは専用の画像を指定しています。
twitter:card	witterでシェアされた時の表示形式を指定します。いくつか設定値がありますが、今回は画像が大きく表示される「summary_large_image」を指定します。設定値についての詳細は以下が詳しくまとまっています。 Twitter カード 7タイプの使い方をカード種別ごとに解説するよ \| WWW WATCH
twitter:site	サイトのURLです。今回は、ドメインを設定しています。
twitter:title	タイトルです。 ogと同じものを設定しています。
twitter:description	ページの説明です。 ogと同じものを設定しています。
twitter:image	表示される画像の設定です。 ogと同じものを設定しています。

SNSでの表示を確認

ogpタグの設定画完了したら、実際に見た目を確認してみましょう。
以下のサイトで表示を確認することができます。
それぞれのページで、シェアされた時の見た目を確認したいページのURLを入力して下さい。