【WordPress】Facebook OGPプラグインの使用を止めて自前で設定したら意図通りの画像で正しくシェアされるようになった

Facebook

僕はこれまで、FacebookのOGPの設定は、「Open Graph Pro」プラグインで行っていました。

けれど、Open Graph Proを使っていると、不具合が結構あったので、今回Wordpressテーマに直接FacebookのOGPを設定することにしました。

今回はその方法の紹介です。

photo by Master OSM 2011

スポンサーリンク
レクタングル(大)広告

OGPとは?

プログラムにページ情報を正しく伝えるためのプロトコルです。

例えば、Facebookのクローラーがブログの記事を読み込んだとしても、相手はコンピューターなので、ページにどのような内容が書かれているか、まではハッキリと判断することができません。

そこで、ページごとにOGPを運営者側が設定してやることで、こちらが意図した内容を正確にコンピューターに伝えることができます。

Facebookとかでしたら、その情報が反映されてこのような感じになります。

Facebook OGP

手軽にイケてるグラフを作れるWEBサービスいろいろ

ソースコードだと、このような感じで設定されます。

<meta property="og:type" content="blog">
<meta property="og:description" content="WEB上から簡単にグラフや図表が作れてしまうサービスをまとめてみました。">
<meta property="og:title" content="手軽にイケてるグラフを作れるWEBサービスいろいろ">
<meta property="og:url" content="https://nelog.jp/graph-web-services">
<meta property="og:image" content="https://nelog.jp/wp-content/uploads/2014/06/WEB.jpg">
<meta property="og:site_name" content="寝ログ">
<meta property="fb:admins" content="100001189801332">
<meta property="fb:app_id" content="626022407455274">

で、そんな役割を果たしているOGPなんですが、僕が使っていたWordpressのプラグイン「Open Graph Pro」では、いろいろと不具合がありました。

Open Graph Proの不具合

僕が利用して起った不具合としては、以下のようなものがあります。

  1. og:image(ページアイコン)が意図してない画像でたまにシェアされる
  2. Facebookにうまく情報が伝わっていない事が極たまにある

1.og:image(ページアイコン)が意図してない画像になる

自分のFacebookページにシェアする時に、たまに意図しない画像でシェアされることがありました。

例えばこのページ。

ブログなどで、データを視覚化してわかりやすく説明するためにグラフを作りたいなんてこと結構あると思います。 そんな時に、使うと便利。どこ...

記事のアイキャッチが以下の画像ですから

WEB

本来ならこの画像がog:imageに反映されて、Facebookページには次のように出て欲しいところです。

Facebookページ理想

しかし実際は、このような意図しない記事中の画像が勝手に選択されてしまいました。

Facebookページ実際

FacebookのDebuggerで原因を探ると、次のようなエラーが出ていました。

Facebookデバッガエラー

内容はこんな感じです。

og:image could not be downloaded or is too small

Provided og:image could not be downloaded or is not big enough. Please use an image that’s at least 200x200px and is accessible from Facebook. Image ‘[IMAGE_URL]’ will be used instead.

なんか、「og:imageの画像が小さすぎるぞ!」と怒られています。200x200px未満の画像が設定されているようです。Facebookでは、200x200px未満の画像はページアイコンとして使用できないようで「代わりに[IMAGE_URL]の画像を使っといたから。」と出ています。

で、「なんでこんなメッセージが出るのか?」とページのソースコードを確認してみると、なんでかわからないんですけど150x150pxのサムネイル画像が勝手に選択されていました。

<meta property="og:image" content="https://nelog.jp/wp-content/uploads/2014/06/WEB-150x150.jpg">

200x200px未満のサムネイル画像が勝手に選択されていたことで、Facebookのクローラーが記事中の中から適当な画像を一つ選択したようです。

Open Graph Proプラグインでは、なんでかわからないんですけど結構な確率でこのようなことが起こります。

2.Facebookにうまく情報が伝わっていない事が極たまにある

これは本当にごく稀なんですが、情報がうまく反映されないことがあります。

一旦間違った情報が送られてしまうと、Facebookページに投稿すらできないなんてこともありました。(ただしこれは、Facebook自体の不具合かも)

プラグイン無しでのOGPの設定

上記のような、不具合があったため、もっといい方法がないか調べてみたら、自前でWordpressテーマにOPGを埋め込む方法を見つけました。

参考  [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

プラグインに頼らない利点については、以下で詳しく書かれています。

プラグイン不要!Facebookページには欠かせないOGPの設定方法を紹介。All in One SEO Packで更に便利!!'

で、そのテーマに埋め込むソースコードが以下。

<!-- ここからOGP -->
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';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";//単一記事URLを表示
} 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を表示
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
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 {//投稿にサムネイルも画像も無い場合の処理
echo '<meta property="og:image" content="画像URL">';echo "\n";
}
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:image" content="画像URL">';echo "\n";
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:admins" content="管理者ID">
<meta property="fb:app_id" content="アプリID">
<!-- ここまでOGP -->

これをお使いのWordpressテーマのheader.phpの<head></head>タグの間に埋め込みます。

修正が必要な箇所

修正箇所は以下。

デフォルトの画像の設定

「画像URL」の部分を任意の画像に変更してください。記事や、アーカイブページなどで画像が取得できなかった場合に、og:imageとして利用される画像です。

} else {//投稿にサムネイルも画像も無い場合の処理
echo '<meta property="og:image" content="画像URL">';echo "\n";
}
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:image" content="画像URL">';echo "\n";
}

管理者IDとアプリIDの設定

以下、Facebookの「管理者ID」と「アプリID」は自身のものに変更してください。

<meta property="fb:admins" content="管理者ID">
<meta property="fb:app_id" content="アプリID">

「管理者ID」と「アプリID」の取得方法は以下に詳しく書かれています。

Facebook : 開発者登録をしてApp IDを取得するまで | MUSHIKAGO APPS MEMO

まとめ

今回のようにOGPを自前で設定することで以下のようなメリットがあります。

  1. OGPプラグインの不具合回避
  2. プラグインを使わないことで、多少は速くなる
  3. 意図した内容をFacebookに伝える

その反面、以下のようなデメリットもあります。

  1. プラグインのように手軽には設定できない
  2. PHPを編集するので、設定に失敗するとエラーが出る

PHPの編集に自信がない場合は、Open Graph Proプラグインを利用した方が間違いないです。たまにちょっとおかしなことするけど、OGPを設定していないよりは、効果ははるかにあると思います

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

スポンサーリンク

『【WordPress】Facebook OGPプラグインの使用を止めて自前で設定したら意図通りの画像で正しくシェアされるようになった』へのコメント

  1. 名前:通りすがり 投稿日:2014/12/19(金) 15:17:03 ID:e9dffcb8a

    わいひらさん、こんにちは。 プラグインでのOGP設定がうまくいかず、検索でこのページにたどり着きました。他のサイトでは、headタグあるいはhtmlタグの変更を要求しているのですが、必要ないものなのでしょうか?

  2. アバター画像 名前:わいひら 投稿日:2014/12/19(金) 18:32:13 ID:db4f8adff

    こんにちは。

    >headタグあるいはhtmlタグの変更を要求しているのですが、必要ないものなのでしょうか?
    これは、プラグインの設定時のことでしょうか?
    そのサイトのURLを教えていただけると、何かアドバイスできるかもしれません。

  3. 名前:通りすがり 投稿日:2014/12/20(土) 00:55:41 ID:6371c26df

    わかりにくい文章ですみません。プラグインに頼らずにOGP設定をするという意味です。
    Googleで ”wordpress ogp” と検索すると設定の仕方が解説されているのですが、headタグまたはhtmlタグ編集の記述があるサイトもあれば、ないものもあります。この違いは何なのかなぁと思い質問いたしました。

  4. アバター画像 名前:わいひら 投稿日:2014/12/20(土) 10:40:59 ID:1a2115e4e

    OGPを自前で設定するには、HTMLのヘッダーにMETAタグを記述する必要があると思います。
    Wordpressだったら、このページに書いてあるコードをhead内に書く必要があります。

  5. 名前:やまだ 投稿日:2016/02/03(水) 00:34:50 ID:fd053d83d

    こんにちは!
    埋め込むソースコードがものすごく長い気がするのですが、
    実際に埋め込むのは「ここからOGP」となっているところからで問題ないでしょうか??

  6. アバター画像 名前:わいひら 投稿日:2016/02/03(水) 03:20:01 ID:3e9757616

    こんにちは。ご指摘ありがとうございます!
    どういうわけか、全部のソースが入っていました;
    修正しておきました。