【WordPress】プラグイン不要！functions.phpでメタ情報・OGP設定する方法

Webサイトの価値は、コンテンツそのものだけでなく、それが「どのように見つけられ、共有されるか」によって大きく左右されます。検索結果でのクリック率や、SNSでシェアされたときの見栄えは、アクセス数を伸ばすための重要な要素です。

その鍵を握るのが、メタ情報（meta descriptionなど）とOGP（Open Graph Protocol）です。

WordPressでは、プラグインを使えばこれらを簡単に設定できますが、「余計なプラグインは増やしたくない」「もっと自由にカスタマイズしたい」と感じる方も多いでしょう。

この記事では、テーマのfunctions.phpを編集して、プラグインに頼らずにメタ情報とOGPを最適化する方法を解説します。

header.phpの直接編集はNG？functions.phpを使うべき理由

WordPressのカスタマイズを始めると、多くの人が<head>タグを編集するためにheader.phpに目を向けます。しかし、これは推奨される方法ではありません。

テーマアップデートで変更が消える悲劇

WordPressのテーマは、セキュリティの向上や機能追加のために定期的にアップデートされます。テーマをアップデートすると、テーマファイルは新しいものに丸ごと上書きされてしまいます。
つまり、header.phpに直接書き加えたコードは、アップデートのたびに消えてしまうのです。

これを避けるために「子テーマ」を使う方法もありますが、WordPressにはもっとスマートな解決策が用意されています。それがアクションフックの利用です。

「アクションフック」とは？

アクションフックとは、WordPressが処理を行う特定のタイミングで、独自のプログラムを割り込ませるための仕組みです。

<head>タグ内に関連するフックがwp_headです。header.phpファイルの中には、通常<?php wp_head(); ?>という記述があります。これは「WordPressくん、ここに必要な<head>用のタグをまとめて出力してね！」という合図です。

私たちは、functions.phpに「wp_headの合図があったら、このコードも追加で出力してね」とお願いすることで、テーマファイルを直接傷つけることなく、安全に機能を追加できるのです。

functions.phpでメタ情報とOGPを設定する

それでは、実際にfunctions.phpに記述するコードを見ていきましょう。
以下のコードは、基本的なメタ情報とOGP、さらにTwitterカードにも対応した、コピー＆ペーストして使えるテンプレートです。

【重要】 作業前には必ずfunctions.phpのバックアップを取ってください。記述ミスはサイトが真っ白になる原因になります。

/*
 * ==================================================
 * メタ情報とOGPタグを動的に出力する
 * ==================================================
 */
function my_custom_meta_and_ogp_tags() {

  // --- 基本設定 ------------------------------------------
  $ogp_title = '';
  $ogp_description = '';
  $meta_description = '';
  $ogp_url = '';
  // デフォルトのOGP画像。アイキャッチがない場合などに使われます。
  // 事前にメディアライブラリへアップロードし、そのURLを貼り付けてください。
  $ogp_image = 'https://example.com/default-image.jpg';
  $ogp_type = 'website';

  // サイト名
  $ogp_site_name = get_bloginfo('name');
  
  // Facebook App ID (任意)
  // $facebook_app_id = 'YOUR_FACEBOOK_APP_ID';

  // --- ページごとの設定 ------------------------------------

  // 投稿ページ・固定ページの場合
  if ( is_singular() ) { // is_single()とis_page()をまとめた条件分岐
    $post_id = get_the_ID();
    $ogp_title = get_the_title();
    $ogp_url = get_permalink();
    $ogp_type = 'article';

    // descriptionの設定 (抜粋があれば優先的に使用)
    if ( has_excerpt( $post_id ) ) {
      $meta_description = get_the_excerpt( $post_id );
    } else {
      // 抜粋がなければ本文の先頭を110文字切り出す
      $content = wp_strip_all_tags( get_the_content() );
      $meta_description = mb_substr( $content, 0, 110 ) . '...';
    }

    // OGP画像の設定 (アイキャッチ画像があれば優先的に使用)
    if ( has_post_thumbnail( $post_id ) ) {
      $image_id = get_post_thumbnail_id( $post_id );
      $ogp_image = wp_get_attachment_image_url( $image_id, 'full' );
    }
  } 
  // トップページの場合
  else {
    $ogp_title = get_bloginfo('name');
    $meta_description = get_bloginfo('description'); // 「キャッチフレーズ」
    $ogp_url = home_url();
  }

  // descriptionをOGP用にも流用
  $ogp_description = $meta_description;

  // --- HTMLタグの出力 ------------------------------------
  
  // 値を安全に出力するためにエスケープ処理
  $ogp_title = esc_attr($ogp_title);
  $ogp_description = esc_attr($ogp_description);
  $meta_description = esc_attr($meta_description);
  $ogp_url = esc_url($ogp_url);
  $ogp_image = esc_url($ogp_image);
  $ogp_site_name = esc_attr($ogp_site_name);

  ?>
  <meta name="description" content="<?php echo $meta_description; ?>">

  <meta property="og:title" content="<?php echo $ogp_title; ?>">
  <meta property="og:description" content="<?php echo $ogp_description; ?>">
  <meta property="og:url" content="<?php echo $ogp_url; ?>">
  <meta property="og:image" content="<?php echo $ogp_image; ?>">
  <meta property="og:type" content="<?php echo $ogp_type; ?>">
  <meta property="og:site_name" content="<?php echo $ogp_site_name; ?>">
  <meta property="og:locale" content="ja_JP">
  
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="<?php echo $ogp_title; ?>">
  <meta name="twitter:description" content="<?php echo $ogp_description; ?>">
  <meta name="twitter:image" content="<?php echo $ogp_image; ?>">
  
  <?php
  // Facebook App ID があれば出力
  // if ( isset($facebook_app_id) ) {
  //   echo '<meta property="fb:app_id" content="' . $facebook_app_id . '">' . "\n";
  // }
  ?>
<?php
}
// wp_headアクションフックに登録
add_action( 'wp_head', 'my_custom_meta_and_ogp_tags' );

/*
 * ==================================================
 * メタ情報とOGPタグを動的に出力する
 * ==================================================
 */
function my_custom_meta_and_ogp_tags() {

  // --- 基本設定 ------------------------------------------
  $ogp_title = '';
  $ogp_description = '';
  $meta_description = '';
  $ogp_url = '';
  // デフォルトのOGP画像。アイキャッチがない場合などに使われます。
  // 事前にメディアライブラリへアップロードし、そのURLを貼り付けてください。
  $ogp_image = 'https://example.com/default-image.jpg';
  $ogp_type = 'website';

  // サイト名
  $ogp_site_name = get_bloginfo('name');
  
  // Facebook App ID (任意)
  // $facebook_app_id = 'YOUR_FACEBOOK_APP_ID';

  // --- ページごとの設定 ------------------------------------

  // 投稿ページ・固定ページの場合
  if ( is_singular() ) { // is_single()とis_page()をまとめた条件分岐
    $post_id = get_the_ID();
    $ogp_title = get_the_title();
    $ogp_url = get_permalink();
    $ogp_type = 'article';

    // descriptionの設定 (抜粋があれば優先的に使用)
    if ( has_excerpt( $post_id ) ) {
      $meta_description = get_the_excerpt( $post_id );
    } else {
      // 抜粋がなければ本文の先頭を110文字切り出す
      $content = wp_strip_all_tags( get_the_content() );
      $meta_description = mb_substr( $content, 0, 110 ) . '...';
    }

    // OGP画像の設定 (アイキャッチ画像があれば優先的に使用)
    if ( has_post_thumbnail( $post_id ) ) {
      $image_id = get_post_thumbnail_id( $post_id );
      $ogp_image = wp_get_attachment_image_url( $image_id, 'full' );
    }
  } 
  // トップページの場合
  else {
    $ogp_title = get_bloginfo('name');
    $meta_description = get_bloginfo('description'); // 「キャッチフレーズ」
    $ogp_url = home_url();
  }

  // descriptionをOGP用にも流用
  $ogp_description = $meta_description;

  // --- HTMLタグの出力 ------------------------------------
  
  // 値を安全に出力するためにエスケープ処理
  $ogp_title = esc_attr($ogp_title);
  $ogp_description = esc_attr($ogp_description);
  $meta_description = esc_attr($meta_description);
  $ogp_url = esc_url($ogp_url);
  $ogp_image = esc_url($ogp_image);
  $ogp_site_name = esc_attr($ogp_site_name);

  ?>
  <meta name="description" content="<?php echo $meta_description; ?>">

  <meta property="og:title" content="<?php echo $ogp_title; ?>">
  <meta property="og:description" content="<?php echo $ogp_description; ?>">
  <meta property="og:url" content="<?php echo $ogp_url; ?>">
  <meta property="og:image" content="<?php echo $ogp_image; ?>">
  <meta property="og:type" content="<?php echo $ogp_type; ?>">
  <meta property="og:site_name" content="<?php echo $ogp_site_name; ?>">
  <meta property="og:locale" content="ja_JP">
  
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="<?php echo $ogp_title; ?>">
  <meta name="twitter:description" content="<?php echo $ogp_description; ?>">
  <meta name="twitter:image" content="<?php echo $ogp_image; ?>">
  
  <?php
  // Facebook App ID があれば出力
  // if ( isset($facebook_app_id) ) {
  //   echo '<meta property="fb:app_id" content="' . $facebook_app_id . '">' . "\n";
  // }
  ?>
<?php
}
// wp_headアクションフックに登録
add_action( 'wp_head', 'my_custom_meta_and_ogp_tags' );

コードの解説：使われているWordPress関数

関数	役割
`get_bloginfo('name')`	WordPressの「サイトのタイトル」を取得します。
`get_bloginfo('description')`	「キャッチフレーズ」を取得します。
`is_singular()`	投稿ページまたは固定ページのときに`true`を返します。
`get_the_ID()`	表示しているページのIDを取得します。
`get_the_title()`	ページのタイトルを取得します。
`get_permalink()`	ページのURL（パーマリンク）を取得します。
`has_excerpt()`	投稿に「抜粋」が設定されているか確認します。
`get_the_excerpt()`	「抜粋」の内容を取得します。
`get_the_content()`	本文の内容を取得します。
`has_post_thumbnail()`	アイキャッチ画像が設定されているか確認します。
`get_the_post_thumbnail_id()`	アイキャッチ画像のIDを取得します。
`wp_get_attachment_image_url()`	画像IDから画像のURLを取得します。
`esc_attr()`, `esc_url()`	セキュリティのため、出力する文字列を無害化します。

【応用編】カスタマイズ使用例

基本のコードだけでも十分ですが、ここでは一歩進んで、より柔軟なサイト運営を実現するためのカスタマイズ例をご紹介します。

使用例1: カスタムフィールドで投稿ごとにOGPを完全コントロール

記事のタイトルとSNSでシェアされたいタイトルが違う場合や、特定の記事だけ違うOGP画像を使いたい場合があります。そんなときは、WordPress標準の「カスタムフィールド」機能を使いましょう。

手順:

投稿編集画面の右上にあるオプション（︙）から「設定」→「パネル」と進み、「カスタムフィールド」を有効にします。
投稿編集画面の下部に表示されたカスタムフィールドの「新規追加」をクリックします。
以下のルールで、OGP情報を個別に入力します。
- 名前: ogp_title_custom → 値: 設定したいOGPタイトル
- 名前: ogp_desc_custom → 値: 設定したいOGP説明文
- 名前: ogp_image_custom → 値: 設定したいOGP画像のURL
先ほどのfunctions.phpのコードに、以下の処理を追記します。

functions.phpのif ( is_singular() ) {ブロック内に追記・変更

// ... is_singular()の中 ...
$post_id = get_the_ID();

// --- ▼▼▼ ここから変更・追記 ▼▼▼ ---

// カスタムフィールドから値を取得
$custom_ogp_title = get_post_meta($post_id, 'ogp_title_custom', true);
$custom_ogp_desc = get_post_meta($post_id, 'ogp_desc_custom', true);
$custom_ogp_image = get_post_meta($post_id, 'ogp_image_custom', true);

// OGPタイトルの設定（カスタムフィールドがあれば優先）
$ogp_title = !empty($custom_ogp_title) ? $custom_ogp_title : get_the_title();

$ogp_url = get_permalink();
$ogp_type = 'article';

// descriptionの設定（カスタムフィールドがあれば最優先）
if ( !empty($custom_ogp_desc) ) {
  $meta_description = $custom_ogp_desc;
} elseif ( has_excerpt( $post_id ) ) {
  $meta_description = get_the_excerpt( $post_id );
} else {
  $content = wp_strip_all_tags( get_the_content() );
  $meta_description = mb_substr( $content, 0, 110 ) . '...';
}

// OGP画像の設定（カスタムフィールドがあれば最優先）
if ( !empty($custom_ogp_image) ) {
  $ogp_image = $custom_ogp_image;
} elseif ( has_post_thumbnail( $post_id ) ) {
  $image_id = get_post_thumbnail_id( $post_id );
  $ogp_image = wp_get_attachment_image_url( $image_id, 'full' );
}

// --- ▲▲▲ ここまで変更・追記 ▲▲▲ ---

// ... 以降のコードは同じ ...

// ... is_singular()の中 ...
$post_id = get_the_ID();

// --- ▼▼▼ ここから変更・追記 ▼▼▼ ---

// カスタムフィールドから値を取得
$custom_ogp_title = get_post_meta($post_id, 'ogp_title_custom', true);
$custom_ogp_desc = get_post_meta($post_id, 'ogp_desc_custom', true);
$custom_ogp_image = get_post_meta($post_id, 'ogp_image_custom', true);

// OGPタイトルの設定（カスタムフィールドがあれば優先）
$ogp_title = !empty($custom_ogp_title) ? $custom_ogp_title : get_the_title();

$ogp_url = get_permalink();
$ogp_type = 'article';

// descriptionの設定（カスタムフィールドがあれば最優先）
if ( !empty($custom_ogp_desc) ) {
  $meta_description = $custom_ogp_desc;
} elseif ( has_excerpt( $post_id ) ) {
  $meta_description = get_the_excerpt( $post_id );
} else {
  $content = wp_strip_all_tags( get_the_content() );
  $meta_description = mb_substr( $content, 0, 110 ) . '...';
}

// OGP画像の設定（カスタムフィールドがあれば最優先）
if ( !empty($custom_ogp_image) ) {
  $ogp_image = $custom_ogp_image;
} elseif ( has_post_thumbnail( $post_id ) ) {
  $image_id = get_post_thumbnail_id( $post_id );
  $ogp_image = wp_get_attachment_image_url( $image_id, 'full' );
}

// --- ▲▲▲ ここまで変更・追記 ▲▲▲ ---

// ... 以降のコードは同じ ...

これで、カスタムフィールドに入力があればその情報が最優先で使われ、入力がなければ従来通りの自動生成が行われる、ハイブリッドな仕組みが完成します。

確認とデバッグの方法

コードを設置したら、必ず正しく動作しているかを確認しましょう。意図しないタイトルや画像が表示されては元も子もありません。

ラッコツールズ OGP確認: URLを入力するだけで、OGPがどのように表示されるか手軽にシミュレーションできます。
Facebookシェアデバッガー: Facebook公式ツール。FacebookやInstagramでの表示を確認できます。一度読み込んだ情報はキャッシュ（保存）されるため、変更を反映させたい場合は「Scrape Again（もう一度スクレイプ）」ボタンを押すことが非常に重要です。

よくあるトラブル

Q. OGP画像が表示されません
A. 画像URLは正しいですか？ブラウザのアドレスバーに直接貼り付けて表示されるか確認しましょう。また、Facebookが推奨する画像サイズ（1200 x 630ピクセルなど）に近いかどうかも確認してください。
Q. 変更したのに古い情報のままです
A. まずはFacebookシェアデバッガーで「Scrape Again」を試してください。それでも変わらない場合は、WordPressに導入しているキャッシュ系プラグイン（例: WP Super Cache）や、利用しているサーバー独自のキャッシュ機能が原因かもしれません。キャッシュの削除を試みてください。

まとめ

今回は、functions.phpを利用して、WordPressサイトのメタ情報とOGPを管理・最適化する方法を解説しました。

最初は難しく感じるかもしれませんが、一度テンプレートコードを設置してしまえば、あとはWordPressの基本的な機能（タイトル、抜粋、アイキャッチ画像）を入力するだけで、SEOとSNSに強いサイト構造が自動で維持されます。

プラグインに頼らないことでサイトは軽量化され、表示速度の向上にも繋がります。

【WordPress】プラグイン不要！functions.phpでメタ情報・OGP設定する方法

header.phpの直接編集はNG？functions.phpを使うべき理由

テーマアップデートで変更が消える悲劇

「アクションフック」とは？

functions.phpでメタ情報とOGPを設定する

コードの解説：使われているWordPress関数

【応用編】カスタマイズ使用例

使用例1: カスタムフィールドで投稿ごとにOGPを完全コントロール

確認とデバッグの方法

よくあるトラブル

まとめ

Prev

Next

Related Posts

WordPressでカスタムタクソノミーのURLからタクソノミースラッグを削除する方法

DockerでWordPress環境を構築する方法：開発効率を最大化するガイド

WordPressのカスタムフィールドやカテゴリを検索対象に含める方法

WordPressで記事を人気ランキング順に表示する方法

WordPressの管理画面カスタマイズ-管理画面メニュー

MW WP Formで複数のエラーメッセージを1つにまとめる方法

【MW WP Form】大量のフォームでも安心！エラーメッセージを共通化して管理を劇的に楽にする方法

WordPressカスタム投稿で未選択タームを自動設定する方法