超簡単！OGPにサムネイル画像やカスタムフィールドの画像を自動表示させる方法

［最終更新日］2014年5月18日

wordpressカスタマイズ, wordpress逆引きまとめ, カスタムフィールド

OGPにサムネイル画像やカスタムフィールドの画像を反映する

ソーシャル化には欠かせないOGP （Open Graph Protocol）をようやく反映しました。
facebookでいいねボタンを押されるとサムネイル画像とタイトル名、説明文が表示されるというものです。
そこで、OGPをプラグインなしで、記事内の画像を自動表示したいという方法を探しておりました。しかも、希望の画像を表示させたいなあというのが要望です。
以下のような内容です。

トップページは任意の画像を表示
固定ページ、投稿記事にはカスタムフィールドの画像を表示
もしカスタムフィールドの画像がない場合は、サムネイル画像を表示
それ以外は、任意の画像を表示

うまくHEADタグ内で条件分岐されている記事があったので、
それを参考に挿入してみたところ問題なく表示されるようになりました。
よかったら参考にしてください^^

<!-- OGP -->
<?php if (is_single() || is_page()) { ?>
<?php while (have_posts()) : the_post(); ?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="article" />
<?php if (get_post_meta($post->ID,'ここにカスタムフィールド名を入れます',true)): ?>
<meta property="og:image" content="<?php
$fileid = get_post_meta($post->ID, ここにカスタムフィールド名を入れます, false);
$file = wp_get_attachment_image_src($fileid[0], 'full');
echo $file[0];
 ?>" />
<?php elseif (has_post_thumbnail()): ?>
<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, $size = 'thumbnail');
?>
<meta property="og:image" content="<?php echo $image_url[0]; ?>" />
<?php else: ?>
<meta property="og:image" content="任意の画像URL" />
<?php endif; ?>
<meta property="og:url" content="<?php the_permalink(); ?>" />
<?php endwhile; ?>

<?php } elseif (is_home()) { ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:type" content="blog" />
<meta property="og:image" content="任意の画像URL" />
<meta property="og:url" content="<?php bloginfo('url'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php } else { ?>
<meta property="og:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="任意の画像URL" />
<meta property="og:url" content="<?php echo get_bloginfo('url').$_SERVER['REQUEST_URI']; ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php } ?>

<!-- /OGP -->

【参考】WordPressのプラグインを利用せずにOGPを表示するやり方

OGPの記述内容はこちらを参考にしてください

<head profile="https://gmpg.org/xfn/11">
<title>タイトル名を入力</title>
<meta property="og:title" content="タイトル名を入力">
<meta property="og:type" content="article">
<meta property="og:description" content="記事の説明文を入力">
<meta property="og:url" content="URLを入力">
<meta property="og:image" content="サムネイル画像URLを入力">
<meta property="og:site_name" content="サイト名を入力">
<meta property="og:email" content="Eメールアドレスを入力">

OGP内の指定について

og:type
ウェブページが何のページであるか（必須）
例：blog,article,website

og:title
ウェブページの名前（必須）

og:image
ウェブページのサムネイル（必須）

og:url
ウェブページの URL（必須）

og:description
ウェブページの説明

og:site_name
サイト名

実際にOGPの画像を設定したらどうなるかテストしたいときは、
こちらのサイトが便利です！

OGP画像シミュレータ
https://ogimage.tsmallfield.com/