ワードプレス関連の役立つ情報をまとめています。WordPressプラグイン、WordPressテーマ(テンプレート)の情報をわかりやすく紹介します。

Open Graph Pro - OGPに対応したメタタグを出力するWordPressプラグイン

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

記事公開 2013.06.11

最終更新 2016.12.31

Open Graph Proは、OGP(Open Graph Protocol)に対応したメタタグを自動的に出力してくれるプラグインです。WordPressをFacebookなどのソーシャルメディアに連携させるのに利用すると便利です。

Facebookのアカウントを持つユーザーがいいね!ボタン押した際や、Facebookのタイムラインに更新情報を投稿する際の文言や画像を最適化でき、ソーシャルメディア経由のアクセスを増やす効果が期待出来ます。

尚、このプラグインは、OGPに対応したメタタグを出力するだけです。Facebookのタイムラインに更新情報を投稿する機能はありません。Facebookのタイムラインに更新情報を投稿する場合は、Facebook公式のプラグインなどのプラグインを利用する必要があります。

追記

この記事の内容が一部古くなっています。

OGP(Open Graph Protocol)に対応したメタタグを出力できるWPプラグインは他にも幾つかあります。SEO対策設定を管理するプラグインにもOGPのメタタグを出力する機能が搭載されています。参考情報になりますが、下記のWPプラグインでOGPのメタタグを出力した方が効率的です。

はじめに

このプラグインが優れている点

  1. OGP(Open Graph Protocol)に対応したメタタグを自動的に出力出来ます。
  2. Facebookなどで記事を共有した際に、サムネイル画像が表示されるようになり、視覚的にわかりやすくなります。
  3. Facebookなどのソーシャルメディア経由のアクセス数を増やしやすくなります。
  4. 他のプラグインと処理がぶつかりません。他のプラグインと併用しやすいです。

OGP(Open Graph Protocol)とは?

OGP(Open Graph Protocol)とは、Facebook、mixi、greeなどのソーシャルメディアで利用されている共通の仕様(決まり事)のことです。ソーシャルメディア連携において、非常に重要な役割を持っています。

OGPの役割を一言で説明すると、「このWebページは、こんな内容です。」とソーシャルメディアに対して、宣言する役割があります。ソーシャルメディアに対しての最適化をするためのメタタグを出力すると考えてもよいでしょう。

例えば、Facebookアカウントを持っているユーザーがFacebookのいいね!ボタンを押した際に、「ページタイトル、サイト説明、記事サムネイル、記事URL」がわかりやすく表示されるようになります。特に記事のサムネイル画像が表示されるようになり、何の記事を共有したかが一目でわかりやすくなります。

導入前と導入後の比較

プラグインを導入すると、ページタイトル・サイト説明・記事サムネイル・記事URLがわかりやすく表示されるようになります。Facebookのいいね!ボタンを押した際の表示やタイムラインに自動投稿した際の表示が最適化されます。

Open Graph Pro 導入前

hootsuite無料版を利用して投稿した場合

ogp_img_before

Open Graph Pro 導入後

Wordbooker + Open Graph Proを利用して投稿した場合

ogp_img_after

Open Graph Pro導入後のソースコードの例

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta property="og:title" content="優良WordPressプラグイン51選、最初にインストールしておくと超便利!(2013年版)" />
<meta property="og:site_name" content="ネタワン" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://netaone.com/wp/wordpress-plugin-first/" />
<meta property="og:image" content="http://netaone.com/wp-content/uploads/2013/03/wordpresslogo-e1367355053944-150x150.gif" />
<meta property="fb:admins" content="100005701920335" />
<meta property="fb:app_id" content="591041614246962" />
<meta name="description" content="優良WordPressプラグイン51選、最初にインストールしておくと超便利!(2013年版)" />
<meta name="keywords" content="plugin,wordpress,おすすめ,プラグイン,ワードプレス,便利,拡張" />

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「Open Graph Pro」で検索
  2. WordPress.org からダウンロード

Facebook Developersへの登録が必要

Open Graph Proを利用するには、FacebookのユーザーIDとアプリケーションID(App ID)が必要です。アプリケーションID(App ID)は、Facebook DevelopersにFacebookアプリの登録をするとアプリケーションID(App ID)が発行されます。まずはあなたのWebサイトを登録して下さい。注意点としては、登録画面は全て英語なので、英語に慣れていないと登録が難しいです。このプラグインを利用する上で、一番の難関がアプリケーションIDの登録です。

登録ページ

Facebook Developers

FacebookのユーザーIDの確認方法

もし、あなたのFacebookユーザーIDがわからなければ、FacebookアカウントのURLに表示されている「あなたのFacebookユーザーネーム」をコピーし、「http://graph.facebook.com/」のURLの最後に付け足してブラウザで表示して下さい。そうすると、あなたのFacebookのユーザーIDがわかります。

手順1: あなたのFacebookユーザーネームをコピーする
http://www.facebook.com/Facebookユーザーネーム

手順2: 下記URLの最後に付け加える
http://graph.facebook.com/Facebookユーザーネーム

手順3: 画面の2行目に表示される数字があなたのFacebookユーザーIDです

{
   "id": "100000000000000", ←数字があなたのユーザーID
   "name": "sample",
   "first_name": "sample",
   "last_name": "sample",
   "link": "http://www.facebook.com/ユーザーネーム",
   "username": "sample",
   "gender": "male",
   "locale": "ja_JP"
}

管理画面の設定

管理画面でFacebookのユーザーIDとアプリケーションID(App ID)を設定します。初期設定の画像は登録は任意です。必要に応じて設定しましょう。

opg_img02

まとめ

ソーシャルメディア向けの最適化は非常に重要です。OGPに対応させるか否かでソーシャルメディア経由のアクセス数が大きく変わってきます。ソーシャルメディア経由のアクセスを増やしたい方は、必ず導入しておきましょう。

スポンサーリンク

最後までお読み頂き、ありがとうございます

この記事の内容が役に立ったと思ったらソーシャルメディアで共有してね。

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

RSSフィードを購読する

follow us in feedly

関連記事

ソーシャルメディア & RSS

Twitter Facebook Google+ RSSフィード

スポンサーリンク

ワードプレステーマTCD

ネタワンでも利用しているTCDのWordPressテーマを紹介します。様々な種類のテーマが販売されています。

CORE(TCD027)

WordPressテーマ「CORE (TCD027)」

マガジンスタイルのメディアサイト(ポータルサイト)を構築できるWordPressテーマ


ワードプレステーマTCDの詳細&レビューはこちら