OGP設定

OGP設定したら…

X やら Facebook やらよくわかわんが、OGP設定をしておくとそれらでちょっといいことがあるらしい。

まあ、設定したからと言ってGoogle の検索順位が爆上がりとか、SNS からの流入が爆増なんてことはないけど…

設定

プラグインの「All in One SEO」や「Yoast SEO」などで簡単に設定できるが、私のサイトにはそんな高機能なプラグインは似合わないので function.php で設定する。

まずは下記コードを add_og_meta.php として保存。

<?php
/** OGPを使用する宣言(htmlタグに属性を追加)**/
if (!function_exists('add_og_prefix')) :
function add_og_prefix($tagdata)
{
   if (is_front_page() || is_home() || is_singular()) {
      $tagdata .= ' prefix="og: http://ogp.me/ns#"';
   }
   return $tagdata;
}
add_filter('language_attributes', 'add_og_prefix');
endif;


/** OGP挿入 **/
if (!function_exists('add_og_meta')) :
function add_og_meta()
{
   if (is_front_page() || is_home() || is_singular()) {
      $og_title = '';
      $og_descr = '';
      $og_url = '';
      $og_img = 'TOPページまたはアイキャッチ画像がないときに使われる画像のURL';
      $og_site_name = get_bloginfo('name'); // サイトのタイトル

      if (is_singular()) { // 記事&固定ページ
         global $post;
         $post = get_queried_object(); // 表示ページのWPオブジェクトを取得
         setup_postdata($post);
         $og_title = $post->post_title;
         $og_descr = mb_substr(get_the_excerpt(), 0, 100); // 抜粋
         $og_url   = get_permalink();
         if (has_post_thumbnail()) {
            $og_img = get_the_post_thumbnail_url($post->ID, 'full');
         }
         $og_type = 'article';
         wp_reset_postdata();
      }
      else { //トップページ
         $og_title = $og_site_name;
         $og_descr = get_bloginfo('description'); // キャッチフレーズ
         $og_url   = home_url();
         $og_type  = 'website';
      }

      // 出力するOGPタグをまとめる
      $og_ins  = '<meta property="og:title" content="' . esc_attr($og_title) . '">';
      $og_ins .= '<meta property="og:description" content="' . esc_attr($og_descr) . '">';
      $og_ins .= '<meta property="og:type" content="' . $og_type . '">';
      $og_ins .= '<meta property="og:url" content="' . esc_url($og_url) . '">';
      $og_ins .= '<meta property="og:image" content="' . esc_url($og_img) . '">';
      $og_ins .= '<meta property="og:site_name" content="' . esc_attr($og_site_name) . '">';
      $og_ins .= '<meta name="twitter:card" content="summary_large_image">';
      $og_ins .= '<meta name="twitter:site" content="@Xのユーザー名">';
      $og_ins .= '<meta property="og:locale" content="ja_JP">';
      $og_ins .= '<meta property="fb:app_id" content="FacebookアプリID(app_id)">';

      echo $og_ins;
   }
} //END add_og_meta

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

23行目の URL、54行目のXのユーザー名、56行目の FacebookアプリID は適宜変更する事。

ファイル構成が下記の場合

├ functions.php
└ fnc
   └ add_og_meta.php

functions.php に下記を追加記述

/** OGP挿入 **/
get_template_part('fnc/add_og_meta');

簡単な説明

23行目にデフォルト画像のURL を書いて下さい。
トップページやアイキャッチ画像がないページの時に使用されます。

$og_img = 'https://qarry.net/images/top.jpg'; // デフォルト画像のURL

24行目のサイトのタイトルと41行目のキャッチフレーズは WordPress の「設定 - 一般」で設定されているものを get_bloginfo() 関数で取得していますが、このファイルに直接書き込んでも OK です。

$og_site_name = 'サイトのタイトル'; // サイト名や会社名など
$og_descr     = 'キャッチフレーズ'; // サイトの簡単な説明など

サイトのタイトルはサイト名や会社名など、キャッチフレーズはサイトの簡単な説明などを記します。

$og_descr = mb_substr(get_the_excerpt(), 0, 100); // 抜粋

31行目で抜粋を100文字とセットしています。数字の100を変えれば文字数を変更できますが、WordPress で設定している抜粋の文字数以上は取得できません。
WordPress のデフォルトは 110文字らしいので、それ以上セットしたい場合はそちらの設定の変更も必要です。

53行目で Twitterカードの種類をセットしています。通常は summary_large_image か summary で、summary_large_image の方が summary より大きな画像が表示されるらしい。

$og_ins .= '<meta name="twitter:card" content="summary_large_image">';

54行目と56行目はそれぞれ Xのユーザー名と FacebookアプリID(app_id) を書いて下さい。なければその行を削除。

$og_ins .= '<meta name="twitter:site" content="@Xのユーザー名">';
$og_ins .= '<meta property="fb:app_id" content="123456789012345">';

関連記事

OGP and 構造化データ 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です