OGPタグをプラグインを使わずに出力[WordPress]

2016年02月22日2016年01月19日WordPress　プラグイン　便利コード　コーディング　

FacebookのOGPタグをプラグインを使わずに出力する方法を紹介します。

まえがき

WordPressとFacebookやTwitter等のソーシャルメディアを連携するために何かしらのプラグインを導入することがあると思いますが、そのプラグインの多くは自動的にOGPタグを書き出します。
しかしながら自動出力だとOGPの設定を柔軟に変えれなかったり、想定と違う画像がサムネイルに設定されてしまったりと色々不都合も多いです。

なので
OGPタグはプラグインの自動出力を使わず自分で設定しよう！
というのがこの記事のテーマです。

トップページ、アーカイブページ、シングルページ等あらゆるシチュエーションに対応したOGPタグの出力コードを紹介します。

因みに、WordPressとFacebookやTwitter等を連携するならほとんどの方が「Jetpack」プラグインを使ってると思いますが、その「Jetpack」のOGPタグの自動出力を無効化する方法は下記を参考にしてください。
JetpackのOGPタグの出力を無効化する

OGPタグの出力コード

とりあえずコードをご確認ください。

<meta property='og:locale' content='ja_JP'>
<meta property='fb:admins' content='○○○○'><!--アカウントのAdmins ID-->
<meta property='article:publisher' content='http://facebook.com/○○○' /><!--FacebookページのURL-->
<?php if(is_single()){ // 投稿記事 ?>
<meta property='og:type' content='article'>
<meta property='og:title' content='<?php the_title() ?>'>
<meta property='og:url' content='<?php the_permalink() ?>'>
<meta property='og:description' content='<?php echo mb_substr(get_the_excerpt(), 0, 100) ?>'>
<?php } else { //ホーム・カテゴリー・固定ページなど ?>
<meta property='og:type' content='website'>
<meta property='og:title' content='<?php bloginfo('name') ?>'>
<meta property='og:url' content='<?php bloginfo('url') ?>'>
<meta property='og:description' content='<?php bloginfo( 'description' ); ?>'>
<? } ?>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>
<?php
if (is_single() or is_page()){//投稿記事か固定ページ
if (has_post_thumbnail()){//アイキャッチがある場合
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} elseif( preg_match( '/<img.*?src=(["\'])(.+?)\1.*?>/i', $post->post_content, $imgurl ) && !is_archive()) {//アイキャッチ以外の画像がある場合
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//画像が1つも無い場合
echo '<meta property="og:image" content="○○○○">';echo "\n"; //画像が1つも無い場合に表示する画像URL
}
} else { //ホーム・カテゴリーページなど
echo '<meta property="og:image" content="○○○○">';echo "\n"; //画像が1つも無い場合に表示する画像URL
}
?>