Twitter/Facebook共有時のカード表示を整えてみた


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で共有した時に、冒頭で紹介したようなロゴアイコン画像を表示できます。

この記事自体は冒頭に画像があるため、その画像が表示されるように思いますが、さてどうでしょうか。

コメントを残す

メールアドレスが公開されることはありません。

Time limit is exhausted. Please reload CAPTCHA.