【WordPress】プラグインなしでOGPを設定する方法｜コードは何をしているか？意味を解説（初心者向け、わかりやすい）

wordpress-prograshi（プロぐらし）-kv WordPress
記事内に広告が含まれていることがあります。
[PR]

SNSでリンクをシェアしたときに表示内容を最適化するためにOGPを設定したいときがあります。

そんなときWordPressではプラグインやデフォルトのエディタで指定することもできます。ですが、いちいち個別に設定するのは大変です。

そんなときは、プラグインを使用せずにfunctions.phpにコードを記述することで、現在のtitleタグやdescriptionなどをそのままOGPとして設定することができます。

この方法を使うと、ページ毎に個別に設定する必要がなくなるので設定の手間を省くことができます。ここでは、プラグインを使用せずにfunctions.phpにコードを記述する方法について、そのコードの意味なども含め解説しています。


参考

OGPとは何か？やプラグインを使ってOGPを設定する方法については下記をご参考ください。

【WordPress】OGPとは何か？SNS共有(X twitter,Facebook, インスタなど)の最適化方法｜prefix=”og～”, property=”og:image”とは何か？


コード全体像

/*OGPを使用する宣言（htmlタグに属性を追加）*/
function og_tag_prefix($tagdata) {
	if(is_home() || is_front_page() || is_singular()){
		$tagdata .= ' prefix="og: http://ogp.me/ns#"';
	}
	return $tagdata;
}

add_filter('language_attributes', 'og_tag_prefix');	



/*OGPタグの設定*/
function og_metatags() {
	global $post;
	
	if(is_home() || is_front_page() || is_singular()) {
			
		/** 共通項目の設定 **/
		$og_type = "article";		//記事ページ 必要に応じてprofileなどに変更
		$og_img_common = "";		//画像の絶対パス
		$x_site = "";				//X（twitter）のユーザー名 @twitterusername.
		$x_card = "summery";		//カードのタイプ 大きい画像で表示したい場合は「summary_large_image」に変更
		$fb_id = "";				//FacebookのID。不要な場合は指定なしでOK


		/* タイプの設定 */
		$og_type = ( is_front_page() || is_home() ) ? 'website' : og_type;


		/* URL, タイトルの設定 */
		if( is_singular() ) { //投稿(post)、カスタム投稿タイプ、固定ページ、添付ファイルのシングルページの場合
			setup_postdata($post);
			$og_title = $post->post_title;
			$og_url = get_permalink();
			$og_desc = mb_substr(get_the_excerpt(), 0, 100);
			wp_reset_postdata();
		} elseif ( is_front_page() || is_home() ) { //フロントまたは投稿一覧ページの場合
			$og_title = get_bloginfo('name');
			$og_desc = get_bloginfo('description');
			$og_url = home_url();
		}

		/*画像の設定 アイキャッチがある場合は使用。ない場合は共通項目の$ob_image_commonを使用*/
		if ( is_singular() && has_post_thumbnail() ) {
			$eyecatch_img = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
			$og_img = $eyecatch_img[0];
		} else {
			$og_img = $og_img_common;
		}

		/* headタグに追加するコードを作成 */
		$meta_og .= '<!-- functions.phpのOGP設定 -->';
		$meta_og .= '<meta property="og:title" content="'.esc_attr($og_title).'" />' . "\n";
		$meta_og .= '<meta property="og:description" content="'.esc_attr($og_desc).'" />' . "\n";
		$meta_og .= '<meta property="og:type" content="'.$og_type.'" />' . "\n";
		$meta_og .= '<meta property="og:url" content="'.esc_url($og_url).'" />' . "\n";
		$meta_og .= '<meta property="og:image" content="'.esc_url($og_img).'" />' . "\n";
		$meta_og .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />' . "\n";
		$meta_og .= '<meta property="og:locale" content="ja_JP" />' . "\n";

		if( $x_site != "" ){
			$meta_og .= '<meta name="twitter:card" content="'.$x_card.'" />' . "\n";
			$meta_og .= '<meta name="twitter:site" content="'.$x_site.'" />' . "\n";
		}

		if ($fb_id != "") {
		$meta_og .= '<meta property="fb:app_id" content="' . $fb_id . '">' . "\n";
		}

		$meta_og .= '<!-- ここまで -->' . "\n";
		
		echo $meta_og;
	}
}

add_action('wp_head','og_metatags');



OGP使用の宣言

OGPを使用するため、まずhtmlタグの中に「prefix=”og: http://ogp.me/ns#”」を追加する処理をします。

/*OGPを使用する宣言（htmlタグに属性を追加）*/
function og_tag_prefix($tagdata) {
	if(is_home() || is_front_page() || is_single()){
		$tagdata .= ' prefix="og: http://ogp.me/ns#"';
	}
	return $tagdata;
}

add_filter('language_attributes', 'og_tag_prefix');


is_home() || is_front_page() || is_single()で、投稿一覧、フロント、投稿(post)、カスタム投稿タイプ、固定ページ、添付ファイルのシングルページに該当する場合のみ「 prefix=”og: http://ogp.me/ns#」を返す関数をog_tag_prefixを作成しています。

add_filter関数のlanguage_attributesフックに作成した関数を追加します。

こうすることで、htmlタグの属性に指定した文字列を追加することができます。HTML上では以下のように表示されます。


OGP用のmetaタグの作成

全体のコード

続いて以下のコードで、OGPの設定をmetaタグとして作成し、headタグの中に表示させています。

/*OGPタグの設定*/
function og_metatags() {
	global $post;
	
	if(is_home() || is_front_page() || is_singular()) {
			
		/** 共通項目の設定 **/
		$og_type = "article";		//記事ページ 必要に応じてprofileなどに変更
		$og_img_common = "";		//画像の絶対パス
		$x_site = "";				//X（twitter）のユーザー名 @twitterusername.
		$x_card = "summery";		//カードのタイプ 大きい画像で表示したい場合は「summary_large_image」に変更
		$fb_id = "";				//FacebookのID。不要な場合は指定なしでOK


		/* タイプの設定 */
		$og_type = ( is_front_page() || is_home() ) ? 'website' : og_type;


		/* URL, タイトル, descriptionの設定 */
		if( is_singular() ) { //投稿(post)、カスタム投稿タイプ、固定ページ、添付ファイルのシングルページの場合
			setup_postdata($post);
			$og_title = $post->post_title;
			$og_desc = mb_substr(get_the_excerpt(), 0, 100);
			$og_url = get_permalink();
			wp_reset_postdata();
		} elseif ( is_front_page() || is_home() ) { //フロントまたは投稿一覧ページの場合
			$og_title = get_bloginfo('name');
			$og_desc = get_bloginfo('description');
			$og_url = home_url();
		}

		/*画像の設定 アイキャッチがある場合は使用。ない場合は共通項目の$ob_image_commonを使用*/
		if ( is_singular() && has_post_thumbnail() ) {
			$eyecatch_img = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
			$og_img = $eyecatch_img[0];
		} else {
			$og_img = $og_img_common;
		}

		/* headタグに追加するコードを作成 */
		$meta_og .= '<!-- functions.phpのOGP設定 -->';
		$meta_og .= '<meta property="og:title" content="'.esc_attr($og_title).'" />' . "\n";
		$meta_og .= '<meta property="og:description" content="'.esc_attr($og_desc).'" />' . "\n";
		$meta_og .= '<meta property="og:type" content="'.$og_type.'" />' . "\n";
		$meta_og .= '<meta property="og:url" content="'.esc_url($og_url).'" />' . "\n";
		$meta_og .= '<meta property="og:image" content="'.esc_url($og_img).'" />' . "\n";
		$meta_og .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />' . "\n";
		$meta_og .= '<meta property="og:locale" content="ja_JP" />' . "\n";

		if( $x_site != "" ){
			$meta_og .= '<meta name="twitter:card" content="'.$x_card.'" />' . "\n";
			$meta_og .= '<meta name="twitter:site" content="'.$x_site.'" />' . "\n";
		}

		if ($fb_id != "") {
		$meta_og .= '<meta property="fb:app_id" content="' . $fb_id . '">' . "\n";
		}

		$meta_og .= '<!-- ここまで -->' . "\n";
		
		echo $meta_og;
	}
}

add_action('wp_head','og_metatags');


is_home() || is_front_page() || is_single()で、投稿一覧、フロント、投稿(post)、カスタム投稿タイプ、固定ページ、添付ファイルのシングルページに該当する場合のみ処理を実行しています。


共通項目の設定

ページ毎に固有ではなく、サイト全体で共通となる項目を設定します。

	    /** 共通項目の設定 **/
		$og_type = "article";		//記事ページ 必要に応じてprofileなどに変更
		$og_img_common = "https://~";				//画像の絶対パス
		$x_site = "";			//X（twitter）のユーザー名 @twitterusername.
		$x_card = "summery";		//カードのタイプ 大きい画像で表示したい場合は「summary_large_image」に変更
		$fb_id = "";				//FacebookのID。不要な場合は指定なしでOK


x(twitter)やFacebookを特に指定しない場合はx_siteとfb_idは空欄でも問題ありません。


動的に値を取得

		/* タイプの設定 */
		$og_type = ( is_front_page() || is_home() ) ? 'website' : og_type;


		/* URL, タイトル, descriptionの設定 */
		if( is_singular() ) { //投稿(post)、カスタム投稿タイプ、固定ページ、添付ファイルのシングルページの場合
			setup_postdata($post);
			$og_title = $post->post_title;
			$og_desc = mb_substr(get_the_excerpt(), 0, 100);
			$og_url = get_permalink();
			wp_reset_postdata();
		} elseif ( is_front_page() || is_home() ) { //フロントまたは投稿一覧ページの場合
			$og_title = get_bloginfo('name');
			$og_desc = get_bloginfo('description');
			$og_url = home_url();
		}

		/*画像の設定 アイキャッチがある場合は使用。ない場合は共通項目の$ob_image_commonを使用*/
		if ( is_singular() && has_post_thumbnail() ) {
			$eyecatch_img = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
			$og_img = $eyecatch_img[0];
		} else {
			$og_img = $og_img_common;
		}


続いて、og_typeやog_title, og_urlなど動的に取得できるデータを設定しています。


		/* タイプの設定 */
		$og_type = ( is_front_page() || is_home() ) ? 'website' : og_type;

三項演算子を使って、フロントーページか投稿一覧ページの場合は「website」を、それ以外の場合は共通項目で設定したog_typeを指定します（デフォルトはarticle）


		/* URL, タイトル, descriptionの設定 */
		if( is_singular() ) { //投稿(post)、カスタム投稿タイプ、固定ページ、添付ファイルのシングルページの場合
			setup_postdata($post);
			$og_title = $post->post_title;
			$og_desc = mb_substr(get_the_excerpt(), 0, 100);
			$og_url = get_permalink();
			wp_reset_postdata();

		} elseif ( is_front_page() || is_home() ) { //フロントまたは投稿一覧ページの場合
			$og_title = get_bloginfo('name');
			$og_desc = get_bloginfo('description');
			$og_url = home_url();
		}


投稿(post)、カスタム投稿タイプ、固定ページ、添付ファイルのシングルページの場合の場合は、記事タイトルをog_titleに代入します。og_descには本文の100文字目までを適用しています。

補足

discriptionで「mb_substr」関数を使っています。文字列にする関数には「substr」関数もあります。違いは以下のとおりです。

  • mb_substr：2バイトの文字列にする
  • substr：1バイトの文字列にする

日本語は2バイトの文字列のため「mb_substr」を使用します。


フロントまたは投稿一覧ページの場合はget_bloginfo関数を使用してデータを取得しています。

get_bloginfo関数はWordPressの管理画面の「一般」で指定するようなサイト全体で設定してあるデータを取得できる便利な関数です。

get_bloginfo関数で取得できる主な値
  • name – サイトのタイトル ([設定] > [一般] で設定)
  • description – サイトのキャッチフレーズ ([設定] > [一般] で設定)
  • wpurl – WordPress アドレス (URL) ([設定] > [一般] で設定)
  • url – サイト アドレス (URL) ([設定] > [一般] で設定)

他にもたくさんあります。

（参考）WordPress公式 get_bloginfo



headタグに追加するコードを作成

静的および動的に指定したOGPのデータをもとにmetaタグを作成します。

		/* headタグに追加するコードを作成 */
		$meta_og .= '<!-- functions.phpのOGP設定 -->';
		$meta_og .= '<meta property="og:title" content="'.esc_attr($og_title).'" />' . "\n";
		$meta_og .= '<meta property="og:description" content="'.esc_attr($og_desc).'" />' . "\n";
		$meta_og .= '<meta property="og:type" content="'.$og_type.'" />' . "\n";
		$meta_og .= '<meta property="og:url" content="'.esc_url($og_url).'" />' . "\n";
		$meta_og .= '<meta property="og:image" content="'.esc_url($og_img).'" />' . "\n";
		$meta_og .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />' . "\n";
		$meta_og .= '<meta property="og:locale" content="ja_JP" />' . "\n";

		if( $x_site != "" ){
			$meta_og .= '<meta name="twitter:card" content="'.$x_card.'" />' . "\n";
			$meta_og .= '<meta name="twitter:site" content="'.$x_site.'" />' . "\n";
		}

		if ($fb_id != "") {
		$meta_og .= '<meta property="fb:app_id" content="' . $fb_id . '">' . "\n";
		}

		$meta_og .= '<!-- ここまで -->' . "\n";
		
		echo $meta_og;
	}


最後にecho $meta_og;で出力しています。

ただしここまでは作成した関数「og_metatags」であり、まだ実行していません。


headタグ内に出力する

add_action関数を使ってheadタグ内に指定した内容を挿入するwp_headフックを指定し、作成した関数を呼び出します。

add_action('wp_head','og_metatags');


以上です。


ブラウザ上での表示

指定した内容はWEBサイト上できちんと反映されます。


タイトルとURLをコピーしました