WordPressでプラグイン不要なカンタンOGP表示ファイルを作ったから公開しますね

2012年02月10日

OGPって?

最近僕はfacebookの利用頻度が少しだけ上がったんですが、みなさんはfacebook活用してますか?何に?知りません。楽しんでますか?僕は特に楽しんでいません。今のところはブックマーク代わりといったところですが、これって正しい楽しみ方なのかな?

僕の利用方法が正しいのかどうかはさておき、サイトとかページとかを「イイネ」とか「シェア」といった形でブックマークできるようなのでポチポチとイイネったりシェアったりしているとニュースフィードとかタイムラインにいろんなサイトとかページが表示されるようになりました。

余談ですけど、何をどう使うかに正しいも何もないよね、きっと。好きなものを好きなように使えばいいと思んだ、僕。「このサービスはこう使わないと!」と限定してしまわない柔軟さがイマドキですね。本当にイマドキかどうかもさておきですがね。

忙しい方へ・・・

もう一個余談です。この記事はタイトル通りOGPファイルを公開しているのですが、僕は前置きとか説明とかグダグダとかが多いアレな子ので、お時間あまりない方は前半を飛ばしてここら辺から読んで頂ければ良いかと思いますよ。

目次

ついに僕も目次が必要なくらいの分量を書くようになりました。長けりゃ良いってもんじゃないでしょうが、改めて見直すと凄い量ですね、よく書きました。ま、8割グダグダですけど。

FBに載ってる情報の量がサイトによって違う!?

で、ニュースフィードに表示されているページを見ていると、とあるサイトはタイトルとURLだけだったり、あるサイトは本文の最初の方がちょこっと載ってたり、またあるサイトはサイトで統一されたアイコンが表示されてたりアイキャッチが表示されてたりと、バリエーションが色々ありました。

勘の鋭い僕は即座に「ははーん、これはもしやサイト側で設定できるんだな?」と思いましたよ。そこに気づくとは僕はやっぱりただ者ではないですね。

そこに気づいたただ者じゃない僕は、まず適当に調べだして、どうやらそれがOGPというものであることが分かりました。ただ者じゃないだけでは飽き足らず仕事も早いとはなんということでしょう。一周してただ者に戻ってしまった印象です。恐らくそれが正しい僕の姿なのでしょうね。

で、OGPって?

OGPについてはIT戦記のあまちゃんさんが凄く丁寧に紹介して頂いているので、是非そちらを読んで頂ければと思います。なので、僕は触りだけを書く程度にしましょうかね。そう、触るように。何が「そう」なのか分かりませんがね。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。

多分、OGPを設定したページでfacebookの「良いね」を押すと、facebookはそのページに記述されたOGPの情報(サイト名、ページ名、サムネイル画像、概要テキスト等)をニュースフィードに表示したりするんじゃなかろうか。

「OGPの情報」って具体的には?

headの中に記載するメタ情報です。「<link rel=…」とか「<meta http-equiv=…」とかのあれです。そこに追記すれば良いみたいです。

これ書くとどうなるの?

端的に言えば、「他のサイトでの自分のブログ(サイト)の扱いが向上します」ですかね。

例えとしてとりあえず2ページ作ってみました。一つはOGPを何も設定していないページ、もう一つは頑張ってOGPを設定したページ。

OGPを記述していない場合

OGPを設定していないページでイイネボタンを押すとこんな感じにニュースフィードに流れます。

ogp_no

まぁこれは予想できますね。タイトルタグに書いた事とドメインが書かれています。ただ、正直これではどういう事を書いているページなのかはちょっと分かりにくいですね。

OGPを記述している場合

そしてこれがOGPを記述した場合です。bodyタグはほとんど変わっていません。タイトルタグも変えていません。それが、OGPを記述するとこう表示されます。

ogp_yes

全然違いますね。こうまでも違うものか!とビックリします。特に、僕的にはサイト固有の画像を表示させることが出来るのはとても嬉しいです。FBのユーザーにサイトをより認知してもらえそうな気がしません?

何書けば良いの?

はい、だいたいこんな感じで書けば良いと思います。

これくらい書いておけば問題ないかと、多分ね。「type」に関しては色々あるんだろうけどWordPress限定って事で一応2種類しかいていません。というかすみません特に調べてないです。

めんどくさい。プラグインないの?

書き方は分かったものの、面倒ですよね。できればカンタンお手軽プラグインがほしいですよね。プラグインが豊富なことがWordPressの強みだしね!あるのなら、活用しよう、プラグイン。ちょうど良い川柳が出来たのでプラグイン探しもはかどることでしょう。

何となく既存プラグインがお気に召さないご様子

さっそくOGPを設定するプラグインを探し出しました。「WP-OGP」です。他にもあるんでしょうけどとりあえずこれしか見つけてません。というか、それに関する記事が結構多かったのでこれだけで大丈夫なのかなぁと思ったんで他のは探してない感じです。

なので一度WP-OGPを設定したのですが、設定できる画像の仕様が僕の希望とは全然違う仕様になっていてちょっとショボンなプラグインでした。いや、プラグインが悪いわけじゃなくて僕の希望が普通じゃないだけなのかもしれないんですけどね。

WP-OGPの仕様

  • アイキャッチが登録されてたらアイキャッチが画像になる
  • アイキャッチがなければ記事内で最初に表示する画像(imgタグ)
  • それもなければ画像なし

僕が求めている仕様

  • アイキャッチがあろうがなかろうが、表示するのはサイト固有の画像

なのです。

だってさ、とりあえず用途をFBだとすると、誰かのフィードに流れるわけでしょ?だったら一目見ただけで「あぁ、このサイトの記事が『いいね!』なんだな」て分かるでしょ?アイキャッチだったらぱっと見でサイトなんか分かんないじゃん。

なので、作りました

プラグインをカスタムするのと下手にアップデートできないから僕的にはやりたくありません。そして僕は今のところプラグインを作ったことがないので作り方がわかりません。なので、できる限り簡単に設置できるカスタムファイルを作りました。誰か使ってくれるかなぁと淡い期待を寄せつつ公開してみます。

作ったファイルの仕様

  • functions.phpに数行記述すれば自動でOGPを生成してくれる
  • 要FBのユーザーID、アプリID
  • $og_img_flgの値で表示させる画像を設定可能(固定orアイキャッチ)
  • アイキャッチを設定した場合、アイキャッチがない記事には記事内に記載されている最初のimgタグ画像を表示する
  • 固定画像を設定した場合、$og_img_urlの値で画像を選択
  • 固定画像を設定しているが所定の場所に画像がない場合は画像表示なし
  • 概要は個別記事の場合本文テキストのみ200文字、それ以外はサイト紹介文

大したことはしていないのでソースも複雑にはなっていないと思います。あと割と細かくコメントを書いているのでPHP少々知っててWordPressカスタマイズやりたいなぁと思っている方が雰囲気を掴むのには良いかもしれないですね。

やること

どうですか?簡単ですか?申請はFB側の手順だし、画像はなきゃないで良いので、実質やらないといけないことはファイルをダウンロードしてアップしてfunctions.phpを書き足すだけです。僕的には結構簡単に設定できるようになったなと思ってますが、いかがでしょ。

FBのアプリ申請

正直これが一番めんどくさいです。自分のブログでOGPを設定しようと思ったらfacebookでアプリIDとユーザーIDを取得しないといけないみたいです。めんどくさいね。めんどくさいのですが、とりあえずは設定してみることにしましょう。

「とりあえずやれば良ってみよう」という思想は基本的に好きではないですが、その思想で動くことがとても重要な事が多いのもまた事実。ここは僕を信じてとりあえず設定してください。というか、設定しないとOGP導入できないし。

facebookのアプリID、ユーザーIDを取得する

まずはアプリIDを取得しましょう。Facebook開発者 にアクセスして、「新しいアプリケーションを作成」をクリックしましょう。

fbappli_id01

アプリケーション名とかネームスペースとかは適当にサイト名とかを入れれば良いんじゃないかな。そして「続行」で登録される。

fbappli_id02

登録後、またFacebook開発者にアクセスすると、今し方登録したアプリが表示されているはずなので、「App ID」を控えておきましょう

そしてユーザーIDはここで取得します
https://graph.facebook.com/アカウント名

※「アカウント名」部分を自分のfacebookアカウントに変えてアクセスしてくださいね。

fbappli_id03

ここの「”id”: “ユーザID”,」がユーザーIDになります

サイト固有画像の用意

長かったですね。正直僕はアプリIDの登録、ユーザーIDを調べる時間の方が長かったんじゃないかと思えるくらいでした。これからはチャチャっといくはずですよ。

自分のブログがニュースフィードに表示された場合に見せる画像を作ります。サイズは90px×90pxがいいと思いますよ。もしmixiチェックとかもある場合は180px×180pxでもいいかもしれません。ファイル名は「ogp_image.gif」にしていただけると設定が一つ減って楽ちんですよ。

ファイルのダウンロード

下に書いているファイルをダウンロードして、解凍してください。

OGPファイルをダウンロード

ファイルのアップロード

ダウンロードしたファイルを解凍して、ogp.phpを今お使いのテーマフォルダ「/wp-content/themes/テーマ名/」に、制作した画像をテーマフォルダ内の画像ディレクトリ「/wp-content/themes/テーマ名/images/」にアップします。

structure

ちなみに、画像のファイル名・パスは自由に設定してもらってかまいません。あとでfunctions.phpに記述して設定できます。

functions.phpに記述

functions.phpにOGPファイル読み込みと各種設定を記述します。さっき大事にとっておいてねって言ったフェイスブックのアプリIDとユーザーIDがここで生きるわけです。

これで作業は終了です、お疲れ様です。

ちゃんと表示されるかを確認

あとはちゃんと表示されているかの確認です。どこかの記事を表示させてソースを見る、でも良いんですが、facebook側にデバッガが用意されているので、せっかくだし使いましょう。「Debugger – Facebook開発者」にアクセスして、URLを入力してください。

結果画面の「Object Properties」欄に正しく情報が入力されていればOKです。Warningsで「Objects of this type do not allow properties named image_src.」って出てるけど気にしなくて良いんじゃないかと(よく分かんない)。

こんな感じ
ogp_test_result

さいごに

如何でしたか?一応「OGPって?」な方にもご理解頂けるように書いたつもりなんですけど分かりやすかったでしょうか。分かりにくいところとかあればご指摘頂けると嬉しいですし回答できそう、追記できそうであれば対応します。あと、間違ってるところとか。

それと、公開しているファイルですが、一応自分でも確認はしたんですが、不備とかあったり要望とか意見とか頂けると嬉しいです。おねがいします。頂ければできるだけ対応します。

他にこんな事も書いてます

FBでコメント

4個のコメント

  1. 書いた:WordPressでプラグイン不要なカンタンOGP表示ファイルを作ったから公開しますね – http://t.co/axv0BOs1

  2. 書かれた。 RT @anticyborg: 書いた:WordPressでプラグイン不要なカンタンOGP表示ファイルを作ったから公開しますね – http://t.co/844UBOZc

  3. WordPressでプラグイン不要なカンタンOGP表示ファイルを作ったから公開しますね http://t.co/svKmfjgD

  4. @masaru21 より:

    [ WordPress][facebook][OGP]この記事を基に、WordPressにOGPを導入しました。 / “WordPressでプラグイン不要なカンタンOGP表示ファイルを作ったから公開しますね: STACKSTOCK” http://t.co/J6TokP9X

トラックバック/ピンバックはありません。