新しくサイトを作成したときにやっておいた方がいいことは色々あるのですが、その中でもFacebookなどのSNSでシェアされたときの画像を適切に指定しておく、ということは重要なことです。
特にFacebookは拡散力が強いので、Facebookでいい感じに表示される画像の作り方を考えてみました。
Facebookに表示するOGP画像の最適なサイズについて
色々検索してみたところFacebookに表示するOGP画像の最適なサイズは
横1200 x 縦630 ピクセル
かなと思います。少なくとも 600 x 315 ピクセル ということですが、大きい方がより良いということが多く言われているので新しく作るなら大きいサイズの方で作っておいた方が良さそうです。
ということでとりあえず作ってみました。
実際にはとても大きいです→こちら
Facebookの表示をシミュレートできるサービス og:image Simulator
このOGPイメージがどのように表示されるのかをシミュレートできるサービスを見つけました。
このサイトの 画像をドラッグ＆ドロップしてください… と書いてあるあたりに先ほど作った画像をドラッグします。
すると、
こんな感じに、FacebookにURLを書いたときの画像表示がこういう感じになるんだな～ということがとてもリアルに分かりました。
2014/1 時点での仕様のようなので多少現在と違っているところもあるかもしれませんが、ドラッグ&ドロップだけでどんな感じに表示されるかがすぐにわかるのでとても便利だと思います。
OGP画像を指定する方法
OGP画像を指定する方法は色々あるのですが、HTMLに直接書くのならば、headタグ内に
<meta property="og:type" content="website" /> <meta property="og:title" content="WordPress移転時のDBアップデート文作成" /> <meta property="og:description" content="WordPress移転時のDBアップデート文を作成します" /> <meta property="og:url" content="https://usortblog.com//blog_sample/tools/wordpress_iten.html" /> <meta property="og:site_name" content="ryus blog" /> <meta property="og:image" content="https://usortblog.com//blog_sample/tools/example.png" /> <meta property="og:locale" content="ja_JP" />
こんな感じに書きます。og:image という行に先ほど作ってアップロードしておいたOGP画像のURLを書きます。
このURLをFacebookでシェアすると、
このように先ほど作った画像が表示されました。
また、WordPressでJetpackを使っている場合なのですが、コンテンツ内に何か画像があればその画像が使われる可能性もあるのですがなにもないと、
<!-- Jetpack Open Graph Tags --> <meta property="og:type" content="website" /> <meta property="og:title" content="テストサイト" /> <meta property="og:description" content="Just another WordPress site" /> <meta property="og:url" content="http://example.com/" /> <meta property="og:site_name" content="テストサイト" /> <meta property="og:image" content="https://s0.wp.com/i/blank.jpg" /> <meta property="og:locale" content="ja_JP" />
こんな感じで表示されます。content=”https://s0.wp.com/i/blank.jpg” となっているためFacebookにURLを書くと、
こんな感じで、画像が空白の四角になって表示されてしまいます。画像があるか無いかでクリックする率も変わると思いますので、ここは必ず画像を表示したいところです。そこで子テーマのfunctions.phpに
<?php
function add_default_image( $tags ) {
// replace blank Jetpack default image with site header
if ( $tags['og:image'] == "https://s0.wp.com/i/blank.jpg" ) {
unset( $tags['og:image'] );
$tags['og:image'] = 'http://example.com/wp-content/themes/twentyfifteen-ryus/example.png';
}
// always remove useless HTTPS image tags
unset( $tags['og:image:secure_url'] );
return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'add_default_image' );
このように追加しました。og:image が https://s0.wp.com/i/blank.jpg だったときに子テーマにアップしたexample.pngに置き換えるというコードです。これで表示すると
このように指定したOGP画像が表示されました。
HTMLで指定するときもWordPressで指定するときもOGP画像はキャッシュがきついので、Facebookデバッガーでキャッシュを作り直してください。方法については、こちらを参照してください。
コメント