TwitterやFacebookを見ていると、引用されているWebページの内容がカード状に表示されることがあります。例えばTwitterならばこんな感じ。
この表示は、WordPressにインストールしているJetpackが「Jetpack Open Graph Tags」と呼ばれる<meta>タグをページに挿入することで実現されています。今までも記事本体に画像があるときはその画像がカードに表示されていたのですが、記事に画像がない時は白い画像が表示されてしまい、今一つ見栄えが良くありませんでした。
そこで、以下記事を参考にしてJetpackの動作をカスタマイズしてみました。
How to add a default fallback image if no image can be found in a post
具体的には、function.phpに以下内容を追加しました。bari-ikutsu_icon_ogp.pngは、200x200pxのロゴアイコン画像です。
function custom_jetpack_default_image() {
return get_template_directory_uri().'/images/bari-ikutsu_icon_ogp.png';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );
この追加により、画像のない記事をFacebookやTwitterで共有した時に、冒頭で紹介したようなロゴアイコン画像を表示できます。
この記事自体は冒頭に画像があるため、その画像が表示されるように思いますが、さてどうでしょうか。
