Word pressでogpを自由自在にコントロール！

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を使った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="">

http://shirasaka.tv/img/shirasakablog.png



複雑！




og:title

og:description

og:image


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




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画像さえ設定すればOK！




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


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

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

を挿入するだけ

http://OGP

http://OGP

OGP、設定できてるか確認


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

「デバッガー facebook」で検索





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




設定が確認できました

OGPの簡単な設定方法


プラグインを利用


プラグインを利用

・WP-OGP・Open Graph Pro


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


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

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


全然簡単じゃない！


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


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

http://OGP

http://OGP

OGPの便利な設定方法


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


本当にそうですか？

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


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


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


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

ご提案いたします！


名付けて


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


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

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

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


しかし


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

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


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


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


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

挿入してください。


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


「OGP しらさか」で検索

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


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

（4つ）


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

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


例えば

昨日の夜の私の投稿

DIGITAL CUBEが不適切

不適切

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

理想的OGP！

例：MIXIの場合

ロゴに変更

例：クックパッドの場合

ロゴに変更

例：WordPressの場合

NAOKOさんに変更

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

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

例：マクドナルドの場合

ドナルドに変更

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

ステルス戦闘機に変更

例：IPHONE5に並ぶ人の記事

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

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

元カレに変更

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

尻に変更

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

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

（弊社予想）

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

WordPressライフを！

ありがとうございました

Word pressでogpを自由自在にコントロール！

Technology

Transcript of Word pressでogpを自由自在にコントロール！