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

ホーム
Webのコト
WordPressのプラグインを利用せずにOGPを表示するやり方

投稿日：2013年11月26日

更新日：2017年6月6日

OGPのコードを用意する

wordpressでOGPを表示させるには、プラグインを使うのが簡単ですが、細かい設定をする場合は、自分で条件分岐をしながら作成しないと出来ないこともあります。
OGPの仕様はわりと変更が多いので、自分で理解して持っておくと、変更に対して早い対応が可能かなとも思います。

といっても、自分でも理解できてない部分も多く、ネットで拾ってきた情報をカスタマイズして作成したOGPセットです。
よろしければ、ご利用ください。

twitter:cardの情報も入っているセットになります。

コードサンプル

使い方は、サンプルコードの下の記事に書いてあります。


<!-- OGP -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@■■■TwitterID■■■" />
<meta name="twitter:title" content="<?php bloginfo( 'name' ); ?>" />
<meta name="twitter:url" content="<?php the_permalink() ?>" />
<?php if (is_single() || is_page()) { ?>
<?php while (have_posts()) : the_post(); ?>
<meta property="og:title" content="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" />
<meta property="og:type" content="article" />
<meta name="twitter:description" content="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" />
<?php if (get_post_meta($post->ID,'OGPFileUpload',true)): ?>
<meta property="og:image" content="<?php
$fileid = get_post_meta($post->ID, OGPFileUpload, 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="■■■http:///wp-content/themes/news/img/ogp.png■■■" />
<?php endif; ?>
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:description" content="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>
" />
<?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="■■■http:///wp-content/themes/news/img/ogp.png■■■" />
<meta property="og:url" content="<?php bloginfo('url'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta name="twitter: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="■■■http:///wp-content/themes/news/img/ogp.png■■■" />
<meta property="og:url" content="<?php echo get_bloginfo('url').$_SERVER['REQUEST_URI']; ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta name="twitter:description" content="<?php bloginfo('description'); ?>" />
<?php } ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="fb:admins" content="■■■facebookのOpen Graph Tagsコード■■■" />
<!-- /OGP -->

<?php if (is_single() || is_page()) { ?>

<?php while (have_posts()) : the_post(); ?>

<?php if (get_post_meta($post->ID,'OGPFileUpload',true)): ?>

$fileid = get_post_meta($post->ID, OGPFileUpload, 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');

<?php else: ?>

<?php endif; ?>

" />

<?php endwhile; ?>

<?php } elseif (is_home()) { ?>

<?php } else { ?>

<?php } ?>

使い方

上記のコードをコピーするだけでは利用できません。
次の準備をしてください。

OGPの利用について

カスタムフィールドを利用して、記事個別でOGP画像をアップロードできるように、設定をしておきます。
OGPをアップロードしなければ、それがない時という条件が適応されますが、シェアが生まれやすい記事の場合は、入れたくなりますので、作っておくと良いかと思います。

WordPressのカスタムフィールドテンプレートのテンプレー卜タグの使い方

設定が必要な部分

■で囲っている部分を適宜変更してください。
３種類、合計5箇所あります。

twitterアカウント
ogp画像までのパス
FacebookのOpen Graph Tagsコード

FacebookのOpen Graph Tagsコード
取得リンク → [Like Button – Facebook開発者]

分岐の説明

上記のコードの、気になる部分に簡単な解説を入れてみます。

サイトの情報を表示させる関数で。nameは、管理画面のサイトタイトル

<?php bloginfo( 'name' ); ?>

1	<?php bloginfo( 'name' ); ?>

ブログのURL

<?php the_permalink() ?>

1	<?php the_permalink() ?>

記事ページか、個別ページの場合

<?php if (is_single() || is_page()) { ?>

1	<?php if (is_single() \|\| is_page()) { ?>

記事のタイトル｜サイトの名前

<?php the_title(); ?>｜<?php bloginfo('name'); ?>

1	<?php the_title(); ?>｜<?php bloginfo('name'); ?>

もし、「OGPFileUpload」カスタムフィールドに値が入っている場合に、画像パスを表示させる

<?php if (get_post_meta($post->ID,'OGPFileUpload',true)): ?>
<meta property="og:image" content="<?php
$fileid = get_post_meta($post->ID, OGPFileUpload, false);
$file = wp_get_attachment_image_src($fileid[0], 'full');
echo $file[0];
 ?>" />

<?php if (get_post_meta($post->ID,'OGPFileUpload',true)): ?>

$fileid = get_post_meta($post->ID, OGPFileUpload, 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 elseif (has_post_thumbnail()): ?>

<?php

$image_id = get_post_thumbnail_id();

$image_url = wp_get_attachment_image_src($image_id, $size = 'thumbnail');

それ以外は、全部この画像を表示する

<?php else: ?>
<meta property="og:image" content="■■■http:///wp-content/themes/news/img/ogp.png■■■" />

1 2	<?php else: ?> <meta property="og:image" content="■■■http:///wp-content/themes/news/img/ogp.png■■■" />

条件分岐おわり

<?php endif; ?>

1	<?php endif; ?>

ページの条件おわり

<?php endwhile; ?>

1	<?php endwhile; ?>

もしindexページのとき

<?php } elseif (is_home()) { ?>

1	<?php } elseif (is_home()) { ?>

サイトの情報を表示させる関数で。nameは、管理画面で設定された「キャッチフレーズ」

<?php bloginfo('description'); ?>"

1	<?php bloginfo('description'); ?>"

第3パラメータ seplocation を使って、タイトルの右側にセパレータ（–）を表示させます。

<?php wp_title('|', true, 'right'); ?>

1	<?php wp_title('\|', true, 'right'); ?>

現在のページのURLを取得

<?php echo get_bloginfo('url').$_SERVER['REQUEST_URI']; ?>

1	<?php echo get_bloginfo('url').$_SERVER['REQUEST_URI']; ?>

以上が解説です。
個別の記事ページのOGPimageの設定が、やや特徴的です。
自分のブログに合うように、カスタマイズしていくと良いかと思います。

WordPressのカスタムフィールドテンプレートのタグの使い方

WordPressでアイキャッチを記事一覧に表示する