• このエントリーをはてなブックマークに追加

OGP設定をするWordPressプラグイン「Open Graph Pro」の使い方

どうも。葉です。

ブログ運営に取り組むのであれば、「できるだけ多くの人にブログ記事を読んでもらいたい!」というのが運営者の気持ちだと思います。そのために、検索エンジンだけでなく、SNSからもアクセスを集めようとするのが当たり前となりました。

今では、FacebookやTwitterなどで爆発的な拡散を起こすことができれば、ブログ立ち上げ初期であったとしても大量のアクセスを集めることができます。

そんな、FacebookやTwitterでの拡散力を高めてくれる設定がOGP設定です。

この記事では、WordPressプラグイン「Open Graph Pro」のインストールからOGP設定の方法を丁寧に解説していきます。

HTMLやCSSの知識がなくても簡単に設定ができるので安心して読み進めてください。

注目
なお、OGP設定は、プラグイン「All in One SEO Pack」でも行うことができます。「All in One SEO Pack」では、OGP設定だけでなく、メタ要素の設定、XML Sitemapの設定、Google Search Consoleの承認、Google Analyticsとの連携など様々な設定が可能です。

OGP設定を「All in One SEO Pack」でおこないたい人は「All in One SEO PackでOGP設定!Facebook/TwitterをWordPressに連携させよう! 」を参照してください。

1.OGP設定とは?facebookの拡散力を強化しよう!

まずは、そもそもOGP設定とは何なのか?を紹介していきます。

OGPとは、Open Graph protocolの略称でFacebookで記事が拡散された時に、「この記事はこんな内容の記事ですよ!」ということを伝えるために使用します。

少し具体的に言うと、SNSで拡散された時の記事タイトル、アイキャッチ画像、記事の概要、URLなどをわかりやすく表示する仕組みのことを言います。

実際に、OGP設定ありとなしでどれくらい表示が異なってくるのかを比べてみましょう。今回は、差が一番大きくわかるアイキャッチ画像で比較してみます。

FacebookのOGP設定有り

FacebookでOGP設定ありでシェアした場合

アイキャッチ画像に設定した画像が表示されています。

FacebookのOGP設定なし

FacebookでOGP設定なしでシェアした場合

OGP設定無しだと、表示させたい画像とは別の画像が表示されてしまいました。

この画像を見ただけでは、この記事がいったい何について書いてある記事なのかが全く伝わらないですよね?

なので、シェアしてもらったとしてもだれもこの記事を読みに来てくれないのです。

もはやOGP設定は当たり前!

今の時代OGP設定をしていることは、もはや当たり前となっています。

FacebookやTwitterで拡散を狙う場合に、OGP設定をしていることで有利になるのではなく、OGP設定をしていないことで不利になることのほうが多いでしょう。

この記事では、OGP設定の方法について初心者のかたでもわかるように画像付きで丁寧に解説しているので、今ここでやってしまいましょう。

TwitterのOGP設定(Twitterカード設定)も行いたいのであれば、「All in One SEO Pack」にてOGP設定を行いましょう。「Open Graph Pro」では、FacebookのみのOGP設定になります。

2.「Open Graph Pro」のインストール

WordPress管理画面の左メニューより「プラグイン→新規追加」をクリックします。

Open Graph Proインストール1

プラグインの検索窓に「Open Graph Pro」と入力しエンターボタンを押します。

Open Graph Proインストール2

「Open Graph Pro」の「今すぐインストール」をクリックします。

Open Graph Proインストール3

「プラグインを有効化」をクリックします。

Open Graph Proインストール4

これで「Open Graph Pro」のインストール・有効化は完了です。

Open Graph Proインストール5

3.「Open Graph Pro」でOGP設定

「Open Graph Pro」は、インストールしただけでは使用できません。ここからは、「Open Graph Pro」を使ってOGP設定を行う手順を紹介していきます。

まず、WordPress管理画面の左メニューより「設定→Open Graph Pro」をクリックします。

Open Graph ProのOGP設定手順1

次に表示された画面では以下の画像を参考にしてください。

Open Graph ProのOGP設定手順2

各項目について解説していきます。

3-1.Object Type

Set Object Typeでは、ページの種類を設定します。

  • website:ウェブサイトのトップに指定
  • article:サイトやブログの下層ページに指定
  • blog:ブログのトップページに指定(2013年5月に公式サイトから表示が消えた)

昔は、「blog」を設定していたのですが、今は、「article」を指定することをおすすめします。ただし、「Open Graph Pro」は、5年以上更新されていないので、昔の使用のままです。なので、「article」がないのでとりあえずは、「blog」または、「website」を指定してください。

3-2.Header Image

Header Imageの項目には、記事内に画像がなかった場合などにSNS上で表示させる画像を指定します

指定する画像は、ヘッダー画像やひと目であなたが運営しているサイトだとわかるような画像にしましょう。SNS上で拡散された時に、ユーザーに一目でどんな内容のサイトなのかをしっかりと伝えることで、興味を持ってくれた人がアクセスしてきてくれますよ。

3-3.Use Header Image only

Use Header Image onlyにチェックを入れると、SNS上で拡散された時に表示される画像が、常にHeader Imageで指定した画像になります。ブログなどを運営していて記事ごとにアイキャッチ画像等を設定する場合は、チェックをいれないでください。

3-4.FacebookのAdmin User(s)とApplication ID

次にFacebookのAdmin User(s)とApplication IDの設定を行います。

Open Graph ProのOGP設定手順3

こちらは、少し面倒な作業が必要となります。もちろん、丁寧に解説しているのでこのまま読み進めてもらえば簡単に設定できるはずです。

3-4-1.Admin User(s)の確認方法

まずは、Facebookアカウントにログインした状態で「https://www.facebook.com/profile.php」にアクセスし、表示されたURLをコピーします。

FacebookのAdmin User ID取得方法

次に、「Find my Facebook ID」にアクセスし、先ほどコピーしたURLを貼り付け、「Find numeric ID→」をクリックします。

FacebookのAdmin User ID取得方法2

すると次のようにFacebookのAdmin User(s) IDが表示されます。

FacebookのAdmin User ID取得方法3

こちらを、「Open Graph Pro」の設定画面で、「Admin User(s)」とある場所に入力します。

FacebookのAdmin User ID取得方法4

3-4-2.Application IDの取得方法

次にApplication IDの確認方法を紹介していきます。Application IDの取得は手順が長く面倒なのですが、1つ1つ画像付きで解説しているので真似ながら行ってください。

Facebookにログインした状態で「All Apps」にアクセスし「Register Now」をクリックします。

AppID取得1

次の画面で「No」の部分を「Yes」に変更し「Next」をクリックします。

AppID取得1

次に、電話番号を入力し、「Send as Text」をクリックします。

すると、登録した電話番号宛に確認コードが送られてきます。

確認コードを「Confirmation Code」に入力し「Register」をクリックします。

AppID取得3

「Done」をクリックします。

AppID取得4

「Website」をクリックします。

AppID取得5

アプリ名を入力します。

なお、アプリ名は後で変更可能なので今回は、「テスト」と入力します。

「Create New Facebook App ID」をクリックします。

AppID取得6

メールアドレスの入力、カテゴリーの選択を行い

「Create App ID」をクリックします。

AppID取得7

下にスクロールすると、「Tell us about your website」という項目が出てくるので「Site URL」にあなたのサイトURLを入力し、「Next」をクリックします。

AppID取得8

一番下までスクロールすると『Finished!』を表示されているはずです。

これで、Application IDの取得は完了です。

では、取得したApplication IDの確認を行いましょう。

今開いている画面で一番上までスクロールして、「My Apps→先ほど作成したapp(この記事通りに作業していれば「テスト」という名前になっているはずです。)」を選択します。

AppID取得9

次に表示された画面で、App IDが確認できるはずです。これをコピーします。

AppID取得10

コピーしたApp IDを「Open Graph Pro」の設定画面で、「Application ID」とある場所に入力します。ここまで、入力できたら、「変更を保存」をクリックしてください。

AppID取得11

以上で、「Open Graph Pro」を使ったOGP設定の解説は終わります。

4.OGP設定がきちんと動作しているか確認

最後にOGP設定がきちんと行われているかどうかの確認をします。

デバッガー – 開発者向けFacebook 」にアクセスして、あなたのブログの内で任意の記事URLを入力し、右側の「デバッグ」をクリックします。

Open Graph ProのOGPの動作確認1

すると次のようにその記事が拡散された際にSNS上でどのように表示されるのかを確認することができます。

Open Graph ProのOGPの動作確認2

上図のように、エラー等が表示されなければOGP設定は正常に行えています。

なお、ブログの個別記事ではなくTOPページをデバッグにかけるとエラーが出力されますが、気にしなくて大丈夫です。

5.まとめ

プラグイン「Open Graph Pro」を使うことでHTMLやCSSなどのプログラム知識がなくてもOGP設定を簡単に行なうことができます。

SNSからアクセスを集めたいならOGP設定は、必須の項目です。めんどくさがらずにしっかりと設定していきましょう。

また、プラグイン「All in One SEO pack」を使用している方は、「All in One SEO PackでOGP設定!Facebook/TwitterをWordPressに連携させよう! 」よりOGP設定を行ってください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

プラグイン