プラグイン不要でWordPressにOGPを設定する方法

前回OGP設定の必要性について記事にしたので、今回はWordPressにOGPの設置していきます。

WordPressの場合はOGPの設置ができるプラグインもありますが色々と不具合があったりするようなのでプラグインなしで設置してみる事にしてます。

今回はFacebook用のOGP設定とTwitterCards(Twitterカード)用のタグを設置していきますが、細かい部分はその都度書いていきます。

1 WordPressへOGP設置する手順

WordPressへOGP設置する手順

先に手順を書いておきます。まずOGPを設定するコードを書いて、header.phpに追加してあげる必要あります。

とりあえずOGPを設定するコードって結構複雑ですしちょっと長くなるので、子テーマに「ogp.php」というファイルを作成しておき、そこにOGPの設置コードを書きます。

それで「header.php」でこの「ogp.php」を呼び出すような感じでやっていきますが子テーマって何？という場合はこちらの記事からどうぞ。
⇒子テーマの作り方と有効化する方法【図解】

それで、このOGP設置する時に必要になるのが「FacebookアプリのID」もしくは「Facebook個人アカウントのID」です。個人アカウントのIDを使うとFacebook個人のアカウントが特定される事があるので、「FacebookアプリのID」の方を利用します。

という訳で先にFacebookアプリIDを取得しておきましょう。この記事を先にどうぞ。
⇒FacebookアプリIDの取得方法と確認方法

FacebookアプリのIDを取得できたら準備はOK。早速作業開始。

子テーマにogp.phpファイルを作成

先ほども説明したようにOGP設置用コードを書くphpファイルを作成します。ロリポップで説明しておきます。

現在使用している子テーマ（自分の場合はchild）に「新しいファイルを追加」します。

そしてこの作成したファイルに「ogp.php」と名前をつけて「保存」。中身は後で書きます。

作成して「保存」できたらWordPressに戻って「外観」⇒「テーマの編集」と進みます。すると右側のサイドに先ほど追加した「ogp.php」があるのでそれをクリックして開きます。

この中に次のコードを入れます。

<!--OGP開始-->
<meta property="fb:app_id" content="【FacebookのアプリID】" />
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="blog">
<?php
if(is_single() or is_page()){//投稿記事か固定ページ
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋から
     endwhile; endif;
     echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//投稿記事タイトル
     echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//投稿記事パーマリンク
} else {//投稿記事以外（ホーム、カテゴリーなど）
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」で入力したブログの説明文
     echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」で入力したブログのタイトル
     echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」で入力したブログのURL
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿記事に画像があるか調べる
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";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//アイキャッチは無いが画像がある場合
     echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//画像が1つも無い場合
     echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";
}
} else {//投稿記事や固定ページ以外の場合（ホーム、カテゴリーなど）
     echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";
}
?>
<!--OGP完了-->

<?php

if(is_single() or is_page()){//投稿記事か固定ページ

if(have_posts()): while(have_posts()): the_post();

echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋から

endwhile; endif;

echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//投稿記事タイトル

echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//投稿記事パーマリンク

} else {//投稿記事以外（ホーム、カテゴリーなど）

echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」で入力したブログの説明文

echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」で入力したブログのタイトル

echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」で入力したブログのURL

}

<?php

$str = $post->post_content;

$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿記事に画像があるか調べる

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";

} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//アイキャッチは無いが画像がある場合

echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";

} else {//画像が1つも無い場合

echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";

}

} else {//投稿記事や固定ページ以外の場合（ホーム、カテゴリーなど）

echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";

}

参考：【Web制作】FacebookのOGP設定をプラグインなしで設置する方法｜ゆめぴょんの知恵

変更箇所は３箇所。

FacebookアプリIDの部分に自分のアプリID（15桁）を入れる
「デフォルト画像のURL」にデフォルトで使いたい画像のURLを入れる所が２箇所

それぞれ【】は消してね。デフォルトの画像というのはトップページとかカテゴリーページ、もしくはアイキャッチ画像が設置されていないページをシェアとかされた時の画像になりますよ。こんな感じで。

ついでにTwitterカードのタグも入れておきます（後で説明）。先ほどのコードの下に更に追加。

<!--Twtter Cards-->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="Twitterのアカウント">
<meta name="twitter:creator" content="製作者のアカウント">
<meta name="twitter:domain" content="自分のドメイン" />
<!-- /Twtter Cards -->

Twitterは個人であれば「製作者のアカウント」と「Twitterのアカウント」は同じでOK。それぞれ「＠」からね。こんな感じになりました。

ここまでできたらogp.phpは完成なので「変更を保存」を忘れずに。後はこれをheader.phpで呼び出すコードを書きますが、その前にちょっと補足。

「TwitterCards」というのはTwitterで自分のブログのURLを投稿した時に「概要を表示」という項目を追加してブログ情報をリッチに表示してくれるやつです。

この概要をクリックするとこんな感じに表示されます。

このTwitterカードを利用するためのコードを追加したという訳です。

header.phpで「ogp.php」を呼び出す

次にheader.phpを開いて「head」～「/head」の中に「ogp.php」を呼び出すのですが、その前に「head」タグの書き換えが必要なので「head」の記述を探します。

<head>

<head>

これを下記のように書き換えます。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

1	<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

こんな感じになるよ。

一応これはHTML5用のコード。多分WordPressのほとんどのテーマがHTML5だと思うのでこれでOK。ちなみにWordpressのデフォルトテーマはTwentyEleven以降HTML5で書かれています。

書き換えができたら「ogp.php」を呼び出しますよ。「/head」タグの直前くらいに次の召喚コードを入れたらOK。

<?php get_template_part('ogp');?>

1	<?php get_template_part('ogp');?>

こんな感じの仕上がり。

ここまでできたら「変更を保存」してエラーがでないかをチェックしていきます。

OGP設定の確認

最後にFacebookのDebuggerでエラーがでないかをチェックします。
⇒Debugger

調べたいURLを入力して「Debug」をクリック。

それでもしかするとキャッシュ（以前のデータ）が残っているかもしれないので、「Fetch new scrape information」もクリック。これ数回（２、３回程度）押してみた方がいいかも。更新されない時があるので。

これでエラーや警告（Warnings That Should Be Fixed）が出ていなかったらOKです。

Twitterカードを有効にしておく

TwitterCardを利用する場合に必要なタグは先ほどのOGPタグの追加で既に追加されているので、後はTwitterでの認証しておきましょう。こちらに移動。
⇒Card validator

ページに移動して今設定したブログのURLを入力し、「Preview　Card」をクリック。

以前は「Request Approval」という申請ボタンがあったような気がしたけど今は見当たりません。とりあえず「自分のURL is whitelisted for summary card」と表示が出てくればOKです。

これでTwitterに自分のブログのURLをTwitterで投稿すると「概要を表示」が表示されるはず（ちょっと時間かかる場合もあるかも）。

以上でWordPressでのOGP設置は完了です。後はWordPressとSNS（FacebookとかTwitter）を連動させるプラグインとか使うとブログ更新時にSNSでも反映されますし、プラグイン使わなくてもSNSでURLを投稿すればOGPで設定した画像、タイトル、説明文等が表示されるようになります。