SHO SHIRASAKA

WordPressでOGPを自由自在にコントロール！

自己紹介

白坂 翔SHO SHIRASAKA

株式会社ピチカートデザイン代表取締役

経歴

元自衛隊です

8年前の私

元ホストです

5年前の私

ホストで稼いだ金で

WEB制作会社を設立

2010年 WEBマガジン「84ism」創刊編集長に就任

もちろんWordPressで作ってます

その「84ism」が

WordPressサイトコンテスト2010

大賞 受賞！

WordPressコンテストで

「大賞受賞」

強力な営業トークゲット！

営業トークの一部公開いたします

「弊社CMSの案件多くやっておりまして、中でもWordPressは得意としております。実績はですね、このような形で様々な業種さんのサイト制作に携わらさせていただきました。あ、特にですね、この84ismというサイトに関してはですね、WordPressのサイトコンテストというもので大賞、1等賞を受賞したんですよ。」

「なるほどー。WordPressが

お得意なんですね」

となればもう勝ちです

このような手口を使い、WordPressで飯を食べてます

WEB業界以外にも手を出しました

2011年9月渋谷初の

コワーキングスペース

JELLY JELLY CAFEオープン

もちろんWordPressで作ってます

その後

ボードゲーマーのためのスペース

「ボードゲームカフェ」オープン

もちろんWordPressで作ってます

その後

「人狼」を世に広めるための会社株式会社人狼設立代表取締役に就任

もちろんWordPressで作ってます

このようなステキなWordPressの実績が多数ある

株式会社ピチカートデザインでは

WordPressを使ったWEB制作の

ご相談をお待ちしております！

ご清聴ありがとうございました

AGENDA1．OGPとは？2．なぜOGP?3．設定してみよう4．設定できてるか確認してみよう5．簡単な設定方法6．便利な設定方法7．実例とご提案

OGPとは？

OGPとは？

Open Graph Protocolの略

OGPとは？

そのページにどんな情報が載っているかを記述する方法

OGPとは？

FacebookなどのSNSでサイトを紹介する際に、どういう文言＆画像で

表現するか？を指定できる

なぜ、OGP？

なぜ、OGP？

OGPで適切な文字・画像を指定することで、リンク先へスマートに誘導できます

なぜ、OGP？

適切なOGPを設定することでクリック率アップ！

なぜ、OGP？

アクセス数 増加につながります！

OGPを設定してみよう

OGPを設定してみよう<meta property="og:type" content="blog" /><meta property="og:title" content="【観てない人向けネタバレ】「桐島、部活やめるってよ」観てきた ｜ しらさかブログZ" /><meta property="og:locale" content="ja_JP" /><meta property="og:site_name" content="しらさかブログ" /><meta property="og:image" content="http://shirasaka.tv/img/shirasakablog.png" /><meta property="og:description" content="しらさかしょうの書いてるブログ" /><meta property="fb:admins" content="" /><meta property="fb:app_id" content="">

OGPを設定してみよう<meta property="og:type" content="blog" /><meta property="og:title" content="【観てない人向けネタバレ】「桐島、部活やめるってよ」観てきた ｜ しらさかブログZ" /><meta property="og:locale" content="ja_JP" /><meta property="og:site_name" content="しらさかブログ" /><meta property="og:image" content="http://shirasaka.tv/img/shirasakablog.png" /><meta property="og:description" content="しらさかしょうの書いてるブログ" /><meta property="fb:admins" content="" /><meta property="fb:app_id" content="">

複雑！

OGPを設定してみよう

og:title

og:description

og:image

OGPを設定してみよう<meta property="og:type" content="blog" /><meta property="og:title" content="【観てない人向けネタバレ】「桐島、部活やめるってよ」観てきた ｜ しらさかブログZ" /><meta property="og:locale" content="ja_JP" /><meta property="og:site_name" content="しらさかブログ" /><meta property="og:image" content="http://shirasaka.tv/img/shirasakablog.png" /><meta property="og:description" content="しらさかしょうの書いてるブログ" /><meta property="fb:admins" content="" /><meta property="fb:app_id" content="">

OGPを設定してみよう<meta property="og:type" content="blog" /><meta property="og:title" content="【観てない人向けネタバレ】「桐島、部活やめるってよ」観てきた ｜ しらさかブログZ" /><meta property="og:locale" content="ja_JP" /><meta property="og:site_name" content="しらさかブログ" /><meta property="og:image" content="http://shirasaka.tv/img/shirasakablog.png" /><meta property="og:description" content="しらさかしょうの書いてるブログ" /><meta property="fb:admins" content="" /><meta property="fb:app_id" content="">

OGPを設定してみよう<meta property="og:type" content="blog" /><meta property="og:title" content="【観てない人向けネタバレ】「桐島、部活やめるってよ」観てきた ｜ しらさかブログZ" /><meta property="og:locale" content="ja_JP" /><meta property="og:site_name" content="しらさかブログ" /><meta property="og:image" content="http://shirasaka.tv/img/shirasakablog.png" /><meta property="og:description" content="しらさかしょうの書いてるブログ" /><meta property="fb:admins" content="" /><meta property="fb:app_id" content="">

表示に関係あるのは3つ！

OGPを設定してみよう

og:title

og:description

og:image

OGPを設定してみよう<meta property="og:type" content="blog" /><meta property="og:title" content="【観てない人向けネタバレ】「桐島、部活やめるってよ」観てきた ｜ しらさかブログZ" /><meta property="og:locale" content="ja_JP" /><meta property="og:site_name" content="しらさかブログ" /><meta property="og:image" content="http://shirasaka.tv/img/shirasakablog.png" /><meta property="og:description" content="しらさかしょうの書いてるブログ" /><meta property="fb:admins" content="" /><meta property="fb:app_id" content="">

OGPを設定してみよう<meta property="og:type" content="blog" /><meta property="og:title" content="【観てない人向けネタバレ】「桐島、部活やめるってよ」観てきた ｜ しらさかブログZ" /><meta property="og:locale" content="ja_JP" /><meta property="og:site_name" content="しらさかブログ" /><meta property="og:image" content="http://shirasaka.tv/img/shirasakablog.png" /><meta property="og:description" content="しらさかしょうの書いてるブログ" /> <meta property="fb:admins" content="" /><meta property="fb:app_id" content="">

OGPを設定してみよう<meta property="og:type" content="blog" /><meta property="og:title" content="【観てない人向けネタバレ】「桐島、部活やめるってよ」観てきた ｜ しらさかブログZ" /><meta property="og:locale" content="ja_JP" /><meta property="og:site_name" content="しらさかブログ" /><meta property="og:image" content="http://shirasaka.tv/img/shirasakablog.png" /><meta property="og:description" content="しらさかしょうの書いてるブログ" /><meta property="fb:admins" content="" /><meta property="fb:app_id" content="">

OGP画像さえ設定すればOK！

OGPを設定してみよう

画像サイズは200×200px以上が推奨されています。（2012年9月現在）

OGPを設定してみよう

WordPressで設定header.phpの編集画面

OGPを設定してみようheader.phpの編集画面内<head>と</head>の間に<meta property="og:image" content="http://OGP画像のURL" />

を挿入するだけ

OGP、設定できてるか確認

OGP、設定できてるか確認

https://developers.facebook.com/tools/debug

「デバッガー facebook」で検索

OGP、設定できてるか確認

https://developers.facebook.com/tools/debug

「デバッグ」をクリックURLを入力して

OGP、設定できてるか確認

設定が確認できました

OGPの簡単な設定方法

OGPの簡単な設定方法

プラグインを利用

OGPの簡単な設定方法

プラグインを利用

・WP-OGP・Open Graph Pro

OGPの簡単な設定方法

プラグイン、本当に簡単？

OGPの簡単な設定方法

プラグイン、設定ページが英語だったり、アプリ登録が必要だったり、

バグが多かったりで、うまく設定できない！

OGPの簡単な設定方法

全然簡単じゃない！

OGPの簡単な設定方法

そんなあなたは、プラグインは使わずに

OGPの簡単な設定方法

<head>と</head>の間に<meta property="og:image" content="http://OGP画像のURL" />

OGPの便利な設定方法

OGPの便利な設定方法

これでOGP画像も設定できたし完璧！

OGPの便利な設定方法

本当にそうですか？

OGPの便利な設定方法

OGPの便利な設定方法毎回、同じ画像

OGPの便利な設定方法

毎回同じ画像が表示されるのは寂しい！

OGPの便利な設定方法

でも、毎回設定するのも大変だし……！

OGPの便利な設定方法

そんなあなたに最高の解決策を

ご提案いたします！

OGPの便利な設定方法

名付けて

OGPの便利な設定方法

「普段はいつものノーマル画像を指定しておいて、ここぞという記事の時だけその記事用の画像を簡単に指定しちゃう大作戦！」

OGPの便利な設定方法

アイキャッチ機能を使います

OGPの便利な設定方法指定したい画像を選んで、

「アイキャッチ画像として使用」を クリックするだけ！

OGPの便利な設定方法

しかし

OGPの便利な設定方法

この機能を使うと、毎回アイキャッチ画像を

設定しなければいけなくなるので、

OGPの便利な設定方法

アイキャッチが無い時の画像も設定してあげます。

OGPの便利な設定方法

そのソースがこちらです。

OGPの便利な設定方法

header.php内の<head>と</head>の間に

挿入してください。

OGPの便利な設定方法

このソースはブログで公開しています

OGPの便利な設定方法

「OGP しらさか」で検索

OGP、どんなのにするべき？

OGP、どんなのにするべき？

ちゃんと設定されてる良い例

（4つ）

OGP、どんなのにするべき？

OGP、どんなのにするべき？

OGP、どんなのにするべき？

ちゃんと設定されてない悪い例（10個）と、

確実にクリック率のあがるOGP画像のご提案

OGP、どんなのにするべき？

例えば

昨日の夜の私の投稿

DIGITAL CUBEが不適切

不適切

クリック率が4倍ほどアップ！（弊社予想）

理想的OGP！

例：MIXIの場合

ロゴに変更

例：クックパッドの場合

ロゴに変更

例：WordPressの場合

NAOKOさんに変更

例：ほぼ日刊イトイ新聞の場合

糸井重里の奥さんの写真に変更

例：マクドナルドの場合

ドナルドに変更

例：キングソフト株式会社の場合

ステルス戦闘機に変更

例：IPHONE5に並ぶ人の記事

ビッグウェーブさんに変更

例：上戸彩 結婚記事の場合

元カレに変更

例：あっちゃん泥酔の記事

尻に変更

このように、最適なOGP画像を設定することで、

CTR（クリック率）が4～12倍アップ致します！

（弊社予想）

最適なOGP画像を設定して、快適な

WordPressライフを！

ありがとうございました