WordPressのSEO対策でよく使われているプラグイン「All in One SEO」。
このプラグインを使っていれば、Facebookなどでブログ記事を紹介する際に非常に使えるOGP (Open Graph Protocol)を生成することができます。
OGPって何?という人は次のサイトを参考にしてください。
参考: これだけは知っておきたいOGP (Open Graph Protocol) | NEX.FM
とにかく、Facebookなどでブログ記事を紹介するならあった方がいいよ!と思ってください。
Facebookでブログ記事紹介するときに、思ったように画像が表示されないとか、ページの詳細説明がイケてないとか思うなら、設定しておきましょう。
All in One SEOでSocial MetaをActivate
WordPressに「All in One SEO」プラグインを導入していれば、ログイン後のダッシュボードの左側メニューに「All in One SEO」というのがあるはずです。
![ss_201404100109.png Ss 201404100109](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100109.png)
ここをクリックするとさらに「All in One SEO」のメニューが展開されます。
![ss_201404100110.png Ss 201404100110](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100110.png)
ここで「Feature Manager」をクリックすると、「Feature Manager」というページが表示されます。
![ss_201404100101.png Ss 201404100101](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100101.png)
このページで、「Social Meta」というところをActivateしましょう。
赤枠で囲っているあたりをクリックすればActivateできます。
Activateできると、左のメニューに「Social Meta」というのが出てきます。
そこをまたクリックしましょう。
Social Metaの設定
こちらが「Social Meta」の設定ページ。
ここでOGPの設定ができます。
![ss_201404100102.png Ss 201404100102](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100102.png)
「Join Our Mailing List」はお好みでどうぞ。
私はメーリングリストを受け取る気がないので、何も設定していません。
その下の「Social Meta」のところを設定しましょう。
![ss_201404100103.png Ss 201404100103](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100103.png)
ざっと項目を見てみます。
(ここで設定するところだけ解説しています)
- Use AIOSEO Title and Description:
ここにチェックを入れると、「Home Title」と「Home Description」が設定不要になる - Profile Admins ID:
FacebookのAdmin ID (「fb:admins」の値) - Site Name:
サイト名 (「og:site_name」の値) - Home Title:
ページタイトル (「og:title」の値) - Home Description:
ページ詳細説明 (「og:description」の値) - Disable Jatpack Tags
- Autogenerate OG Descriptions:
チェックしておきましょう - Select OG:Image Source:
サムネイルをどの画像にするか(「og:image」の値) - Default OG:Image
- Use Custom Field For image
- Facebook Object Type:
「blog」にしましょう - Enable Facebook Meta for:
「投稿」「固定ページ」をチェック - 投稿 Object Type (post):
「Article」にしましょう - 固定ページ Object Type (page):
「Article」にしましょう
基本的に、ほとんどデフォルトで問題ないです。
以下では、私が設定したところについて簡単に説明します。
ページのタイトルと詳細説明は設定しない
「Use AIOSEO Title and Description」にチェックを入れると、「Home Title」と「Home Description」が設定不要になります。
![ss_201404100104.png Ss 201404100104](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100104.png)
「Home Title」「Home Description」とも、もともと記事ごとに「All in One SEO」が設定しているので、ここで改めてする必要がないからです。
ここで「Home Title」「Home Description」を設定すると、すべての記事が同じ「Home Title」「Home Description」になるので、ブログ記事を紹介するという点では意味が無いですね。
だから、私は「Use AIOSEO Title and Description」にチェックを入れており、ここでは「Home Title」「Home Description」を設定していません。
Profile Admins IDの設定
「Profile Admins ID」ではFacebookのAdmin ID (「fb:admins」の値)を設定します。
なんのことかわからない場合は、次のURLで自分のAdmin IDを確認してください。
https://graph.facebook.com/yourusername
yourusernameのところを、Facebookで調べて、自分の名前に置き換えましょう。
調べ方は、Facebookページ右上の方にある自分の名前をクリックし、表示されたページのURLを確認します。
![ss_201404100111.png Ss 201404100111](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100111.png)
私だったら、「junichi.nishimura」なので、
https://graph.facebook.com/junichi.nishimura
となります。
そのURLにアクセスするとこんな感じのことを書いたページが出てくるので・・・
{ "id": "100001580718135", "first_name": "\u7d14\u4e00", "gender": "male", "last_name": "\u897f\u6751", "link": "https://www.facebook.com/junichi.nishimura", "locale": "ja_JP", "name": "\u897f\u6751 \u7d14\u4e00", "username": "junichi.nishimura" }
最初の”id”: “xxxxxxxx”のところの数字を使ってください。
OG:Imageの設定
私は記事紹介時に表示されるサムネイル (「OG:Image」の設定)は各記事のアイキャッチ画像でいいと思っています。
なので、「Select OG:Image Source」のドロップダウンリストから「アイキャッチ画像」を選びました。
他にも「記事中最初の画像」などの設定ができるようですが、特に試していません。
もしブログ記事紹介時のアイキャッチ画像は全部統一 (ブログのロゴなど)したい場合は、「Select OG:Image Source」を「Default Image」とし、「Default OG:Image」にイメージのあるURLを指定すれば良さそうです。
他のプラグインでOGPが作られているか確認
なお、すでに他のプラグインなどでOGPが作られているかもここでチェックできます。
![ss_201404100105.png Ss 201404100105](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100105.png)
気になる場合は、画面下部の「Scan Social Meta」でボタン「Scan Now」をクリックしてみましょう。
同じタグを何個も作る必要はないですからね。
もしすでに他のプラグインなどでOGPを作っているようであれば、そのプラグインを除外するか、こちらの「All in One SEO」の設定を諦めるかしましょう。
設定が終わったら、画面最下部のボタン「設定を更新」をクリックして設定を保存します。
記事ページにOGPの設定があるか確認
設定したら、記事ページのソースコードを見てOGPの設定がされているか確認します。
![ss_201404100106.png Ss 201404100106](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100106.png)
こちらは最初のHTMLタグ部分。
「xmlns:go」や「xmlns:fb」といった設定が出てきてますね。
![ss_201404100107.png Ss 201404100107](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100107.png)
こちらはOGP設定の本体部分になるメタタグたち。
興味がある人は、設定画面のどこを変更したらどのメタタグが影響を受けるかチェックしてみるといいでしょう。
Twitter cardsの設定もされていますね。
Twitter cardsってなんだろう?という場合は、次のサイトなどを参考にしてください。
Facebook デバッガで確認する
FacebookデバッガでOGPがちゃんと機能しているか調べることができます。
![ss_201404100112.png Ss 201404100112](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100112.png)
設定が有効なら、次のように表示されることでしょう。
![ss_201404100113.png Ss 201404100113](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100113.png)
「オブジェクトのプロパティ」あたりを見ると、
- fb:admins
- og:url
- og:type
- og:title
- og:image
- og:description
- og:site_name
- og:update_time
といったところで設定されていることがわかります。
先のページのソースコードと見比べるとまたOGPのことがわかるようになるかもしれません。
Facebookに投稿してみる
このようにしてOGPを設定すれば・・・
![ss_201404100108.png Ss 201404100108](https://fmol.will.company/wp-content/uploads/2014/04/ss_201404100108.png)
Facebookの投稿画面でURLを入力した際、アイキャッチ画像とタイトルとページ詳細説明が表示されるようになります。
おわりに
長い説明になってしまいましたが、基本的に設定自体は大したことありません。
やってみれば5分でできちゃうと思います。
Facebookでブログ記事紹介するときに、思ったように画像が表示されないとか、ページの詳細説明がイケてないとか思うなら、設定しておきましょう。
お試しあれ! (^o^)ノ