701
回編集
差分
ナビゲーションに移動
検索に移動
ページの作成:「jetpackの最新版を入れると、OGP（オープン・グラフィック・プロトコル）が設定されるって話が結構インターネットに上がって…」
jetpackの最新版を入れると、OGP（オープン・グラフィック・プロトコル）が設定されるって話が結構インターネットに上がっていると思うんだよ。基本的にみな、jetpackのOGPは停めてしまって、ほかのアドインである「WP-OGP」や「Open Graph Pro」や「All in One SEO」を使って（ないしはテーマを手動で改造して）対応するって言うのがセオリーって感じなんだ。でも、せっかくjetpackに相応の機能があるんだから、それをちょこっといじって改造を最小限でOGP設定をいじってみたんだよ。
== jetpackのデフォルト設定 ==
僕の場合…jetpackで「パブリ共有」を有効にしてfacebookに共有させると、サイトアイコン（オレンジの四角に「社」の字のマーク）がドカン！とでかく出ちゃってたんだ。かっこわるい…。どうやら、jetpackの仕様では、サイトアイコンに設定したイメージが、共有したときのイメージになるみたいなんだよ。しかも、このサイトアイコンが512px以上ってなっているんで、ドカン！とでかく表示されちゃってたんだ。
== どうしたいのか？（と注意事項） ==
共有したときのアイコンは何がいいのか少し考えたんだ。僕の「とある社蓄の社員満足」だったら、テーマごとにアイキャッチ画像を変えているのでこれで行こうと思うんだ。ただ…ここで悩みが…テーマとしてSTINGER5を利用しているんだけど、その場合の推奨アイキャッチ画像サイズは150pxなんだよ。でもfacebookのアイキャッチ画像？サイズは200px以上じゃないと反映されない仕様らしいんだ。（参考サイト「ぼくのぶろぐ」参照）ってことで、手順として以下のようになるんだよ。
<ol>
<li>サイトアイコンを共有イメージに変更する</li>
<li>サイトアイコン用のイメージを200px以上に変更する</li>
</ol>
== サイトアイコンを共有イメージに変更する ==
基本的にjetpackをいじるんだけど…プラグインを直接いじるのはアップデートを考えると運用が煩雑なので…めったに更新されない（バージョン別に異なるテーマとして管理されている）STINGER5をいじっていくよ。（詳しくは良くわからないのだけど…）「jetpack_open_graph_tags」をフックして「fb_home_image」を呼び出すようにして、「og:image」の行だけ書き換える処理（だと思う）だよ。
<ol>
<li>WordPressのダッシュボードから「外観」→「テーマの編集」をクリックする。</li>
<li>画面右側のテンプレートの一覧から「テーマのための関数（functions.php）」をクリックする。</li>
<li>「<?php」の後ろに以下のコードを追加する
<source lang="php">
function fb_home_image( $tags ) {
unset( $tags['og:image'] );
if (is_single() or is_page()){//投稿記事か固定ページの場合
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (has_post_thumbnail()){//アイキャッチがある場合
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
$fb_home_img = $image[0];
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {
$fb_home_img = $imgurl[2];
} else {//画像が1つも無い場合
$fb_home_img = "【デフォルトで表示するイメージへのURL】";
}
} else {//投稿記事や固定ページ以外の場合（ホーム、カテゴリーなど）
$fb_home_img = "【デフォルトで表示するイメージへのURL】";
}
$tags['og:image'] = esc_url( $fb_home_img );
return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'fb_home_image' );
</source>
【デフォルトで表示するイメージへのURL】は必要に応じて変更してね。
</li>
<li>「ファイルを更新」ボタンをクリックする。</li>
</ol>
== サイトアイコン用のイメージを200px以上に変更する ==
いろいろやり方はあると思うんだ。ひとつは200px以上のサイトアイコンを新たに作成して、アップロードしてすべての記事のサイトアイコンの設定をコツコツ直す方法。でもこれ、記事数が少ないときはいいけど、多くなるとやりたくないよね。じゃ、新しく投稿する記事から200px以上のファイルを使用するって言うのも手だけど…メディアの中身が整理されてない感じになっちゃうと思うんだ。そこで、僕が「とあるＳＥの社員満足」から「とある社蓄の社員満足」に移行したときのツールを紹介しておくね。
[http://worklog.be/archives/2853 work.log - WordPressのアイキャッチ画像を一括で設定・変更するプラグイン]
データベースを直接変更しているらしいので、ちゃんとバックアップを取ってから使ってね。
== 参考サイト ==
[http://bocuno.com/blog/2013/04/facebook_og/ ぼくのぶろぐ - FacebookのOGP画像サイズはどんなサイズがいいの]<br/>
[http://jetpack.me/tag/open-graph/ Jetpack - Open Graph]<br/>
[http://webmemo.biz/wordpress/facebook-ogp-setting-seo/ あかめ女子のwebメモ - ［Å］私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由]<br/>
[http://worklog.be/archives/2853 work.log - WordPressのアイキャッチ画像を一括で設定・変更するプラグイン]
[[Category:WordPress]]
{{DISPLAYTITLE:jetpackの「パブリ共有」のOGPを少しいじってみる}}
== jetpackのデフォルト設定 ==
僕の場合…jetpackで「パブリ共有」を有効にしてfacebookに共有させると、サイトアイコン（オレンジの四角に「社」の字のマーク）がドカン！とでかく出ちゃってたんだ。かっこわるい…。どうやら、jetpackの仕様では、サイトアイコンに設定したイメージが、共有したときのイメージになるみたいなんだよ。しかも、このサイトアイコンが512px以上ってなっているんで、ドカン！とでかく表示されちゃってたんだ。
== どうしたいのか？（と注意事項） ==
共有したときのアイコンは何がいいのか少し考えたんだ。僕の「とある社蓄の社員満足」だったら、テーマごとにアイキャッチ画像を変えているのでこれで行こうと思うんだ。ただ…ここで悩みが…テーマとしてSTINGER5を利用しているんだけど、その場合の推奨アイキャッチ画像サイズは150pxなんだよ。でもfacebookのアイキャッチ画像？サイズは200px以上じゃないと反映されない仕様らしいんだ。（参考サイト「ぼくのぶろぐ」参照）ってことで、手順として以下のようになるんだよ。
<ol>
<li>サイトアイコンを共有イメージに変更する</li>
<li>サイトアイコン用のイメージを200px以上に変更する</li>
</ol>
== サイトアイコンを共有イメージに変更する ==
基本的にjetpackをいじるんだけど…プラグインを直接いじるのはアップデートを考えると運用が煩雑なので…めったに更新されない（バージョン別に異なるテーマとして管理されている）STINGER5をいじっていくよ。（詳しくは良くわからないのだけど…）「jetpack_open_graph_tags」をフックして「fb_home_image」を呼び出すようにして、「og:image」の行だけ書き換える処理（だと思う）だよ。
<ol>
<li>WordPressのダッシュボードから「外観」→「テーマの編集」をクリックする。</li>
<li>画面右側のテンプレートの一覧から「テーマのための関数（functions.php）」をクリックする。</li>
<li>「<?php」の後ろに以下のコードを追加する
<source lang="php">
function fb_home_image( $tags ) {
unset( $tags['og:image'] );
if (is_single() or is_page()){//投稿記事か固定ページの場合
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (has_post_thumbnail()){//アイキャッチがある場合
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
$fb_home_img = $image[0];
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {
$fb_home_img = $imgurl[2];
} else {//画像が1つも無い場合
$fb_home_img = "【デフォルトで表示するイメージへのURL】";
}
} else {//投稿記事や固定ページ以外の場合（ホーム、カテゴリーなど）
$fb_home_img = "【デフォルトで表示するイメージへのURL】";
}
$tags['og:image'] = esc_url( $fb_home_img );
return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'fb_home_image' );
</source>
【デフォルトで表示するイメージへのURL】は必要に応じて変更してね。
</li>
<li>「ファイルを更新」ボタンをクリックする。</li>
</ol>
== サイトアイコン用のイメージを200px以上に変更する ==
いろいろやり方はあると思うんだ。ひとつは200px以上のサイトアイコンを新たに作成して、アップロードしてすべての記事のサイトアイコンの設定をコツコツ直す方法。でもこれ、記事数が少ないときはいいけど、多くなるとやりたくないよね。じゃ、新しく投稿する記事から200px以上のファイルを使用するって言うのも手だけど…メディアの中身が整理されてない感じになっちゃうと思うんだ。そこで、僕が「とあるＳＥの社員満足」から「とある社蓄の社員満足」に移行したときのツールを紹介しておくね。
[http://worklog.be/archives/2853 work.log - WordPressのアイキャッチ画像を一括で設定・変更するプラグイン]
データベースを直接変更しているらしいので、ちゃんとバックアップを取ってから使ってね。
== 参考サイト ==
[http://bocuno.com/blog/2013/04/facebook_og/ ぼくのぶろぐ - FacebookのOGP画像サイズはどんなサイズがいいの]<br/>
[http://jetpack.me/tag/open-graph/ Jetpack - Open Graph]<br/>
[http://webmemo.biz/wordpress/facebook-ogp-setting-seo/ あかめ女子のwebメモ - ［Å］私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由]<br/>
[http://worklog.be/archives/2853 work.log - WordPressのアイキャッチ画像を一括で設定・変更するプラグイン]
[[Category:WordPress]]
{{DISPLAYTITLE:jetpackの「パブリ共有」のOGPを少しいじってみる}}
