[WordPress]初心者のためのOGPの設定方法(Open Graph Pro)

LINEで送る
Pocket

この記事の所要時間: 約 4分35秒

いいね!

ブログに設置する「いいね!」ボタンの効力を発揮するには、

「OGP」の設定をしていないと意味がありません。

※初心者には、なんのこと? なのか良く分かりにくいですね。

 

このOGP設定とやら、分かってしまえばそれほどでもないのですが、分からない場合は、ホント、設定やエラーに困りましたので、私なりに分かりやすくまとめておきたいと思います。

 

 

OGPというのは、「オープングラフプロトコル」といって、

要は、ブログ(ホームページ)の記事内容をソーシャルへ流すための決めごと(規格)みたいなものです。

 

OGPを設定すると何がいいの?

 

OGPの設定がされていない普通のWebページで、投稿についている「いいね!」ボタンを押してもらっても、その人のフィードにしか投稿記事内容が表示されません。

つまり、

押してくれた人だけしかわからないのです。

 

OGPを設定するとどうなる?

 

「いいね!」ボタンを押してくれた人の友達のニュースフェードにも投稿記事内容が表示されるため、口コミ伝播がしやすくなるんですね。

 

だから、OGP設定しておかないと、

せっかく「いいね!」を押してもらっても、

周りの人にまで伝わらなく、なかなか増えません。

 

ここでは、初心者でもできるよう、OGP設定プラグインを利用して設定する方法を書いておきます。

不親切なFacebookに振り回され、ハマった点もしっかり書いておきますね。

 

OGP設定の流れ

 

  1. WordPressプラグイン「Open Graph Pro」をインストール
  2. Facebookのadmin IDを調べる
  3. Facebookのapp IDを取得する
  4. Admin IDとapp IDをプラグインに登録する
  5. 実際にOGP設定できているか、デバッグページから確認する

 

WordPressプラグイン「Open Graph Pro」をインストール

 

ワードプレスにログインし、プラグインの「新規追加」から

「Open Graph Pro」を検索、インストールし、プラグインを有効にします。

Open Graph Proのインストール

 

プラグイン一覧から、「設定」をクリックし設定画面へ。

Open Graph Proの設定画面へ

 

Open Graph Proの設定画面から、「Set Object Type to」を選択します。

私の場合はブログなので「ブログ」を選択。

Open Graph Proの設定画面

 

次に、「Replace Header Image with 」にプロフィール画像(ロゴなど)の画像URLを設定します。

※画像は必ず設定してください。200×200pxが良いでしょう。

Replace Header Image with 画面

 

次に、「Admin User(s) 」にadmin IDを入力します。

 

Admin IDの確認方法

 

ブラウザに以下のURLを入力します。

http://graph.facebook.com/■■■■■■■■■

graph.facebook.comで確認

 

■■■■■■■■は、個人アカウントでfacebookにログインした時に

表示されるURLです(個人名に相当の部分)

※サイトのFacebookページアドレスではありません(ココ間違いやすい)

facebookの個人アカウントの部分

 

「id」の部分がadmin IDです。

設定画面に戻り、入力します。

Admin User(s)設定

 

Application ID(app ID)の取得を確認

 

ここからが、Facebookのややこしい、アプリの登録を行います。

※すでにアプリ設定されている方は、飛ばして下さい。

 

まず、Facebook開発ページから、アプリを登録します。

 

「App Name」を入力しその他は空欄。

「App Name」は自由につけられます。

「Creat New App」画面

 

セキュリティチェック(ムカツクくらい読めませんね)

セキュリティチェック

 

アプリの基本設定画面が表示されますので、2か所に入力します。

「App Domains」 → サイトのドメイン(http://を省略して入力)

「Website with Facebook Login 」→ サイトのURL(http://から始まる正式なURL)

Facebookアプリ基本設定画面

 

変更を保存をクリックすると、時間がかかるそうですが、OKです。

Facebookアプリの設定完了

 

これで、Facebookアプリの設定は終了です。

 

設定画面に戻り、App IDを入力します。

Application ID設定

 

変更を保存をポチ。

Facebook設定画面

 

これで設定は完了です。

 

次は、OGPの設定が問題なくできているか、確認する作業です。

OGPタグが設定されているか確認する方法

 

LINEで送る
Pocket

22 Comments

  • Pingback: [Facebook] OGPタグが設定されているか確認する方法 | Forest of Memory

  • Pingback: Hello WordPress! | OGPをまとめて設定!SNSアピールでアクセスアップ

  • Pingback: 【WPメモ】「Open Graph Pro」でWordPressのOGPを設定する方法 | KLOCKWORK APPLE

  • Pingback: WordPressプラグイン15選!最高の集客効率と機能性を出す組み合わせ

  • Pingback: WordPress SEO対策 プラグイン Open Graph Pro ・All in One SEO Pack WPMEMO | WPMEMO

  • Pingback: WordPressのプラグイン備忘録(メイン使用の13個)

  • 2013/02/08 - 18:08 | Permalink

    参考にさせてもらってOGPを導入しました!
    よくまとまっていてわかりやすかったです。ありがとうございました。

    • admin
      2013/02/11 - 00:36 | Permalink

      そうめいさん。
      当ブログを参考にしていただきありがとうございます。
      今後ともよろしくお願いいたします。
      Forest of Memory

  • Pingback: Open Graph Pro(WordPressプラグイン)を導入してみました。 | 週刊社長力

  • Pingback: WordPressのプラグイン「Open Graph Pro」を使用してみる | ローカルブロガーのメモ帳

  • Pingback: OGPやファンページの作成、更新情報の告知などFaceBookのインフラを整備してみました | GarretCafe

  • Pingback: WordpressにOGP(Open Graph Pro)を設定してみた。 | 3分で「出来る!」元パソコンショップの店員が教えるパソコンの使い方講座

  • Pingback: OGPとは | 富山 listingroom

  • Pingback: ▼今日でGWもやっと終わります。 | いしげドッと混むブログ

  • Pingback: Open Graph Pro Facebookでイイね広げてもらう為のプラグイン | EDA-MEMO

  • 2013/07/25 - 20:11 | Permalink

    とてもわかりやすいマニュアルをありがとうございます!
    OGPに関して幾つか参考にしたサイトの中で、
    一番見やすかったです。

    マニュアルの通りに操作したのですが、
    デバッガーでチェックすると、
    「修正する必要があるエラー」が1つ出てしまいます。

    More Than One OG URL Specified: Object at URL ‘http://mami-kazu.com/info’ of type ‘article’ is invalid because it specifies multiple ‘og:url’ values: http://mami-kazu.com/info, http://mami-kazu.com/info.

    何度も同じ様になってしまい、とても困っています。

    もし宜しければ、対処法を教えていただけませんか?

    • Forest_of_Memory
      2013/07/25 - 23:39 | Permalink

      miamikazuさん
      ブログを参考いただきありがとうございます。
      さて、mamikazuさんのデバッガーのエラーですが、
      確認したところ、どうもOGPが重複して動いているようです。

      http://mami-kazu.com/info/
      上記のページのソースを確認いただくと
      8行目から

  • 2013/07/26 - 02:11 | Permalink

    Forest_of_Memoryさん☆

    お返事いただきありがとうございました!

    調べて下さったのですね!とても感謝しています!

    あのあと、主人に見てもらって色々試したところ…

    画面が真っ白になり、ログインすら出来なくなっていまいました(TT)

    終日費やして制作していたブログが、
    水の泡になってしまい、途方に暮れています。

    何とか主人に復元してもらえたら、

    Forest_of_Memoryさんにいただいた助言を活かして、

    完成させれたらよいなと思っています。

    夫婦そろってPC音痴なので、

    こんな時は本当に困ってしまいます…><

    この度はありがとうございましたm(_ _)m

    mamikazuより☆

  • 2013/07/26 - 02:40 | Permalink

    Forest_of_Memoryさん☆

    何度もすみません、ご報告をと思いましてコメントいたします。

    結局復元はあきらめて、
    0から新しく作り直す事にしました。

    これから作りますが、
    Forest_of_Memoryさんにいただいた助言を活かして頑張ってみます!

    ありがとうございました!

    また、何かありましたら、
    是非宜しくお願い致しますm(_ _)m

    mamikazuより☆

  • 2013/07/26 - 03:04 | Permalink

    Forest_of_Memoryさん☆

    本当に何度もスミマセン(><)

    心機一転で頑張ろうと思いましたが…

    Open Graph Pro以外、
    何もプラグインを入れていないのに、
    同じエラーメッセージが出てしまいます。

    More Than One OG URL Specified: Object at URL ‘http://mami-kazu.com/LOVE’ of type ‘article’ is invalid because it specifies multiple ‘og:url’ values: http://mami-kazu.com/LOVE, http://mami-kazu.com/LOVE.

    ソースを見る事も出来ない状態にあります。。

    一体どのようにすれば、
    正常に設置できるのでしょうか・・・

    もし何か手だてがあれば、
    ご指導いただけますでしょうか?

    お願いばかりで、
    大変もうしわけございません(><)

    mamikazuより☆

  • Pingback: OGPとは | Chaos life Games

  • Pingback: Open Graph Pro Facebookでイイね広げてもらう為のプラグイン | EDA-MEMO

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です