Word pressでogpを自由自在にコントロール!
-
Upload
sho-shirasaka -
Category
Technology
-
view
4.824 -
download
2
description
Transcript of 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で作ってます
その後
「人狼」を世に広めるための会社株式会社人狼設立代表取締役に就任
もちろん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ライフを!
ありがとうございました