新FacebookのOGPイメージサイズを調整する

Google+ Pinterest LinkedIn Tumblr +

2013年9月15日現在 携帯デバイスよりアクセスする事が多くあまり気にしていなかったのだが、PCでの表示も変わってる。
Facebook にシェアされたリンクページのサムネイル表示が小さいものと大きいものが混在している。

どういうものかというと

スクリーンショット 2013-09-15 21.52.52 スクリーンショット 2013-09-15 21.52.04スクリーンショット 2013-09-15 21.52.16 スクリーンショット 2013-09-15 21.49.06

いろいろなサイズが混在している。

リンク、いいね! シェアと条件が少しずつ違うのでそこのあたりも関係があるかも知れないが、せっかくであれば大きい方がいいですね。

そこで改めて調べてみると

FacebookDeveloper では

og:image
The URL of an image which is used in stories published about this object. We suggest that you give us an image of at least 200×200 pixels. However, bigger is better, so if you have a 1500×1500 image that you can use, please give it to us. We downsample and crop it for for people using smaller-resolution devices but will use it on a larger device. The larger this image is, the better engagement stories featuring it will get. (Note: image sizes must be no more than 5MB in size.) Note that you can include more than that one og:image in your object if you have more than one resolution available.

1500×1500….まぁできるだけ大きい正方形がいい。デバイスに合わせて調整するよ。
という事だと勝手に理解。

個人的解釈としては最新のworpressのTwentyThirtheenも最大1600pxという広大なデスクトップを想定している。これはスマートTVといわれる大きなパネルやmacのレティナディスプレイをはじめとする今のパネル表示を見据えてのことだろう。
ただし、現実問題として商品広告などのプロモーション用の単ページであればやるべき事だが、一般的なブログやWebページにそんな大きな画像や写真をOGPのイメージとして用意するわけにも、張り込むワケにもいかず。

逆にカメラ・写真関係のサイトやブログは逆に小さくする必要があるかも知れない。

データの容量も注意しなければいけない、テキストなど色数の少ないものはPNG
写真などはJPEG・・などなど

結論的に今現時の現実問題としてそのサイズの画像をいまさら準備することは難しい。

変更前までは150×150 だ 180Xx80 だ 200×200 が推奨といわれていた。

ただ、Facebookのイメージ表示は目に止まるしシェア・リンクのクリック率が違うことは周知の事実できるだけ対応しておくべきですね。

今回OGPのイメージの指定とWordPressのサムネイル設定などに変更を加えてみた

まずは、参考にさせていただいたサイトの中で2つほどご紹介。
ありがとうございました。

in the Looops
【Facebook仕様変更】あなたのサイトは大丈夫?リンク投稿の表示画像サイズが変更に

Sunday In The Park
FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。(スマホ対応!最新版)

Sunday In The Parkさんの画像表示のチェックには頭が下がりました。すばらしい!

今回の作業では表示されるイメージの縮小やサイズ表示による『見切れ』は許容するものとして作業しました。

理由は、投稿の度にいちいち考えながら画像を準備できない。という個人的意見

BLOG中心のWordpressではそうそう適切な画像を準備出来るとは限らないからですが、写真やイラストなどアーティスト系の方は逆に気を使うべき重要な点です。

Sunday In The Parkさんの導いた答えは

ノート - Page 1

468pxの正方形の中央にW468px,H245px この領域にみせたい画像や文章を配置したものがいい。

外側の枠はタイムラインなどで左右に分かれる表示の時にはきっちり表示される。

これ以上だとカットされる。

など、現時点で重要なポイントですね。

これを参考に取り入れてみたいと思います。

先程から現時点と言っているのは、どう変わるのかよくわからないしいきなり変わったりもするので・・・。

前振りが長すぎたので、ここから本編

 WorppressのOGPの設定方法はいろいろあるのだけれど、プラグインを使わずに設定するという前提で書きます。

私が思いついた方法は大きく3つ。

  1. アイキャッチに設定する画像、もしくは投稿記事に入れる画像のサイズを幅468px以上、高さ245px以上を心がける。
  2. WordPressのメディアの設定を変更する
  3. functions.php にOGP用のアイキャッチthumbnailのサイズを別途作ってしまう。

1 これは説明はいらないですね、注意してアイキャッチ画像を選びましょう。

2 メディアの設定と 3 functions.phpでOGP用のサイズを別途作ってしまう方法は基本的に同じなのでまとめて説明。

スクリーンショット 2013-09-16 13.00.34

いつもアイキャッチに大きい画像を指定していた方の場合、以下の作業は行わずに使う方法もあるので、読み飛ばしてください。

wordpressサムネイルについて

wordpress では、アイキャッチを設定したタイミングで可能であれば上記の3つのサムネイルを自動的に作成してくれる。

呼び出す方法は、たとえば the_post_thumbnail(); などで、サイズの指定が出来る

the_post_thumbnail( 'thumbnail' ); 
the_post_thumbnail( 'medium' ); 
the_post_thumbnail( 'large' );
他にfullなんて指定も

なので、og: image で large の1024X1024のサイズを呼び出して指定してもいいし、サイズを指定して呼び出してもいい。

the_post_thumbnail( array(468,468),true );

これで468pxの正方形に抜き出したサムネイルが出来る。

false(省略可能) or true の違いは、true を指定した場合にはそのサイズからはみ出すものはカットしfalseの時は比率を保ったまま縮小をしてくれる。
例えば600x500の画像の場合 600を468pxに縮小するので500pxの辺は468pxよりも小さくなる。

そういう事も面倒なのでと、ここで思い切りよく
例えば中サイズを468の設定に変えてしまっても良いし、他のサイズ共々好みに設定しても良い。

その場合は呼び出すときに
the_post_thumbnail( ‘medium’ );  としてしまえばいい。

なんとなく、基本的なところは触りたくないしなぁ OGP専用のサイズ作っといた方が何かといいのかも・・などと

決断のつかない私のようなヒトはfunctions.phpで新たに作る。
作り方は簡単

add_image_size( '名前', 幅サイズ, 高サイズ,false or true );

調子に乗って作ると画像がヤマのように出来るのでほどほどに。

add_image_size( ‘ogp-f’, 468, 468 );

これを追加した。ここの数字はin the Looopsさんお奨めのPC 400×209 モバイル560 x292でもいい。

別用途に778×480というフィボナッチ的なサイズもこの際に追加しておいた。

ここで注意点

過去既に作られているサムネイルのサイズは変更できない。

ということ。 ここでプラグインの力を借りる

Regenerate Thumbnails

これは、 全てのサムネイルを一気に再生成するプラグイン。
注意:指定サイズに満たないものは作られませんので必ず大きめの画像を準備しておきたい

初めに書いておけば良かったのですが、そもそもアイキャッチなんて設定してないよ。という方は

Auto Post Thumbnailという自動的に投稿中の一番目の画像をサムネイル登録してくれるプラグインもありますので、調べてみてください。

やっと本題のOGP設定

OGPのタグ出力はheader.phpに書いているので、これを若干書き換えます。

<!-- ここからOGP -->
<meta property="og:type" content="article">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
//echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';echo "\n";//設定した抜粋を表示
echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'" />';echo "\n";//抜粋を表示
endwhile; endif;
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//投稿にサムネイルも画像も無い場合の処理
echo '<meta property="og:image" content="http://siteNameUrl/wp-content/uploads/img_noOGP.png">';echo "\n";
}
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:image" content="http://siteNameUrl/wordpress/wp-content/uploads/img_noOGP.png">';echo "\n";
}
?>
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:admins" content="xxxxxxxxxxxxxxxx">
<meta property="fb:app_id" content="yyyyyyyyyyyyy">
<!-- ここまでOGP -->

この中で og : image のところを修正

$image = wp_get_attachment_image_src( $image_id, ‘full’);

比率やサイズにはこだわらずとにかく存在するサムネールの1番大きいのを指定する場合はこのまま。

ここまで読んで頂いた方はそうではないと思いますので、以下を合わせて変更。

独自にfunctions.phpで作成した場合(例 ogp-fとした場合)
$image = wp_get_attachment_image_src( $image_id, ‘ogp-f’);
この方法を忘れてしまったが、どこかのWebで読んだのだが、やってみたところ上手くいかなかった。

 wp_get_attachment_image_srcでサイズ指定できるのは(thumbnail, medium, large, full)もしくはarray(w,t) サムネイル表示としてだと設定した名前で呼び出す事が出来る。

メディア設定の中サイズを468pxなどに変更した場合

$image = wp_get_attachment_image_src( $image_id, 'medium');

とにかく大きいのを入れているがOGP指定サイズは調整したい場合そしてfunctions.phpにて新しいサイズを設定(468,468)をした場合

$image = wp_get_attachment_image_src( $image_id, array( 468, 468 ));

と指定するとよい。
すべてテストチェックしてないので、もしも違っていたならご連絡いただけると嬉しいです。

//投稿にサムネイルは無いが画像がある場合の処理
これは、先に書いたように投稿に出来るだけ適度な画像を配置する気遣いで対応しましょう。
表示に関してはFacebookにお任せになる。

 Regenerate Thumbnailsについて

便利なツールですが、画像が多いと少し時間がかかると思います。
サイズのバリエーションを増やすと画像の数がとても増えますのでご注意ください。

指定した画像のみ再構築してくれる機能がついています。
手間がかかりますが、アイキャッチを設定がてら選んでやるのも良いですね。

インストールするとメディアのドロップダウンメニューに追加されています。

スクリーンショット 2013-09-16 20.30.39

長い文章になりました、これでも少し省略したのですが・・・。

自分の記録として、そして読まれた方の少しのヒントに繋がればいいかなと思います。

Share.

Comments are closed.