WordPress・OGP設定・サイトと記事で条件分岐するOGPテンプレートの作成

条件分岐OGPテンプレート

OGP設定テンプレートphpファイルを作成~アップロードの手順

では、いよいよOGP設定テンプレートを作成~アップロードしてOGP設定を完了させましょう。

先の記事「FacebookのヘッダーPHPへのOGP設定の為の下準備」までで、head prefexタグの変更と、テンプレートを呼び込むための設定をしましたので、今回は呼び込まれる方のテンプレートを作成してサーバーの子テーマへアップします。

テンプレート仕様でなく、直書きするのであれば、タグをheader.phpにコピペして完成です。

手順は以下の通りです。

では、順にやっていきましょう。

ogp.phpテンプレート用タグを確認

下記のテンプレート用タグをコピーして下さい。

  • トップページ(トップページがブログページの場合も含む)サイト全体へのOGPタグになります。
  • 投稿ページ、固定ページにページごとのOGPが記載されるように条件分岐しています。
  • カテゴリーなどのアーカイブページにはOGP生成されません。
  • もし、投稿ページと同じように、固定ページにOGPタグを生成したくないのであれば、7行目を下のように変更して下さい。
    <?php elseif (is_single()): ?>
  • 投稿記事・固定ページのディスクリプションは抜粋:excerptを読み込んでいます。
    strip_tags でexcerptからphpタグとhtmlタグ取り除いています。
    str_replace で文字数オーバーの場合の[…]を除いています。
  • Twitterカードタグも追加しました。Twitterカードがご不要の方は最後の方にある<!– Twitter Card –>~<!– /Twitter Card –>を削除して下さい。

修正するべき場所に◆を、注意点にはコメントをつけてありますので、◆~◆の部分をご自分のものに修正して下さい。

<?php if (is_home() || is_front_page()): ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo esc_url( home_url( '/' ) ); ?>" />
<meta property="og:image" content="<?php header_image(); ?>" height="" width="" alt="">//ヘッダーイメージを指定しています。違うものを指定したい場合は、""内を変更して下さい。
<meta property="og:description" content="<?php bloginfo('description'); ?>" />

<?php elseif (is_single()) || (is_page()): ?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<?php $str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (has_post_thumbnail() &amp;&amp; ! is_archive() &amp;&amp; ! is_front_page() &amp;&amp; ! is_home())
{//投稿にサムネイルがある場合の処理
 $image_id = get_post_thumbnail_id();
 $image = wp_get_attachment_image_src( $image_id, 'full');
 $ogimage=$image[0];
}
else if ( preg_match( $searchPattern, $str, $imgurl ) &amp;&amp;is_single())
{//投稿にサムネイルは無いが画像がある場合の処理
 $ogimage=$imgurl[2];
}
else
{//投稿にサムネイルも画像も無い場合、もしくはアーカイブページの処理
 $ogimage="◆投稿に画像がない場合に表示させる画像のURL◆";
}
?>
<meta property="og:image" content="<?php echo $ogimage; ?>">
<?php
$excerpt =strip_tags(get_the_excerpt());
$excerpt = str_replace(array("..."), '', $excerpt);
?>
<meta property="og:description" content="<?php echo $excerpt; ?>">
<?php endif; ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="◆ご自分のapp-idを入力◆"/>
<meta property="fb:admins" content="◆ご自分のfb-adminsを入力◆"/>
<!-- Twitter Card -->
<meta name="twitter:card" content="◆summary_imageなど、イメージの種類◆">
<meta name="twitter:site" content="◆@アカウントを入力◆">
<!-- /Twitter Card -->

※上記タグに関するSpecial Thanks

ogp.phpを作成する

テキストエディタの新規ファイルにペースト、ogp.phpという名前で保存して下さい。

文字コードをUTF-8(BOMなし)で保存出来ているかを確認

この時、くれぐれもUTF-8(BOMなし)で保存する事を忘れないようにしてください。

TeraPadなら、UTF-8Nで、Miならば、UTF-8になっていれば大丈夫です。

文字コード・UTF-8での保存方法についてはheader.phpの編集のページを参考にして下さい。

TeraPadでコピペした後、UTF-8Nに変更すると、文字化けしちゃう!という場合には、

  1. 最初に空のファイルを作成
  2. 文字コードをUTF-8Nに変更
  3. 上書き保存
  4. コピペ
  5. 上書き保存

という手順で行うと、文字化けを防ぐ事ができます。

最初に環境設定しておくとこの手間を省くことが出来ます。設定方法についてはこちらをご覧下さい。
→「WordPressのカスタマイズに必要なテキスト編集ソフト&FTPソフト

app-idまたはfb-adminsを入力・再度保存

app-idをご自分のものに変更して再保存します。

fb-adminsは必要な方のみ、不必要な場合は行ごと削除して下さい。

fb-adminsが必要か必要でないかは以下の記事から判断して下さい。
app-idの取得方法・2016年版も載っています(^^)
OGP設定の為のfacebookアプリケーションid(app-id)取得・fb-admins確認方法

変更箇所は下の画像マークされている部分です。
ogp.php変更箇所

FTPソフトでテーマ内にアップロード

作成したogp.phpをFTPソフトで子テーマ内にアップします。

アップするのは、子テーマディレクトリ内です。
ルートドメイン → public_html → wp → wp-content → themes → 子テーマ
とたどって、子テーマ内にアップします。
ogp.phpアップロード

確認してみましょう。

FTPソフトは閉じて、ダッシュボードに戻ります。
左サイドメニューの外観→テーマ編集をクリックします。
ogp.phpがテーマの編集画面で確認できればOKです。
テーマ編集画面

ogp.phpをテーマの編集画面で編集・デフォルト画像URLを追加

では、次に、ogp.phpをテーマの編集画面で編集しましょう。
「投稿にサムネイルも画像も無い場合、もしくはアーカイブページの処理」、の場合の”投稿に画像がない場合に表示させる画像のURL”を変更します。
変更箇所は以下の反転表示されている部分です。
ogp.php画像URLの変更

投稿に画像が全く無い、ということはあまり無いと思いますが、サイズがある程度大きくないと、Facebookクローラ(:OGP設定タグから、Facebookのタイムライン上に表示させる内容を読み込むFacebookのシステム)がその画像を取得してくれない場合があります。

そういった場合にシェアされた記事に画像が表示されない事態を防ぐため、ブログイメージとしてのデフォルト画像を用意しておきます。

この画像サイズに関してのfacebookのページからのキャプチャがこちら

Open Graph - Object Properties 画像についての記述キャプチャ
From:Open Graph – Object Properties

つまり、画像サイズは

「少なくとも600×315ピクセルにする必要がありますが、1200×630以上は(5メガバイトまで)が好ましい」

ということ。

このサイズを念頭に、サイト全体のイメージ画像を用意して下さい。

サイトのイメージを伝える、といってもなかなかすぐには思いつかないかもしれませんが、ロゴマークなどがあれば、そのロゴを、ブログタイトルをバナー風にアレンジ、などでも良いと思います。

バナー作成、などの検索キーワードで検索すると、無料のバナー作成サイトやバナー作成フリーソフトなどがありますので、利用してみると良いでしょう。

見え方を確認したいという方には、以下のページがとても便利です。

OGP画像シミュレータ | og:image Simulator
OGP画像シミュレータ | og:image Simulator

画像の準備が出来たら、左サイドメニューのメディアをポイント、サブメニューから新規追加をクリックします。
メディアに新規追加

投稿に画像を追加した時と同じように、ファイルを選択をクリックして、PC内から画像を選択するか、画像を直接ドラッグ&ドロップしてアップロードします。
メディアに新規追加

アップロードが完了したら、この画像の絶対URLを確認します。

メディアライブラリで、アップロードした画像のサムネイルをクリックします。
画像の詳細を開く

添付ファイルの詳細画面が開きます。
画像の編集画面右に、その画像のURLが表示されています。
画像URLを控える

このファイルのURLをコピーします。

テーマの編集画面に切り替えて、ogp.phpファイルを表示させます。

先程の”◆投稿に画像がない場合に表示させる画像のURL◆”の ◆から◆までを削除し ”” の間にコピーしたURLに変更します。
ogp.php画像URLの変更

ファイルの更新ボタンをクリックして更新してください。
ogp.php画像URLの変更を更新

他の修正箇所も変更ます。

Twitterカードについて

TwitterカードについてのOGP上の記載は2行しかありませんが、他のogpタグがTwitterでも使用されますので、Twitterでのみ利用するこの2行が入っていればOKです。

Twitterカードの詳細については以下のページが公式ページです。
→ Twitterカード

Twitterカードには7種類のカードがありますが、ブログ記事の場合に使われると思われるカードの種類とcontentは以下のようになります。

  • Summaryカード:”summary_image”
  • 大きな画像付きのSummaryカード:”summary_large_image”
  • Photoカード:”photo”
  • Galleryカード:”gallery”
  • Productカード:”product”

上のページでカードの種類を確認し、自分が使いたいタイプのカードを◆summary_imageなど、イメージの種類◆の部分を消去して入力して下さい。

例)大きな画像付きのSummaryカードを使いたい場合

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">

次に◆@アカウントを入力◆の部分に@マークつきでTwitterのアカウントを入力して下さい。

<meta name="twitter:site" content="◆@アカウントを入力◆">
<!-- /Twitter Card -->

次にTwitterの検証ツールページで、ページの検証を行います。
Twitter Card Validator

承認後のツイートで選択したTwitterカードが表示されるようになります。

さて、長い長い説明になってしまいましたが、これでOGPはばっちりです!

お役に立てたら、幸いです(^^)
シェアなどしていただけるとよりハッピーです!!(^^)

Special Thanks

og:imageについての条件分岐は、以下のURLを参考にさせていただきました!

貼るだけ簡単!アクセスが倍増するWordPress用OGPコードhttp://oxynotes.com/?p=3050 

※og:descriptionの<p>タグの削除についてのタグについては、以下のURLを参考にさせていただきました!

http://soheicube.com/snippet/204/add-facebook-like-button-to-wordpress-blog
WordPressブログにFacebook like buttonを実装する | snippet

ありがとうございました<(_ _)>

Published:2014/02/06

Written by