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

更新日: 2019/10/17
公開日: 2013/09/07

カテゴリー:
- WordPress

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

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

コロコロ変わるOGP仕様
OGPの設定をするにあたって参考になったページ

コロコロ変わるOGP仕様

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

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

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

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

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

OGPの設定ソース参考元

[Å] Facebookで記事をシェアしたら一部でタイトルが文字化け！解決方法ご紹介！ | あかめ女子のwebメモ

Facebookのシェアを利用すると一部でタイトルが文字化け。その修正方法をご紹介！

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

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

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

html999 » はじめてのOGP設置方法とどこまで設定するかを考える

Webサイト制作に役立つTipsを紹介兼備忘録のブログです。主にHTML、CSS、jQueryのコーディングに関するいろいろを紹介しています！

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」を設定しなくてはいけません。ですので、ここを条件分岐で変更します。