僕はこれまで、FacebookのOGPの設定は、「Open Graph Pro」プラグインで行っていました。
けれど、Open Graph Proを使っていると、不具合が結構あったので、今回Wordpressテーマに直接FacebookのOGPを設定することにしました。
今回はその方法の紹介です。
photo by Master OSM 2011
目次
OGPとは?
プログラムにページ情報を正しく伝えるためのプロトコルです。
例えば、Facebookのクローラーがブログの記事を読み込んだとしても、相手はコンピューターなので、ページにどのような内容が書かれているか、まではハッキリと判断することができません。
そこで、ページごとにOGPを運営者側が設定してやることで、こちらが意図した内容を正確にコンピューターに伝えることができます。
Facebookとかでしたら、その情報が反映されてこのような感じになります。
ソースコードだと、このような感じで設定されます。
<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の不具合
僕が利用して起った不具合としては、以下のようなものがあります。
- og:image(ページアイコン)が意図してない画像でたまにシェアされる
- Facebookにうまく情報が伝わっていない事が極たまにある
1.og:image(ページアイコン)が意図してない画像になる
自分のFacebookページにシェアする時に、たまに意図しない画像でシェアされることがありました。
例えばこのページ。
記事のアイキャッチが以下の画像ですから
本来ならこの画像がog:imageに反映されて、Facebookページには次のように出て欲しいところです。
しかし実際は、このような意図しない記事中の画像が勝手に選択されてしまいました。
FacebookのDebuggerで原因を探ると、次のようなエラーが出ていました。
内容はこんな感じです。
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を設定すべし
プラグインに頼らない利点については、以下で詳しく書かれています。
で、そのテーマに埋め込むソースコードが以下。
<!-- ここから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を自前で設定することで以下のようなメリットがあります。
- OGPプラグインの不具合回避
- プラグインを使わないことで、多少は速くなる
- 意図した内容をFacebookに伝える
その反面、以下のようなデメリットもあります。
- プラグインのように手軽には設定できない
- PHPを編集するので、設定に失敗するとエラーが出る
PHPの編集に自信がない場合は、Open Graph Proプラグインを利用した方が間違いないです。たまにちょっとおかしなことするけど、OGPを設定していないよりは、効果ははるかにあると思います
わいひらさん、こんにちは。 プラグインでのOGP設定がうまくいかず、検索でこのページにたどり着きました。他のサイトでは、headタグあるいはhtmlタグの変更を要求しているのですが、必要ないものなのでしょうか?