【2024最新】WordPressのプラグインなしで、OGPの設定をする！Jetpackと共存＆Facebook・Twitter Cardsも出力

2024/11/07
2015/11/02
HowTo
PHP, WordPress

2024/11 更新

先日、OGPの設定を「WP-OGP」のプラグインを変更して使えるようにしたのですが（詳細はこちらとこちら）、たまたま別案件で要素検証をしてhead内を見てみたら、OGPの記述が2つある!? ということに気づき、どうやらその原因はJetpackが吐き出しているOGPの記述ということがわかりました。

JetpackはWordPressでサイトを作っている方ならご存知だと思うのですが、非常に便利なWP用のプラグインです。ですので、Jetpackが自動でOGPを出力して「Twitter Cards」等の記述も一緒に出力してくれるならそれでいいのでは？と思い「WP-OGP」のプラグインをオフにしてみたのですが、「Twitter Cardsの記述」がホームでなかったり、「app_id」や「admin」がうまく出力されなかったり、descriptionが長ったらしかったり、「Twitter cards」が自動で吐き出されなくなったりと、その挙動一つ一つを把握して出力するのは大変だな。。
と思い、プラグインを使わず、オリジナル（手動）でOGP設定をすることにしました。

プラグインなしで、FacebookやTwitter CardのOGPの設定をする！

やる作業としては大きく分けて以下の3つ。

Jetpackの吐き出すOGP設定を止める。
今まで使用していたプラグイン（WP-OGP）を止める。
オリジナルのogp.phpを作成して読み込む。

html宣言の編集や、facebookアプリの設定は、以前の記事（こちら）にあるので今回は省略しています。

1. Jetpackの吐き出すOGP設定を止める

これは以下の記述をTheme内のfunction.phpに記述します。

// Jetpackのパブリサイズ共有で自動的に出力されるOGPの設定の削除
add_filter('jetpack_enable_open_graph', '__return_false', 99);

「Jetpack」を使ってない方はスルーしてください。

2. WP-OGPを止める

これはそのままプラグインの設定で、WP-OGPを、他のOGPのプラグインを使ってる方はそのプラグインを停止（無効化）します。

「WP-OGP」を使ってない方はスルーしてください。

3. オリジナルのOGP.phpを作成して読み込む

先ほども記載しましたが、これはhtml宣言の編集や、facebookアプリの設定が終わっている必要があるので、それがまだの方は以前書いた記事（こちら）を参考にしてくださいね。

この設定が終わっている状態で、
まずは header.phpの＜head＞タグ内に以下の記述をコピペします。

<?php get_template_part('ogp');?>

次に以下のOGP.phpのファイルを作成します。

//とある場所はコメントアウトで、説明を記載しています。
25行目はogp画像としてオリジナルの画像を設定していますので、必ず変更してください。
41-43行目はTwitter Cardsの設定ですので、こちらも必ず変更してください。

<!--- OGP設定 --->
<meta property="og:type" content="blog">
<?php
if (is_single()){ //単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
  echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n"; //抜粋を表示
endwhile; endif;
  echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n"; //単一記事タイトルを表示
  echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n"; //単一記事URLを表示
} else { //単一記事ページページ以外の場合（アーカイブページやホームなど）
  echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n"; //「一般設定」管理画面で指定したブログの説明文を表示
  echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n"; //「一般設定」管理画面で指定したブログのタイトルを表示
  echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n"; //「一般設定」管理画面で指定したブログのURLを表示
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?).*?>/i'; //投稿にイメージがあるか調べる
if (is_single()){ //単一記事ページの場合
  if (has_post_thumbnail()){ //投稿にサムネイルがある場合の処理
    $image_id = get_post_thumbnail_id();
    $image = wp_get_attachment_image_src( $image_id, 'full');
    echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
  } else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) { //投稿にサムネイルは無いが画像がある場合の処理
    echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
  } else { //投稿にサムネイルも画像も無い場合の処理
    $ogp_image = get_home_url().'/ABC_images/ABC.png'; //ここはオリジナルの画像のURLにしています。Theme内ではなく、ホーム直下にフォルダを作って置いてます。Theme内のimageフォルダは、get_template_directory_uri().'/images/ABC_Logo.png'; です。
    if (isset($imgurl[2])) {
      echo '<meta property="og:image" content="'.$imgurl[2].'">';
    } else {
      error_log("エラー: $imgurl[2] が定義されていません");
    }
    echo "\n";
  }
} else { //単一記事ページページ以外の場合（アーカイブページやホームなど）
  if (get_header_image()){ //ヘッダーイメージがある場合は、ヘッダーイメージを取得
    echo '<meta property="og:image" content="'.get_header_image().'">';echo "\n";
  } else { //ヘッダーイメージがない場合の画像をとってくる。600×313pxのものを使っています。
    echo '<meta property="og:image" content="'.get_home_url().'/ABC_images/ABC_image.png">';echo "\n"; //Theme内ではなく、ホーム直下にフォルダを作って置いてます。Theme内のスクリーンショットにする場合は、.get_template_directory_uri().'/screenshot.png">';echo "\n";
  }
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="APP_ID">
<meta property="fb:admins" content="ADMIN_ID"><!--これはなしでもOKのようです。-->
<!--以下はTwitter Cardsの設定-->
<meta name="twitter:card" content="summary_large_image"><!--標準はsummary-->
<meta name="twitter:site" content="@Web_Design_ABC（@Twitterアカウント）">
<meta name="twitter:creator" content="@Web_Design_ABC（@Twitterアカウント）" ><!--これはなしでもOKと思います。-->
<!--- /OGP設定 --->

以上です！

と言っても々一行一行チェックするのはかなり大変ですが、
ここはきちんと設定しておかないと後々困りますので、面倒くさくても設定してくださいね。