Q&A
こちらでチェックした結果を教えてください。
https://develop.tools/ogp-simulator/
前提
WordpressにてJetpackプラグインを使用し、メディアサイトを運営しております。
TwitterやLINEで記事を共有しても正常に「記事タイトル、アイキャッチ画像」が表示されますが、
FACEBOOKだけ画像が空白になり表示されません。
現状
- OGP確認ツールでの表示 → どれも正常
- Facebookシェアデバッガー → 画像のみ表示されない
（もちろん再度スクレイピングボタンを押しています）
確認したこと
- Facebookのapp_idは設定済
- 画像は絶対パスで指定されている
- アイキャッチのwidth・heightも出力されている
- Facebookシェアデバッガーにて、たまにアイキャッチが表示されることもあった
～補足～
Jetpackプラグインでは任意のアイキャッチが表示されないこともあるらしいので、
fanction.phpにて下記コードを追加しています。
（しかし他サイトにてこのコードを使用していてもFacebook画像は表示されているので、関係ないかもしれません。）
fanction.php
1/*------------------------------------------------------------------------------ 2【参考記事】Jetpackが生成するog:imageをカスタマイズしたい 3https://www.webantena.net/wordpress/functions-php-jetpack-open-graph-tags-fb-home-image/ 4----------------------------------------------------------------------------*/ 5function fb_home_image( $tags ) { 6if ( is_home() || is_front_page() ) { 7// Remove the default blank image added by Jetpack 8unset( $tags['og:image'] ); 9 10$fb_home_img = 'ここに画像のURL'; 11$tags['og:image'] = esc_url( $fb_home_img ); 12} 13return $tags; 14} 15add_filter( 'jetpack_open_graph_tags', 'fb_home_image' );
また、TwitterのOGPが上手くいかなかったため、下記コードを追加しております。
しかしこのコードがあってもなくても、FacebookのOGP画像は表示されないようです。
fanction.php
1/*------------------------------------------------------------------------------ 2【参考記事】Jetpackが自動生成するTwitter CardsのOGPをカスタマイズする 3https://wp.mktia.com/how-to-customize-open-graph-protocol-of-twitter-cards-jetpack-generated-automatically/ 4----------------------------------------------------------------------------*/ 5function my_custom_twitter_site( $og_tags ) { 6 if (is_home() || is_front_page()){ 7 $og_tags['twitter:text:title'] = 'オオサカ不動産開業ナビ'; 8 $og_tags['twitter:card'] = 'summary_large_image'; 9 $og_tags['twitter:image'] = get_stylesheet_directory_uri() . '/images/ogp.png'; 10 } 11 return $og_tags; 12} 13add_filter( 'jetpack_open_graph_tags', 'my_custom_twitter_site', 11 );
設定としてはきちんと出来ているのではと思いこんでいますが、
もし見落とし部分などがございましたらご教示いただけますと幸いです。
どうぞよろしくお願いいたします。
コメントいただきありがとうございます！
上記サイトでは、以下のような結果が出力されました。
（「ここに○○」と書いてある部分は正常に出力されていました）
また、プレビューではFacebook共々正常に画像が表示されているようです。
―――――――――――――
【基本タグ】
title｜ここに記事タイトル
description｜ここに記事内容
keywords｜タグがありません (不要)
【OGPタグ】
og:title｜ここに記事タイトル
og:description｜ここに記事タイトル
og:url｜https://~~~~~~~.jp/n_252/
og:image｜https://i0.wp.com/~~~~~~~.jp/wp-content/uploads/2023/04/~~~~~~~.jpg?fit=1000%2C590&ssl=1
og:type｜article
og:site_name：ここにサイト名
og:locale：ja_JP
【Twitterタグ】
twitter:card｜summary_large_image
twitter:title｜タグがありません (任意)
twitter:description｜タグがありません (任意)
twitter:image｜https://i0.wp.com/~~~~~~~.jp/wp-content/uploads/2023/04/~~~~~~~.jpg?fit=1000%2C590&ssl=1&w=640
twitter:site｜タグがありません (任意)
twitter:creator｜タグがありません (任意)
【Facebookタグ】
fb:app_id｜ここにFacebookID
タグ自体は正常のようですね。
となると、画像ファイルの問題が高そうに思います。
推奨は1200px × 630px（アスペクト比 1:1.91）のPNGとされています。
現在の画像と比較してどうでしょうか？
かけ離れている場合は一度、原因特定のために下記画像を設定してみてください。
https://img.skin/1200x630
経験上、画像ファイルの問題でFBで表示されなかったことがあります。
画像をご用意してくださりありがとうございます。
そちらで試してみた結果、上手くいきませんでした･･･(涙)
また他のpng画像でも試してみたところ同じ様に表示されないので、他の何かが原因の可能性が高いということですよね。
タグも画像も問題なければ、FB側の問題の可能性もありますね。
他の画像で試してもダメだったとのことなのでないとは思いますが、
ファイル名に日本語や全角記号など、URLに使えない文字は入っていないですよね？
なんと、上手く表示されました！
私が試した他のpng画像はファイル名に日本語が入っておりました。
しかしファイル名を英数字のみにすると、画像サイズが1200pxより小さくても表示はしてくれるみたいです。
確かに、後から考えてみると不具合の要因になりますね。
ご指摘いただき大変助かりました。誠にありがとうございました！
ちなみにpng形式が推奨されておりますが、一応jpgであったとしても、画像ファイル名を英数字に変換したら表示されるようでした。ご共有しておきます。
解決されたようでよかったです。
回答1件
0
自己解決
画像のファイル名に、日本語や全角記号などURLに使えない文字が入っていたのが原因でした。
ファイル名を英数字に置き換えると、無事に表示されるようになりました。
投稿2023/04/14 14:16
総合スコア29
あなたの回答
tips
プレビュー
