ハイリンクス

WordPressのプラグインやオススメツール・ソフト、その他実際に使ってみて「コレだ!」というものをご紹介

【Open Graph Pro】facebookからのアクセス数がグン↑と上がるWordPressプラグイン

      2014/03/26

131206_1901

Open Graph ProはOpen Graph Protocolという、facebookはもちろんのことgoogle+、mixiなどのソーシャルメディアで使用されている共通の決まり事です。・・・書いているボクはよく分かりませんorz

スポンサーリンク

OGPを設定しないでfacebookに記事を投稿したり、「いいね!」ボタンを押したとき、通常は文章がズラーっと書いてあってなんだか殺伐とした感じなんですけど、OGPを設定するとこうなります。

131206_1902

このようにとっても見やすくなりますよね?特に画像が表示されるので視覚的によくなり、クリックされる率が高まります。

もちろんサイトや記事によりますけど、facebookからのアクセスが2倍近く上昇したということもありますので是非とも導入しておきたいプラグインです。

 

ちなみにこのプラグイン2011/06/20のアップデート以降はまったくアップデートされていませんが、未だに使用しているユーザーが多いのが特徴的です。

 

このOpen Graph Proを使用するには、
admin IDとapplication ID(App ID)の取得が必要です。

 

OPGに必要なID

admin IDの取得方法

http://www.facebook.com/facebookユーザー名
の.com/以降のfacebookユーザー名を

131206_1909

http://graph.facebook.com/
の最後に付け加えます。

131206_2005

それをブラウザで表示させて下さい。
そうすると下記のような画面が現れます。

131206_2004

2行目にあなたのadmin IDが表示されます。 これでOKなのだ!

 

app IDの取得方法

app IDはFacebook Developersへのアクセスして「facebookのアプリ」の登録をするとゲットできます。

こちらのページから登録をして下さい。
https://developers.facebook.com/apps

 

左上の「Register as a Developer」をクリック

131206_1903

 

ボックスにチェックを入れて「続行」をクリック

131206_1904

 

何もチェックをいれないでOKなので、「続行」をクリック131206_1905

 

「完了」をクリック。とりあえずこれでfacebook Developerへの登録はOK。

131206_1906

 

「新しいアプリを作成」をクリック

131206_1907

 

アプリ名を入力します。ここではサイト名の「Hi-Linx.net」を入力しました。「続行」をクリック

131206_1910

 

アカウントを認証するために、携帯キャリアのメールアドレス、またはクレジットカードが必要となります。
ボクは携帯のメルアドがないのでクレジットでの認証を完了しました。
2台持ちで1台はメール機能が一切ないwillcomの携帯とsimフリーのスマホのためです。

131206_2001

 

クレジットカード認証ならクレジットカード情報を入力して、「追加」をクリック

131206_2102

 

クッソ見にくい(笑)文字を入力して、「続行」をクリック

131206_2103

 

Facebookでログインが可能なウェブサイトに自身のサイトを入力します。このとき末尾に/(スラッシュ)を入れましょう。

上部に記載されているのが、待ち焦がれ、欲しかったApp IDです笑

「変更を保存」をクリック

131206_2104

 

この表示が出たらすべてが完了しました!!
これでOpen Graph Proを使用することが出来るadmin IDとapp IDがゲット出来ました!!!

131206_2105

Open Graph Proのインストール

1, 管理画面「プラグイン」>「新規追加」
2, 「Open Graph Pro」で検索
3, 「今すぐインストール」をクリック
4, 「プラグインを有効化」をクリック

 

Open Graph Proの設定方法

管理画面「設定」>「Open Graph Pro」

 

赤枠で囲ったところに今回取得したAdmin UserとApplication IDを入力しましょう。できることなら画像のURLも記入しておきましょう。

「変更を保存」をクリックして設定は終了です。

131206_2101

 

デバックをチェック

すべての設定が終わったらメタタグがOGPに出力されているか?をチェックしておきましょう。何気にエラーが出ている可能性もあるのでお気をつけて下さい。
https://developers.facebook.com/tools/debug/

 

OGPが設定されているか自身のサイトのURLを入力しましょう。「デバッグ」をクリック

131208_1901

 

問題なければこんな感じに表示されます。

131208_2004

131208_2005

 

もし仮にWordbookerを導入している場合は下記の項目にチェックを入れておきましょう。これが入っていないとプラグインが競合してしまい。エラーが表示されてしまいます。

131206_2106

 

最後にソースを確認しておきましょう。

 

OGP画像シミュレータ

画像を記事中にアップするとFacebookのタイムライン上に表示されますよね?でもその画像がなんだか変なところでトリミングされているってことありませんか?

そんなとき事前にチェックしてくれるWeb Serviceがあります。それがOGP画像シミュレータ。
http://ogimage.tsmallfield.com/

140326_2301

使い方はいたって簡単で画像をドラッグ・アンド・ドロップするだけでタイムライン上でどのように表示されるか一発で分かります。

「大事な部分が消えてる!」ということが事前に分かるので結構便利ですよ

 

まとめ

最近では、ソーシャルメディアを通じてのサイトへのアクセス数が多くなってきています。その際にOGPに対応させたサイトだとより多くのアクセスが見込めるので、すぐにでも導入したほうがいいと思います。

WordPressの更新記事をWordbookerを使用してfacebookに自動投稿している場合はWordbooker設定画面の下記のボックスにチェックを入れておきましょう。これを入れておかないとOGPとWordbooker両方で競合してしまう場合があります。

 

一度App IDを取得すると他のWordPressでも使用できるのでどんどんサイトのOGP化を進めておきましょう!!

 - Facebook, WordPress Plugins, ウェブサービス


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

Message

メールアドレスが公開されることはありません。

関連記事

140407_2101
【Code Snippets】functions.phpをコード毎に管理可能なWordPressプラグイン

Code Snippetsはfunctions.phpをコード毎に管理可能なWo …

131116_2201
【WordTwit Twitter Plugin】更新記事を自動でTwitterに投稿するWordPressプラグイン

WordPressでブログ・サイトを運営していて、新しい記事更新した際にTwit …

140309_1901
【TablePress】HTMLの知識がなくてもサクッと表が作成できるWordPressプラグイン

TablePressはHTMLの知識がなくてもサクッと表が作成できるWordPr …

131125_2302
facebookページの作成・削除方法

facebookページはSNSサービスであるfacebookにアカウントを所有し …

131225_2101
【Akismet】ウザいコメントスパムを遮断するWordPressプラグイン

Akismetはコメントスパムを遮断するWordPress初期設定時にプリインス …

131119_1901
【No Self Pings】内部リンクがコメントにならないWordPressプラグイン

No Self Pingsは自分のサイトから内部リンクを貼ったときに自然に起こる …

131122_1901
Feedly登録用ボタンを作成しWordPress・ブログに設置する方法!

Google Readerが終了してからはいくつかのRSSサービスを試してみまし …

medium_479228716
疲れ目を予防するブルーライト対策!無料・有料でできるブルーライトカット方法

パソコンモニターなどのデジタル機械からから発せられるブルーライトを浴びることで目 …

131114_2301
【EWWW Image Optimizer】画像を圧縮・最適化するWordPressプラグイン

「EWWW Image Optimizer」はサイトで使用している画像を圧縮して …

131123_1301
【WordPress Ping Optimizer】記事更新時にPing送信しないWordPressプラグイン

WordPress Ping Optimizerは記事更新することで送信されてし …