[ソーシャル連携]WordPressにOGPを設定する方法。「All in One SEO」とFacebookの新仕様対応でやってみる

  • 更新日:
  • 公開日:

最早当たり前のように行われているOGP設定。当ブログも超小並ブログですがFacebook と連携させるべくOGP設定をしてみました。SEO必須のプラグイン「All in One SEO」と新仕様対応です(2013年09月05日現在)。

ちなみにOGPはmixi、Google+なども対応しています。

コロコロ変わるOGP仕様

色々な所で言われていますが、OGPは仕様がコロコロ変わっちゃいますのでプラグインなどに頼るよりも自分でソースを書き込んで設定したほうが良いようです。仕様変更がされたらその都度自分でちゃちゃっと修正するだけで済みますからね。なのでプラグインは使いません。

また、後述するOGP設定のソースはブログのような構造が簡略化されたサイトであればそのまま使えます。が、Welcart等を使ったECサイト(やその他複雑なCMSサイト)の場合は少々手直しが必要になると思われます。

あと、この記事は長くなりますので2ページ構成にしてます。1ページ目は参考になったページやOGP(やFacebook)の仕様に関してのご説明、2ページ目はOGPの設定方法となっています。ので、「んな長ったらしい説明なんて見たくねえよ!」という方はこちらから2ページ目へ飛んで下さいませ。

OGPの設定をするにあたって参考になったページ

先に、OGPを設定するソースの記述に当たって参考にさせて頂いた各ページを貼っておきます。

OGPの設定ソース参考元

ソースの大本はこちらを参考にさせて頂きました。 このソースの「og:type」の修正と、新しくfacebookで追加された「article:publisher(またはarticle:author)」を追加する事になります。

「og:type」の”blog”がOGP公式サイトから消えた?

今までブログに関してはog:typeを”blog”に設定するはずだったのですが、どうやら公式サイトからblogという記述が消えてしまったようです。 それについて書かれてありましたページはこちら。

og:typeに言及していた部分の引用:

※og:typeの「blog」について。

013/05/01現在、公式サイト(http://ogp.me/)から消えています。(Open Graph Object Types – Facebook開発者にもない)ということは、ブログの場合でもトップページは「website」が正しい?ということに変更?? 今のところよくわからないので、わかったら追記します。(ブログもウェブサイトなので「website」を指定で間違いではないと思いますが…)

ちなみに、facebookのデバッガーで確認すると、「blog」を指定していても「og:type: article」とでてきます。 ためしにこのブログのトップページを「website」に変更してチェックすると『まえに「article」になってたから「website」に変更できません!ぷんぷん』とエラーがでてしまいました。 しょっちゅう仕様変更になるくせに変更できないなんてひどい>< とりあえず「website」にしたまましばらく放置してみます。

というわけで、og:typeに「blog」を使うのをやめておきました。 ただし、「website」に関してはトップページのみでしか使っちゃいけない事になっており、その他のページに関しては「article」を設定しなくてはいけません。ですので、ここを条件分岐で変更します。

新しく追加された仕様「article:publisher」「article:author」

今から約2ヶ月前、2013年6月19日にFacebookの開発者ブログでOGPの仕様追加が投稿されました。詳しくは下記ページが参考になります。

記事がニュースフィード上に流れるとき、その記事にひもづくFBページへのいいね!や個人アカウントのフォローを促すことができるようになります。

との事です。 当ブログでは一応Facebookページを作成してありますので(全然使うこと出来てませんが…)「article:publisher」を設定する事にします。 しかしこのarticle:publisher、使うにはog:typeと連動した条件があります。その条件は、

  • og:typeが「article」の時のみ有効
  • トップページでは使えない

の2つです(表裏一体ですが)。ですので、こちらも条件分岐で記述する事になります。

FacebookがOGPで推奨している画像サイズは1500px*1500px

でか過ぎです。最近流行りの巨人サイズですか。それともRetina対応でしょうか。 OGPの「og:image」によるサムネイルサイズに関しては下記ページで検証されています。

しかしサムネイル全てを1500pxなんて無理なので、ロゴ等を使用したデフォルト画像のみ1500px*1500pxで作っておきます。デフォルト画像はトップページか、記事に画像が無いときのみ指定されるようにします。

あとサムネイルの最小サイズは300px*300px以上が望ましいようです。これ未満ですとバグが起きやすいんだとか…。(当ブログでは画像の縦が250pxなんですよね;)


というわけで、次ページでOGPの設定ソースです。 長々と説明ばかりになってしまいましたが、早速Worpdress用のOGP設定方法です。

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone