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

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

自己紹介

株式会社ピチカートデザイン代表取締役白坂翔 SHO SHIRASAKA

経歴

元自衛隊です

8年前の私

元ホストです

5年前の私

ホストで稼いだ金で

WEB制作会社を設立

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

もちろんWordPressで作ってます

その「84ism」が

WordPressサイトコンテスト2010

大賞受賞！

WordPress コンテストで「大賞受賞」

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

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

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

「なるほどー。WordPressがお得意なんですね」

となればもう勝ちです

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

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

2011年9月渋谷初のコワーキングスペース

JELLYJELLYCAFEオープン

その後

ボードゲーマーのためのスペース「ボードゲームカフェ」オープン

その後

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

このようなステキな 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:image og:title og:description

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:image og:title og:description

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、設定できてるか確認「デバッガー facebook」で検索https://developers.facebook.com/tools/debug

OGP、設定できてるか確認 URLを入力して「デバッグ」をクリックhttps://developers.facebook.com/tools/debug

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、どんなのにするべき？ちゃんと設定されてない悪い例（10個）と、確実にクリック率のあがるOGP画像のご提案

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

昨日の夜の私の投稿

DIGITAL CUBEが不適切不適切

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

例：MIXIの場合

ロゴに変更

例：クックパッドの場合

ロゴに変更

例：WordPressの場合

NAOKOさんに変更

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

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

例：マクドナルドの場合

ドナルドに変更

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

ステルス戦闘機に変更

例：IPHONE5に並ぶ人の記事

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

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

元カレに変更

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

尻に変更

このように、最適なOGP画像を設定することで、 CTR（クリック率）が4∼12倍アップ致します！（弊社予想）

最適なOGP画像を設定して、快適なWordPressライフを！

ありがとうございました

http://shirasaka.tv	525
http://blog.junkword.net	420
http://justfly.idv.tw	282
http://webmemo.biz	201
http://flavors.me	4
http://webcache.googleusercontent.com	1

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

by Sho Shirasaka on Sep 14, 2012

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 1,433

Statistics

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