【Web制作】FacebookのOGP設定をプラグインなしで設置する方法

Facebookのいいね! SNS対策/SMO/RSS

Facebookのいいね!

ブログをFacebookでいいね!してもらった時のタイトル、説明文、写真などは適切ですか。今回はWordPressプラグインを使わないOGP設定についてです。WordPress以外のサイトでも応用できますよ。

ゆめぴょんです。こんちはっ(^^)/

同じ内容の新しいバージョン記事があります。そちらも参考にしてみてください。

ソーシャルボタンの設置方法については次の記事も参考にしてください。前者はプラグインを使わず自力で設置する方法、後者はWordPressプラグインを使う方法です。

FacebookのOGP設定とは?

Facebookでいいね!や送信(シェア)してもらうと拡散効果もありますが単純にうれしいです。WordPressで作成したブログは標準でもタイトルやURLはシェアされますが、写真や説明文は適切でない場合があります。

それらの情報はあらかじめOGP設定することによりFacebookでシェアする時に参照されます。OGPはWordPressプラグインを利用して簡単に設置できますが、柔軟に設定したいので自分で設置してみます。

ちなみに今回の内容はヘッダーファイルを書き換えるため自己責任でお願いします。ファイルのコピーは取りながら進んで下さい。

Facebook「fb:admins」の取得方法

(2015年3月26日追記)fb:adminsの利用は個人情報をさらす可能性もあるため、今後はapp_idの利用をオススメします。

最初にFacebookの「fb:admins」というIDナンバーを取得します。方法はいくつかあるようですが、現時点で一番簡単なのは次の方法です。なおこの方法はいつ使えなくなるかわかりません。その時はググって調べて下さい。

Facebookの自分のタイムラインを開き、プロフィール写真をクリック。写真だけが拡大して表示されますが、その時のURLの最後の方を見て下さい。

「.123456789012345&type=1&theater」となってるピリオドの後15桁の数値が「fb:admins」のIDです。桁数は人によって違うかもしれません。

OGP設置ための準備・おまじない

まずOGP設置の前の準備が必要です。設置方法はHTML5とそれ以外で違います。HTMLファイルの最上部に<!DOCTYPE html>があれば「HTML5」です。

WordPressの場合は管理画面の左メニューの「外観」→「テーマ編集」を選択。右のファイル一覧から「ヘッダー(header.php)」を選択。その中に<!DOCTYPE html>があれば「HTML5」です。

HTML5の場合は、headタグを次の1行に置き換えてください。

HTML5以外の場合は、htmlタグを次の1行に置き換えてください。

下の記事も参考にしてみてください。

FacebookのOGP設定の設置方法

通常ブログ・サイトでのOGP設置方法(WordPress以外)

HTMLファイルのheadタグの直前に次の内容を記述して下さい。【】で囲んだ内容はあなたのサイトに合わせて必ず書きなおして下さいね!

Facebookシェアした時の情報

WordPressでのFacebookのOGP設置方法

「ヘッダー(header.php)」ファイルの</head>タグの直前に次の内容を挿入。

補足:プラグイン「All in One SEO」を利用してる方へ

WordPressで「All in One SEO」のdescription抜粋を利用してるなら、上のソースコードの8行目の「mb_substr(get_the_excerpt(), 0, 100)」を次の内容に書き換えればOKだと思います。未確認ですが。

設定は以上で完了です。「ファイルを更新」するのを忘れじゅに!最後に確認しましょう。

FacebookのOGP設定の確認方法

ブログやサイトのソースをブラウザから開いてみて、</head>の直前に期待どおり記述されていれば問題ありません。次に進んでください。問題があれば上の設定を確認してみてください。

次にFacebookを開いて、近況欄に自分のブログのURLを書いてみます。期待したとおりのタイトル、説明文、写真が出てくれば成功です。もし以前の情報のままなら更新が必要なので次に進んで下さい。

FacebookのOGP設定のデバッガーでの更新方法

Facebookのデバッガーというサービスを利用して、OGP履歴を更新します。下ページを開いて、入力欄にブログURLを入力しデバッグを押します。すると新しい内容に書き換わります。この作業は全ての記事とページで必要みたいです。

デバッガー – Facebook開発者

以上です。今回のソースコードは次ページをかなり参考にしました。ありがとうございました。私の変更箇所はdescriptionに抜粋を利用してる点、固定ページの画像も利用してる点、localeを設定してる点、コメントを修正してる点など。

[Å] 私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由

ちなみにTwitterでのOGP(Twitter Cards)は下の記事を参考にしてください。またブログの更新通知についての参考記事もどうぞ。


ゆめぴょんでした。ちゃおっ!

タイトルとURLをコピーしました