制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングWordPress便利コードOGPタグをプラグインを使わずに出力[WordPress]

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

OGPタグをプラグインを使わずに出力[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
}
?>

上記のコードをコピペすれば基本的なOGP設定はやってくれます。
2,3行目は自分のfacebookアカウントのIDとfacebookページのURLを入力してください。
facebookアカウントのIDは、下記にアクセスすれば確認できると思います。

Graph APIエクスプローラ

25,28行目の「○○○○」はデフォルトで使用するOGP画像のURLを入力してください。

特に気になるOGP画像周りですが、上記コードの挙動をまとめると

記事詳細ページまたは固定ページの場合
アイキャッチ画像が登録されていればアイキャッチ画像がOGPとして設定されます。
アイキャッチ画像が無い場合は記事の本文中にある画像がOGPとして設定されます。
本文中に画像が一つもない場合は、あらかじめ設定しておいた画像がOGPとして設定されます。

記事詳細ページ及び固定ページ以外の場合(トップページ等)
あらかじめ設定しておいたデフォルトの画像がOGPとして設定されます。

ちゃんとOGP設定できてるか確認しよう

ページができたらちゃんとOGPが設定できているか確認しましょう。
下記URLにアクセスして確認したいページのURLを入力すると
OGPの各項目がちゃんと設定できているか確認できます。

デバッカー

特にサムネイル画像は確認したほうがよいです!

まとめ

Jetpackが吐き出すOGPタグが何かもっとちゃんとしてればいいなと思いました。(大分ふわっとしてるけど)
自分でコードに書いとけば、ちょっと変えたい時とかも色々応用が効きますね。
私自身OGPタグの書き方すぐに忘れてしまうので、直ぐコピペできるよう記事に残しておきます。

参考サイト

コンチクワブログさま

ありがとうございます。

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント

  • De.

    タイトルがOPGになってますね。。。

    • kotoriblog

      De.さん
      コメントありがとうございます。
      マジですねww
      助かりました。ありがとうございます。

  • http://shutosg.dip.jp shutosg

    ずっと動かなくて悩んでいたのですが、、14行目の文法エラーで動かなかったっぽいです…

    • kotoriblog

      shutosgさん
      コメントありがとうございます。

      古い記事は<?php ではなく <? と省略形で書いてしまっていたのでサーバーによってはエラーが起きますね。
      知らせていただきありがとうございました。