【WordPress】プラグインなしでFacebook、TwitterのOGPを設定する方法

今やSNSでの拡散等を考慮すると、必須設定事項のOGP（Open Graph Protocol）ですが、WordPressでプラグインを利用せずに設定する方法をメモメモ。

▼下記のように表示（参考：Facebook・TwitterのOGP設定方法まとめ｜ferret [フェレット]）

<meta property="og:title" content="ページタイトル｜サイト名">
<meta property="og:type" content="オブジェクトタイプ（TOPページ「website」／その他「article」）">
<meta property="og:site_name" content="サイト名">
<meta property="og:url" content="ページURL">
<meta property="og:description" content="ページの説明（記事ページの場合は本文抜粋）">
<meta property="og:image" content="画像（優先順位 [1]アイキャッチ　[2]記事中の画像　[3]あらかじめ設定した画像）">
<meta property="og:locale" content="言語設定">
<meta name="twitter:card" content="Twitterカードの種類（summary／summary_large_image／photo・・・）">
<meta name="twitter:site" content="@Twitter ID">
<meta name="twitter:title" content="ページタイトル｜サイト名">
<meta name="twitter:description" content="ページの説明（記事ページの場合は本文抜粋）">
<meta name="twitter:image:src" content="画像（優先順位 [1]アイキャッチ　[2]記事中の画像　[3]あらかじめ設定した画像）">

▼WordPressでのOGP設定

<?php 
//TOPページ判定
$toppage = (is_home())? TRUE: '';

//各種設定
$image_og = '***/***/ogp.jpg';//画像設定[横1200px × 縦630px]（絶対パスで設定）
$locale = 'ja_JP';//言語設定
$twitter_card = 'summary_large_image';//Twitterカード設定
$twitter_id = '@twitter_id';//Twitter ID設定
$image_tw = '***/***/ogp_twitter.jpg';//Twitter画像設定[横560px × 縦300px 程度]（絶対パスで設定）

//各種取得
$site_name = get_bloginfo('name');//サイト名を取得
$description = get_bloginfo('description');//サイト説明を取得
$category = get_the_category();//カテゴリを取得
$cat_name = $category[0]->cat_name;//カテゴリ名を取得
$blog_title = get_the_title();//タイトルを取得

//title
if($toppage) {
	$title = $site_name;
} elseif(is_category() ) {
	$title = $cat_name.'｜'.$site_name;
} elseif(is_404() ) {
	$title = '404 Page Not Found｜'.$site_name;
} elseif(is_search()) {
	$title = '「'.get_search_query().'」の検索結果｜'.$site_name;
} elseif(isset($blog_title) && !is_front_page()) {
	$title = $blog_title.'｜'.$site_name;
} 

//type
if($toppage){ $type = 'website';} else { $type = 'article';}

//url
$url = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];

//記事ページ用
//description
if (is_single()){//単一記事ページの場合
	if(have_posts()): while(have_posts()): the_post();
		$description = mb_substr(get_the_excerpt(), 0, 100);//抜粋を表示
	endwhile; endif;
} 

//image
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
//投稿に絵文字等をしている場合等、gif画像を除外する場合
//$searchPattern = '/<img.+src=[\'"]([\-_\.\!\~\*\'\(\)a-z0-9\;\/\?\:@&=\+\$\,\%\#ぁ-んァ-ヶー一-龠]+(jpg|jpeg|png))/iu';
if (is_single()){//単一記事ページの場合
	if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
		$image_id = get_post_thumbnail_id();
		$image = wp_get_attachment_image_src( $image_id, 'full');
		$image_og = $image[0];
		$image_tw = $image[0];
	} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//記事に画像がある場合の処理
		$image_og = $imgurl[2];
		$image_tw = $imgurl[2];
	} 
}

?>
<meta property="og:title" content="<?php echo $title;?>">
<meta property="og:type" content="<?php echo $type;?>">
<meta property="og:site_name" content="<?php echo $site_name;?>">
<meta property="og:url" content="<?php echo $url;?>">
<meta property="og:description" content="<?php echo $description;?>">
<meta property="og:image" content="<?php echo $image_og;?>">
<meta property="og:locale" content="<?php echo $locale;?>">
<meta name="twitter:card" content="<?php echo $twitter_card;?>">
<meta name="twitter:site" content="<?php echo $twitter_id;?>">
<meta name="twitter:title" content="<?php echo $title;?>">
<meta name="twitter:description" content="<?php echo $description;?>">
<meta name="twitter:image:src" content="<?php echo $image_tw;?>">

設定ができ公開が完了したら、どのように表示されるか確認してみましょう。

■Facebook デバッガー

https://developers.facebook.com/tools/debug/
※Facebookへのログインが必要です。