ホームページにカスタムOpen Graph画像タグを追加する方法

Facebookで投稿をシェアしたとき、またはJetpack SocialがあなたのFacebookページに投稿を自動シェアしたとき、FacebookはページをクロールしてOpen Graphのメタタグを探し、完全な投稿プレビュー(画像、タイトル、説明など)を作成します。

Jetpackがこれらのメタタグを自動的に作成するため、あなたが心配する必要はありません!

Jetpackは、ホームページでサイトロゴを使用している場合、またはサイトアイコンを使用している場合にも、画像メタタグを追加します。これら2つのオプションのいずれも使用していない場合は、そこに独自のカスタム画像メタタグを追加するとよいでしょう。そのためには、次のコードスニペットのいずれかをテーマのfunctions.phpファイル、または機能プラグインに追加してください:

function fb_home_image( $tags ) {
	if ( is_home() || is_front_page() ) {
		// Remove the default blank image added by Jetpack
		unset( $tags['og:image'] );

		$fb_home_img = 'YOUR_IMAGE_URL';
		$tags['og:image'] = esc_url( $fb_home_img );
	}
	return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'fb_home_image' );

また、Jetpackが使用する画像を判断できない場合に使われるデフォルト画像を変更することもできます:

function custom_jetpack_default_image() {
	return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

なお、フォールバック画像は200 x 200pxより大きくする必要があります。これはFacebookの要件に基づくものです。画像が小さい場合、Facebookは無視します。

Jetpack のメリットを見る

Jetpack が WordPress サイトの保護、速度向上、成長にどう役立つかをご覧ください。

プランを見る

ご質問がありますか?

この記事へのコメントは締め切られていますが、引き続きサポートいたします。サポートフォーラムにアクセスしていただければ、ご質問にお答えします。

サポートフォーラムを見る