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

  • 更新日:
  • 公開日:

長々と説明ばかりになってしまいましたが、早速Worpdress用のOGP設定方法です。

OGPの設定方法

OGPの設定に必要な修正箇所は

  • <html>タグ(名前空間の指定)
  • <meta>タグ(パラメータの指定)

の2つです。

<html>タグの記述(名前空間の指定)

まずは<html>タグの記述から修正します。 HTML5の場合、XHTMLの場合、さらにはFacebook仕様に対応する場合で記述方法が違います。Facebook仕様とは「fb:app_id」や「fb:page_id」、「article:publisher」の事で、これらを使用する場合は各々後者の記述にする必要があります。

そして減るもんじゃないしmixi用の記述も追加しておきます。

HTML5の場合

XHTMLの場合

<meta>タグの記述(パラメータの指定)

こちらは先述した大本のソースを少々書き換え、必要な部分を条件分岐する形になります。

このソースのハイライトした2,3,9,35,38行目を書き換えたり、要らなかったら削除します。

2行目: 「fb:app_id」

Facebookで作成したアプリのapp_idを「content=””」内に記述します。「content=”12345678910″」こんな感じでapp_idは数字だけです。

設定しなくても良い場合はこの行は削除します。

Facebookページ用にFacebookアプリを作成しapp_idを確認する方法は別記事『OGP用にFacebookアプリを作成してapp_idを取得する』に書いておきました。

3行目: 「fb:admins」

Facebookページの管理者に自分のFacebookアカウントを指定するための記述です。app_id同様に数字を記述します。

設定しなくても良い場合はこの行は削除します。

Facebookアカウントのidの調べ方も別記事『FacebookアカウントのIDを調べる』に書いておきました。

9行目: 「article:publisher」

Facebookページと紐付けたい場合は設定します(詳細は前ページへ)。ここは単にFacebookページのURLを記述するだけです。

または、個人アカウント紐付ける場合は「article:author」と書き換え、URLの部分に個人アカウントのURLを記述します。

Facebookページが無かったり必要が無ければこの行は削除して下さい。

35行目、38行目: OGP用のデフォルト画像指定

OGP用のデフォルト画像を用意してテーマのimagesディレクトリ等にアップロードし、画像までの絶対パスを記述します。推奨は1500px*1500pxです。35行目、38行目どちらも同じURLで大丈夫です。

これでOGPの設定が出来ているはずです。

Facebookデベロッパーのデバッガーでチェック

実際にOGPがちゃんと適応されたかFacebookデベロッパーのデバッガーでチェックしましょう。デバッグしたいURLを入力して「デバッグ」ボタンをクリックするだけです。

app_idやadmins等の記述を削除した場合は警告が出ると思われますが、実際の挙動には問題が無いです。

「fb:app_id」や「fb:admins」に関して

この2つが必要かどうかの判断なのですが、これは下記ページが参考になります。

fb:admins と fb:app_id がないよ。設定すればニュースフィードで高いクリック率がだせるよ。」的なことが書いてあり、指定しないと表示できないわけではないようですが、可能な限り指定はしていた方が良さそうですね。

という訳で、なるべく指定した方が良さそうです。


最近はmixiを活用していなかったので知らなかったのですが、mixiに関してはサムネイルが適応されるのはmixiチェックのみらしいですね。mixiイイネ!ボタンと2つに分かれてややこしや…^^;

書いた人

Symbol Mark

Ryoichi(しつ)

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

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

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

うぇぶ: @s_ryone