WordPress プラグインなしで Facebook の OGP(Open Graph Protocol)設定をしてみた

OGPの公式ロゴ
WordPressプラグインは便利な反面、あれもこれもと入れてしまいがちです。増えればそれだけ、サイトを重くする原因になります。絶対に必要なプラグインを厳選して、あとは自力でなんとかしたい、と考えています。

今回、FacebookのOGPをプラグインなしで、htmlを編集して直接OGPタグを書き込む方法を知ったので、さっそくやってみることにしました。

意外とカンタンで、10分ほどで設定できました。

OGP(Open Graph Protocol)とは

OGP(Open Graph Protcol)」はFacebookだけでなく、Google+、mixi、GREEなど、多くのソーシャルメディアで使われている仕様です。SNSとウェブページを連携させ、ウォールやニュースフィードに「このウェブページには何が書かれているか」という情報をプログラムに正しく読み取らせます。

OGPの記述方法に従ってhtmlを書いておかないと、だれかがウェブページに設置された「いいね!」ボタンをクリックしても、その人のウォールには表示されますが、その人の「友達」のニュースフィードには表示されません。したがって、記事の拡散性がきわめて低くなってしまいます。

OGP設定をしておけば、自分のウォールだけでなく、「友達」のニュースフィードにも表示されるので、それを見た人がウェブページに訪れてくれる可能性が高まります。訪れた人が「いいね!」を押してくれたら、さらに記事が広がっていくことでしょう。

OGPタグの記述を変えることで、表示したい情報を変更することも可能です。より多くの人にウェブページを見てもらいたい場合には、ぜひ設定しておきましょう。

OGPの設定方法

WordPressを使っているなら設定方法は2つあります。カンタンなのは①「WordPressプラグインを導入する」ことです。htmlの知識があれば②「htmlを編集して直接OGPタグを書き込む」ことで設定できます。

WordPressプラグインを使うメリットとデメリット

プラグインを利用するメリットは、何と言ってもカンタンなことです。インストールして有効化するだけで、あとは自動的にやってくれます。またFacebookの仕様が変更された際にも、自分で調べたり勉強することなく、プラグインの開発者にまかせておけばいいので負担は少ないとおもいます。

htmlに不慣れな人や特に細かな設定をする必要のない人、またはプラグインに不満を感じていなければこちらの方法がいいでしょう。おすすめはFacebook社プラグイン「Facebook」か「Open Graph Pro」です。

WordPress › Facebook « WordPress Plugins
WordPress › Open Graph Pro « WordPress Plugins 

デメリットは、プラグインを使うことでテーマや他のプラグインと競合し、不具合を発生させる場合があることです。またプラグインそのものの開発が止まってしまう場合には、別のプラグインを探して自分のサイトに合っているかを検証する手間がでてきます。

htmlを編集して直接OGPタグを書き込むメリットとデメリット

メリットはプラグインの不満を解消できることです。ソースコードを自分のサイトに合わせて編集することで、ウォールに表示したい情報のカスタマイズが可能です。またプラグインを使わないことで、少しでもサイトが重くならないようにできます。

多くのサイトでソースコードを公開しているので、それをコピー&ペーストするだけでも設定できます。自分で設定することによりhtmlやWordPressの知識がより深まるでしょう。

デメリットはhtmlに詳しくない人にはおすすめできないことです。テーマ編集やFTPソフトなどで「header.php」を変更します。間違って別の重要なファイルを削除してしまったり、コードを変更してしまったときに、バックアップから復旧できる人でなければ、最悪の場合には画面が真っ白になって管理画面にログインできなくなります。

またサイトによってはHTML5になっているので、それに合わせて多少の変更をする必要があります。

参考にしたサイト

以上のように、どちらの方法を取るにせよ、メリットとデメリットがあります。よく分からなければ、プラグインを使って導入しておけばよいでしょう。

今回は②「htmlを編集して直接OGPタグを書き込む」方法を取ります。なお、この記事全体で参考にした情報源は以下のサイトです。

貼るだけ簡単!アクセスが倍増するWordPress用OGPコード | Oxy notes
[Å] 私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由 | あかめ女子のwebメモ
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記
これだけは知っておきたいOGP (Open Graph Protocol) | NEX.FM
facebook いいねボタン設置時のOGP設定方法♪ | フリーランスWebデザイナーの仕事

わかりやすい解説なので勉強になりました。ありがとうございます。

Facebook Developerの登録は必須

OGPを利用するにはまずFacebookのユーザIDとアプリIDの2つが必要です。まずFacebookに登録しましょう。次に​Facebook Developers​​でアプリIDを取得します。長くなるので、この手順は省略します。

以下では、すでに2つのIDを持っているものとして設定方法を書いていきます。

設定方法

「header.php」を書き換えてから、Facebook開発者「デバッガー」でチェックするだけです。順番にやっていきましょう。まず「xmlns属性を変更する」、次に「OGP用のコードを「</head>」直前に追加する」、最後にFacebook開発者でデバッグします。

事前に必ずバックアップを取ってから自己責任で設定してください。

xmlns属性を変更する

xmlns(XML Namespace)は日本語で「XML名前空間」ともいいます。わたしは素人なのでくわしい説明はできませんが、XHTMLで作成する文書に参照するタグと属性を<html>以下に指定しています。

テーマ編集やFTPソフトなどを使って「header.php」冒頭のDOCTYPE宣言直後にあるコードを書き換えてください。DOCTYPE宣言というのは以下のようなコードです。

例えば、これは「HTML4.01 Transitional」だと宣言していますが、サイトが使っているHTML/XHTMLの種類によって多少ちがってます。ここは変更せずそのままにしておきます。

変更するのはその次の<html>の行です。以下のように書き換えてください。

<xmlns=”http://~”>という行が3つあります。1つ目はXHTMLならデフォルトで記述しておくもの。2つ目がOGPのタグを使う指定、3つ目がFacebookの指定です。

なおサイトがHTML5であれば<head>タグを次のように書き換えます。

OGP用のコードを「</head>」直前に追加する

続いて「</head>」直前にOGP用のコードを追加します。

いろいろと書き込まれていて難しく見えますが、ようするに「Facebookに伝えたい情報」をメタタグで指定しているだけです。書き方は

<meta property=”何を” content=”どのように”>

という形式です。少しだけ説明しておきます。

  • fb:admins:アカウント情報(自分のFacebook IDを入れます)
  • og:locale:言語指定(日本語はja_JP)
  • og:type:ウェブページの種類(blog/article/website)
  • og:description:記事の抜粋
  • og:title:記事のタイトル
  • og:url:ウェブページのURL
  • og:site_name:サイト名
  • og:image:表示させたい画像

ほかにもたくさんメタタグは用意されていて、「The Open Graph protocol」(公式サイト)に例文つきで詳しく解説されています。英語表記ですが、HTMLに慣れている人なら英語が苦手でもわかるとおもいます。お好みのメタタグを探してみてください。

FacebookアカウントIDの調べ方

FacebookアカウントIDはこちらの方法で調べられます。

・FacebookのユーザーIDを簡単に確認する方法 | Facebook使い方講座”初めてみようFacebook” 

Facebookのデバッガーページで検証する

Facebookの公式ページ「デバッガー」で正しく設定されているかをチェックします。

フェイスブックのデバッカーのページ

Debugger – Facebook Developers

うまくいくとこんな表示がでてきます。

デバッガーでチェックして問題のなかった時の表示

レンタルサーバーによっては、キャッシュが残っていて「header.php」の書き換えがFacebookに伝わらない場合があります。キャッシュを削除して再度試すか、しばらく時間が経ってから再度デバッグしてみてください。

もしかしたらfb:admins の数字が違っていてエラーが出てしまうかもしれません。そういうときはデバッガーページの下に行き「Graph API」横にあるURL「https://graph.facebook.com/数字」をクリックしてください。

IDをチェックするときの方法

表示されたページにIDが書いてあります。

これで完了です。

テスト投稿

さっそくテスト投稿してみましょう。Facebookとの連携はプラグイン「Wordbooker」を使いました。

テスト投稿で確認した画面

「新しい記事を投稿しました」のあとに、指定した画像、「これはテスト投稿です」というタイトル、その下にサイトタイトル下の説明、そして抜粋、と続いています。

ちゃんと表示されていますね。これで終了です。

OGPを設定してFacebookでシェアしよう

OGPの設定はそんなにむずかしくありません。プラグインなら細かい設定を「全部おまかせ」でできますし、自分でHTMLを編集しても以上の3ステップで完了します。

あとはしっかりとした記事を書くだけです。シェアしやすい環境を整えたら、読んだ人がシェアしたくなるような内容を書くこと、読んだ人の得になるような記事を書くこと、それが大事ですね。

関連記事