プラグインをつかわずにWordPressにOGPタグを埋め込む方法

［最終更新日］2024年2月15日

代表取締役

児島大

1 OGPとは
2 すでにOGPタグが設定されているかどうかをチェックする方法
3 プラグインなしでOGPを設定する方法

OGPとは

OGPとは「Open Graph Protocol」の略で、FacebookやTwitterなどのSNSでURLをシェアした際に表示される情報をコントロールできる機能のことをいいます。
ページごとにOGPタグというHTMLのmetaタグを記述することで、設定しておいたタイトルや説明文、画像などを正しくSNS側に伝えることができます。

OGP設定をしていないと、ページからSNSが自動的に説明文や画像を抽出するため、本文とは関係のない文章や画像が表示されてしまうことも多々あります。
せっかくシェアされたURLなのに、タイムライン上で正しい情報が表示されていなければ、クリックしてくれるひとも少なくなってしまいます。

すでにOGPタグが設定されているかどうかをチェックする方法

WordPressでは、ご利用中のテーマやプラグインによってすでにOGPが設定されている可能性もあります。
不具合の原因にもなるので二重で設定してしまうことがないよう、すでにOGPが設定されていないかチェックします。

記事ページを開く

ページのソースを表示する

キーボードの［Command］＋［U］を同時に押すと、ページのソースが表示されます。

文字検索で「og:」を検索

キーボードの［Command］＋［F］を同時に押して、［og:］をページ内検索します
検索できれば該当箇所がハイライト表示されます

検索結果になにも表示されなければ、OGPは設定させていませんが、下記のような検索結果が表示させた場合にはすでにOGPが設定されています。

プラグインなしでOGPを設定する方法

functions.phpの一番下に下記コードを追加で記述して上書き保存します。

functions.phpの上書き前に必ずバックアップをとるようにしましょう。

/*********************
プラグインなしでOGPタグ/Twitterカード設定を出力
参考URL：https://296.co.jp/article/19031520191205
*********************/
function my_meta_ogp() {
	if( is_front_page() || is_home() || is_singular() ) {
		/********************
		初期設定はここから
		********************/
		$ogp_image = '画像URL'; //アイキャッチ画像が登録されていない場合に使用する画像URL
		$twitter_site = '@ユーザー名';// Twitterのユーザー名
		$twitter_card = 'summary_large_image';// Twitterカードの種類（summary_large_image または summary）
		$facebook_app_id = 'FacebookのApp ID';// Facebook App ID
		/********************
		初期設定はここまで
		********************/
		global $post;
		$ogp_ttl = '';
		$ogp_desc = '';
		$ogp_url = '';
		$ogp_img = '';
		$insert = '';	
		if( is_singular() ) {
			setup_postdata($post);
			$ogp_ttl = $post->post_title;
			$ogp_desc = mb_substr(get_the_excerpt(), 0, 100);
			$ogp_url = get_permalink();
			wp_reset_postdata();
		} elseif ( is_front_page() || is_home() ) {
			$ogp_ttl = get_bloginfo('name');
			$ogp_desc = get_bloginfo('description');
			$ogp_url = home_url();
		}
		$ogp_type = ( is_front_page() || is_home() ) ? 'website' : 'article';
		if ( is_singular() && has_post_thumbnail() ) {
			$ps_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
			$ogp_img = $ps_thumb[0];
		} else {
			$ogp_img = 'TOPページ＆アイキャッチ画像がないときに使われる画像のURL';
		}	
		$insert .= '<meta property="og:title" content="'.esc_attr($ogp_ttl).'" />' . "\n";
		$insert .= '<meta property="og:description" content="'.esc_attr($ogp_desc).'" />' . "\n";
		$insert .= '<meta property="og:type" content="'.$ogp_type.'" />' . "\n";
		$insert .= '<meta property="og:url" content="'.esc_url($ogp_url).'" />' . "\n";
		$insert .= '<meta property="og:image" content="'.esc_url($ogp_img).'" />' . "\n";
		$insert .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />' . "\n";
		$insert .= '<meta name="twitter:card" content="'.$twitter_card.'" />' . "\n";
		$insert .= '<meta name="twitter:site" content="'.$twitter_site.'" />' . "\n";
		$insert .= '<meta property="og:locale" content="ja_JP" />' . "\n";
		if ($facebook_app_id != "") {
		$insert .= '<meta property="fb:app_id" content="' . $facebook_app_id . '">' . "\n";
		}	echo $insert;
	}
}
add_action('wp_head','my_meta_ogp');

上記を貼りつけたら、9行目〜13行目にある「初期設定はここから」…「初期設定はここまで」の項目を編集します。

$ogp_image = '画像URL'; //アイキャッチ画像が登録されていない場合に使用する画像URL
$twitter_site = '@ユーザー名';// Twitterのユーザー名
$twitter_card = 'summary_large_image';// Twitterカードの種類（summary_large_image または summary）
$facebook_app_id = 'FacebookのApp ID';// Facebook App ID

画像URL

アイキャッチが登録されていない場合にシェア画像に使用する画像URLを記述します。絶対URLでの指定が必要です。

@ユーザー名

Twitterのユーザー名を記述します。

summary_large_image

Twitterカードの種類を記述します。デフォルトのままでも結構ですが、一般的なサイトの場合、［summary_large_image］と［summary］から選択できます。

Facebook App ID

FacebookのApp IDを記述します。