記事ごとにOGPを簡単設定 for WordPress

WordPress

プラグインを使わずに設定

OGPメタタグを追加する専用のプラグインを利用せずに、HTMLのhead領域にメタタグを出力するコードをfunctions.phpに追加する方法でOGPに対応します。

やり方

functions.phpの場所

WordPressで設定中のテーマ内にfunctions.phpが配置されています。公式テーマtwentythirteenの場合は、

wp-content/themes/twentythirteen/functions.php

に配置されています。

コピペするコード

functions.phpの最後に下のPHPコードをコピーして追加します。

function add_ogp()
{
	// 変数の設定
	$site_name = get_bloginfo('name');
	$permalink = esc_url((empty($_SERVER["HTTPS"]) ? "http://" : "https://").$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]);
	$title = wp_title('|', false, 'right');;
	$image = "http://ogp.local/images/default.png";
	$locale = "ja_JP";
	$twitter = "@twitteraccount";
	
	if( is_home() )
	{
		$description = "トップページです";
	}
	
	elseif( is_single() )
	{
        $id = get_the_ID();
        $post = get_post($id);
        $pure_content = $post->post_content;
        $content = str_replace('"', '', $pure_content);
        $content = str_replace("'", "", $content);
        $content = str_replace(array("\r\n", "\r", "\n"), '', $content);
        $content = strip_tags($content);
        $description = mb_strimwidth($content, 0, 240, "", "utf-8");
		
        preg_match_all('/<img.*src\s*=\s*[\"|\'](.*?)[\"|\'].*>/i', $pure_content, $img);
		
	    if( $img[1][0] )
	    {
			$image = $img[1][0];
	    }
	}

    // メタタグの設定
	if( is_home() )
	{
$output = <<< EOF
<meta property="og:type" content="blog" />
<meta property="og:title" content="{$site_name}" />
<meta property="og:description" content="{$description}" />
<meta property="og:url" content="{$permalink}" />
<meta property="og:image" content="{$image}" />
<meta property="og:site_name" content="{$site_name}" />
<meta property="og:locale" content="{$locale}" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="{$twitter}" />
EOF;
	}
	
	elseif( is_single() )
	{
$output = <<< EOF
<meta property="og:type" content="article" />
<meta property="og:title" content="{$title}" />
<meta property="og:description" content="{$description}" />
<meta property="og:url" content="{$permalink}" />
<meta property="og:image" content="{$image}" />
<meta property="og:site_name" content="{$site_name}" />
<meta property="og:locale" content="{$locale}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="{$twitter}" />
<meta name="twitter:image:src" content="{$image}">
EOF;
	}
	
	else
	{
$output = <<< EOF
<meta property="og:type" content="blog" />
<meta property="og:title" content="{$title}" />
<meta property="og:description" content="" />
<meta property="og:url" content="{$permalink}" />
<meta property="og:image" content="{$image}" />
<meta property="og:site_name" content="{$site_name}" />
<meta property="og:locale" content="{$locale}" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="{$twitter}" />
EOF;
	}

	echo $output;
}

add_action('wp_head', 'add_ogp');

上のコードをコピーすれば、基本的にOGPメタタグが追加されるようになります。

簡単な説明

wp_headアクションフックでheadに出力

wp_headアクションを利用しているので、テーマ側のheader.phpでwp_headが出力できるようになっていないといけません。

コードの冒頭で変数を設定

コードの冒頭で各記事の情報(記事タイトルやURL、画像、Twitter)を設定しています。個別の記事ページの場合は、descriptionとして記事の抜粋を設定するようにしています。

利用中のブログ名やURLは動的に取得されますが、画像のURLとtwitterアカウント名については手動で設定する必要があります。

メタタグの設定

設定した変数をページの種類に応じたHTMLのフォーマットに追加し、アウトプットしています。