OpenGraphPro設定を最適化してフェイスブック拡散を起こせ!

サイトヘのアクセス増加に欠かせないのは、
SNSを利用した、記事の『拡散』ですが、
この 『Open Graph Pro』(以下、OGP)は、
フェイスブックとの連携を強化させる為のプラグインです。

OpenGraphProを設定する事によって、
フェイスブック上に表示される文章や画像が正しく表示され、
「いいね!」をクリックしたユーザーの友達のニュースフィードにも
記事を表示させ、爆発的な拡散を起こす事が可能となります。

Open Graph Pro

 Open Graph Proとは?

 ただ、いいね!を設置し、押してもらうだけでは全く意味がない!

今やほとんどのサイトに『いいね!』ボタンが設置されていますが、
Open Graph Proを設定していないサイトでは、まったく効果がありません。

というのも、
Open Graph Proが未設定のサイトでは、
記事ページに設置している『いいね!』をクリックしてもらっても
『いいね!』をクリックした本人のフィードにしか表示されません。
つまり、いいね!を押した本人にしかわからないのです。

2014年3月にフェイスブックが発表した日本での利用者は
すでに2000万人を超えています。

これだけの利用者がいるフェイスブック市場を
最大限に活かし、爆発的な拡散効果を発揮する為には、
記事に設置した『いいね!』ボタンをクリックしてくれた人の
『友達のニュースフィード』にも、記事を表示させる事にあります。

 OpenGraphProを設定する事で、変わること。

  1. 記事内の「いいね!」を押してくれたフェイスブックユーザーの
    友達のニュースフィードにも、記事が表示されるようになる。
  2.  

  3. ニュースフィードに表示される文章や画像が適切に表示される。

org設定後

上の画像はORG設定の前後を見比べています。
画像内の、赤枠が記事タイトル、黄色枠が記事のディスクリプションとなっています。
この画像からわかるように、ORG設定前では、記事の内容については全くわかりません。
サイムネイル画像も、記事とはまったく関係のない画像が表示されています。

これでは、せっかく『いいね!』をもらっても、拡散されにくいのは、
誰の目にも見えてわかると思います。

記事タイトル、ディスクリプションについてはこちらの記事で解説しています。
 愛されるサイトタイトル付け方のコツ
 タイトルとdescriptionの重要性

 Open Graph Proのインストール

それでは、OGPをインストールしていきましょう。
ダッシュボードのプラグインからインストール出来ます。
新規追加 ⇒ Open Graph Pro で検索します。

ogpインストール

インストール完了後、有効化します。

 Open Graph Proの設定

ダッシュボードの設定 ⇒ Open Graph Pro へ

   open graph pro設定

  1. Set Object Type to の部分は 『Blog』を選択します。
  2. フェイスブック上で表示させたい画像を指定します。
    サイトにあったサムネイル画像を自分で選び、
    サーバー(サイト上)にアップした画像のURLを入力します。
    推奨サイズは 1500 X 1500 以上です。

    open graph pro設定

  3. Admin User(s)には『Admin ID』を入力。
  4. Application ID には『Application ID』を入力。

『admin ID』と『Application ID』を記載して変更を保存します。
この2つの ID のに取得に関しては、次項で解説しています。

この4つの項目を入力したら『変更を保存』をクリックします。

 Facebookで『admin id』の取得

Admin id を取得する為にはフェイスブックアカウントが必要です。
まだフェイスブックを始めていないという場合は、これを機に登録してみましょう。

 ファイスブックログインページ

フェイスブックにログインし、
ご自身の個人ページにアクセスします。

フェイスブックアプリ作成

URL窓に表示されている画像赤枠の部分のスラッグ(あなたのID)
を確認し、『あなたのID』の部分をコピーします。

コピーしたのスラッグ(あなたのID)を
以下のURLの『あなたのID』部分にペーストし(入力し)アクセスします。

http://graph.facebook.com/あなたのID

以下の画像のように表示されます。
画像赤枠部分に表示されている『数値』が『admin id』となります。

admin idの確認

 前項の3に取得した『Admin id』を入力し『変更を保存』します。

 Facebookアプリの作成

続いて、『Application ID』を取得する為に、
開発者ページからFacebookアプリの作成をします。
(フェイスブックにログインする必要があります。)

 Facebook開発者ページ

上のリンクから開発者ページにアクセスします。

Facebookアプリ作成

右上にある『+ Add a New App』をクリックします。

Facebookアプリ作成

新たな画面が表示されるので、
右端のアイコン『ウェブサイト』をクリックします。

Facebookアプリ作成

画面が変わったら、

  1. アプリ名を入力します。(自由にきめられます)
  2. 『Create New Facebook App ID』をクリックします。

Facebookアプリ作成

カテゴリーを選択して(ここではビジネスを選択しました)
『Create App ID』をクリックします。

Facebookアプリ作成

画面が変わったら、画面右上の『Skip Quick Start』をクリック。
ダッシュボード(管理画面)に切り替わります。

フェイスブックアプリ作成

ダッシュボード左のメニューから
『Settings』をクリックします。

Facebookアプリ作成

  1. 『Basic』が選択されていることを確認して、
  2. 『App Domeins』にサイトのドメイン名を入力します。http://は要りません。
  3. 『Site URL』にサイトアドレスを http://から入力します。

入力が終わりましたら、
画面右下の『Save Changes』をクリックして保存します。

これでFacebookアプリ作成が終了、
Application ID が取得出来ました。

facebook application ID

Application ID はダッシュボードから確認が出来ます。
赤枠部分の『APP ID』の数値を
 前項のOpen Graph Pro プラグインの設定『Application ID』へ入力し
『変更を保存』をクリックします。

以上でOGPの設定が完了です!
本当に、長らくおつかれさまでした!!

 Open Graph Protocol(OGP)が正しく設定されているか確認する

HTMLのメタタグにOGPが正しく設定されているかを
デバッグツールで確認します。

 デバッグツールページ

上のリンクからデバッグツールページにアクセスします。

Facebookアプリ作成

設定したサイトURLを入力し、『Debug』をクリックします。
デバッグの結果が表示されます。

OGRデバッグ確認

ダッシュボードの設定のOpen Graph Proで設定した
サムネイル画像が表示されているかを確認します。

推奨サイズの 1500 X 1500 以下の場合は
エラーが 出る事があります。

最後に、設定したサイトにアクセスし、
ヘッダーのメタタグ部分にOGP情報が
記載されているのを確認してください。

 
この記事ではワードプレスに関しての内容ですが、
thmlで作成しているサイトでも同じ設定が必要となります。

htmlサイトでのOGPの設定に関してのご質問は
スカイプかメールで対応しております。
遠慮なくご連絡ください!

 スカイプでのご質問はこちらから

 ご質問はこちらのページです

 
 絶対に入れるべきwordpressのプラグイン一覧と使い方まとめ

 初心者でもわかるwordpressでサイト・ブログ開設と始め方

 

はじめの一歩

アフィリエイトとは?
自分の得意な事、好きな趣味などをブログやインターネットを使って発信し、広告収入を得てみませんか?特に難しい技術や知識はいりません。その方法を知っているか、知らないか。ただそれだけの差です。
実践して報酬を手にしよう!
こんなに簡単!広告収入の仕組みを解説します。実際にやってみてください。パソコンとインターネットがあれば、誰もが数万円のお小遣いならすぐ稼げます。一度限りの贅沢に使うか、継続した数万円の為に使うかは、自分次第。
チェンジザワールド!!
この先、このままでは不安。何かしなきゃと、わかってはいるけど、何もしていない。 何をしていいのか、わからない。 考えてるだけじゃなく、空いた時簡に収入を得れるように、今こそ、はじめの一歩を踏み出しましょう。

コメントを残す

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


*