サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2022年11月4日 01:03
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.1
カテゴリ数：19
タグ数：146
ユーザー数：1
----------------------------------------------
●現象
以下のサイトをブログカード表示した。
og:imageタグがあるのに、期待通りブログカードにサムネイル表示されない。
スクリーンショットとなる。（図中）
https://www.rakuten.co.jp/tonya/
試しにWordPressプラグイン「Pz-LinkCard」で表示してみた。
この時、og:imageの画像が表示された。（図上、期待通り）
また、ブログカードがある投稿ページに対しChrome検証で確認した。
「デバイスのツールバーを切替え」でレスポンシブに変更（モバイル表示）。
投稿ページをリロードすると、外部ブログカードに期待通りog:imageの画像が表示された。（図下）
Chrome検証のレスポンシブを解除し（PC表示）、投稿ページをリロードすると、スクリーンショットとなった。（図中）
トピックスターター 2022年11月4日 17:06
●追記
①OpenGraph.phpを修正し、②lib\open-graph.phpとしてogタグを取得していると思います。
試しにサンプルショートコードを作り、①②で取得した$opg->imageを出力してみました。
②で$opg->imageを出力すると、レスポンシブの時のみURLが表示され。
レスポンシブでないとnullとなりました。
2022年11月5日 18:05
僕の環境で試してみた限りでは、og:imageと同じものが取得できているようです。
外部ブログカードのキャッシュを削除しても改善されませんでしょうか。
スクリーンショットを見る限りページ情報が取得できなかった（404）場合の状態になっているようです。
<meta property="og:image" content="https://thumbnail.image.rakuten.co.jp/@0_mall/tonya/logo/logo1n.jpg?_ex=200x200"/>
?_ex=200x200
トピックスターター 2022年11月5日 18:24
外部ブログカードのキャッシュを削除しても改善されませんでしょうか。
[Cocoon設定]→[キャッシュ削除]→すべて
改善しません。
先にも書きましたが、Chrome検証でレスポンシブ表示の時は、期待の通り表示されます。
追記にも書きましたが、①②で結果が異なりました。
取れるページと取れないページがあり。
以下は表示され。
以下は500 Internal Server Errorとなり。
----------------------------------------------
WordPressバージョン：6.1
PHPバージョン：7.4.25
ブラウザ：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
トピックスターター 2022年11月5日 18:55
●追記
og:image:secure_urlと言うタグがあり。
そのページのみ取れていないように思え。
2022年11月5日 20:56
僕の環境では正常に取得できるようです。
<meta property="og:image" content="https://gigaplus.makeshop.jp/horiguchi/ec/ogp/hc_ec_top.jpg"><!--画像のURL-->
出来れば不具合環境の実際のソースコードで動作を見たいところです。
トピックスターター 2022年11月5日 22:59
2つのケースがあり。
●utils.php(get_http_content)
ChromeでPC表示
以下の戻り値($e->getMessage)
「Operation timed out after 3001 milliseconds with 0 bytes received」
この時、is_wp_error( $res )=1だった。
●open-graph.php(fetch)
Chromeレスポンシブ表示の時、以下の箇所で取得され。
●余談
open-graph.phpのfechの部分をOpenGraph.phpのfechにまるまる置き換える。
その場合、問題なく取得でき。
ただ「堀口珈琲」は図のようになり。
トピックスターター 2022年11月6日 12:13
私のサイトが非SSLと言う事も起因してるのかも？
外部ブログカードでOGタグが取得できないのは「楽天サイト」（図水色）です。
2022年11月6日 19:39
ローカル環境ではありますが非SSL環境で試してみたところ、画像を取得できているようです。
不具合の再現方法が今のところちょっと分からないかもしれません。
2022年11月6日 19:44
OpenGraphGetterのfetchとかだったら、ここら辺のwp_remote_getの$args引数関係の問題なんですかね。
https://github.com/xserver-inc/cocoon/blob/7bf94c4370c51f7ae53cb676e2f935b6810d78ef/lib/open-graph.php#L63
とはいえ、ソースコードって君は同様の条件の僕のローカル環境では取得できているようなので、何がトリガーとなっているのだろうか。
トピックスターター 2022年11月6日 22:33
●結論
以下のuser-agentにChromeレスポンシブ時の値を直接入力する、もしくは''に変更。
「堀口珈琲」はダメでしたが、「楽天サイト」は取得でき。
何かしら環境に関する情報が影響していると考えられ。
この為、一旦、本件はクローズしたいと思います。
何かしら分かりましたら、回答頂けるとありがたいです。
わいひら reacted
トピックスターター 2022年11月7日 00:47
ユーザーエージェントが関係しているのかもしれないです
再現した方が居たので、気分的に少しスッキリしました笑
「楽天」はどれもダメだと思います。
2022年11月7日 00:51
「楽天」はどれもダメだと思います。
これが、他にどんなものがあるのか分かっていませんが、Firefoxであれば、とれるような気はします。
そうだとすれば、やはりユーザーエージェントなんだと思います。
2022年11月7日 07:43
私も、「open-graph.php」の「$args['user-agent']」の値を置き換えながらやってみました。
以下のOGPの取得ができるか確認しました。
（ブログカードのサムネイルの確認、実際の確認はChrome/107で実施）
https://www.rakuten.co.jp/tonya/
なお、以下の2つは、どのユーザーエージェントでも取得できました。
https://unir-coffee.com/
https://kohikobo.com/
【OGP画像を取得できたもの】
Firefox
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0
Chromeのデベロッパーツール
Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Mobile Safari/537.36
Edgeのデベロッパーツール
Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Mobile Safari/537.36 Edg/107.0.1418.35
iPhone
Mozilla/5.0 (iPhone; CPU iPhone OS 16_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Mobile/15E148 Safari/604.1
WordPress
WordPress/6.1
【OGP画像を取得できなかったもの】
Chrome
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
Edge
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.35
Chromeのユーザーエージェントの文字列削減の影響かと思い、バージョンの詳細を設定したもの
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.5304.88 Safari/537.36
Chromeの古いバージョン（Chrome/92.0.4515.107）
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36
Twitterbot
Twitterbot/1.0
facebookexternalhit/1.1
単なるbot
bot
Windows10 + Chromeは、取得できない？
（Chrome/92でも取得できませんでしたし）
わいひら reacted
2022年11月7日 15:25
テストしたのが、1サイトだけだと、検証が足りないと思いますので、少し試しました。
必ずしも、楽天だから取得できないとは言い切れない感じです。
Chrome
Firefox
https://www.rakuten.co.jp/letao/
https://brandavenue.rakuten.co.jp/ba/shop-columbia/
https://www.rakuten.ne.jp/gold/hattendo-shop/
https://brandavenue.rakuten.co.jp/ba/shop-columbia/
https://www.rakuten.ne.jp/gold/hattendo-shop/
Firefoxだと、とれるのはとれるのですが・・・。
わいひら reacted
2022年11月7日 16:30
あれ、一番下は「ne.jp」ですね。
Chromeだと、「ne.jp」は取得できて、「co.jp」は取得できない？
後で試してみます。
今は、ちょっと休みます。
2022年11月7日 19:25
確かに僕はFirefoxで試しました。
AmazonなどではユーザーエージェントをTwitterのものにしないと取得したい情報が取得できなかったりしたので、
https://github.com/xserver-inc/cocoon/blob/8bb8be2063d57dd402dcdf2be8ffe4b32c1e4bac/lib/open-graph.php#L74
サイトによってはユーザーエージェントによる情報開示の制限とかがあるのかもしれません。
mk2さんの検証、大変参考になりました。
さて、設定するユーザーエージェントは何がいいんだろう…。
設定するユーザーエージェントによっては、ここのサイトはいけるけど、ここのサイトはダメというのはありそうですね。
ここは正直にWordPressのユーザーエージェントでいった方が良さそうなのかな。
https://github.com/xserver-inc/cocoon/blob/8bb8be2063d57dd402dcdf2be8ffe4b32c1e4bac/lib/open-graph.php#L71
2022年11月7日 19:41
さて、設定するユーザーエージェントは何がいいんだろう…。
設定するユーザーエージェントによっては、ここのサイトはいけるけど、ここのサイトはダメというのはありそうですね。
はい、これがありそうです。
どうしたものか・・・難しいです。
今のところ、Windows + Chromeで取得できないのが分かっているは、楽天(co.jp)だけなんですよね。
変えて、他のサイトのOGPがとれないと、それまた困りますし。
ここは正直にWordPressのユーザーエージェントでいった方が良さそうなのかな。
WordPressのユーザーエージェントは、以下のような「バージョン＋ドメイン名」ですよね。
WordPress/6.0.3; https://example.com
（「;」と「https」の間は、半角スペース1文字なんですが、2つで表示されてしまうような・・・）
ちょっと、主要なサイトの確認を行って確認した方が良さそうな気がしますね。
だからと言って、どのサイトの確認を行なえば良いものか・・・。
少し考えつつ、後で確認してみます。（夜遅くになると思います）
わいひら reacted
2022年11月8日 00:46
ちょっと、主要なサイトの確認を行って確認した方が良さそうな気がしますね。
だからと言って、どのサイトの確認を行なえば良いものか・・・。
少し考えつつ、後で確認してみます。（夜遅くになると思います）
これ、明日にさせていただきます。
別件で、バタバタして時間がとれませんでした。
元々明日はダウン予定ですので、時間はある・・・はず？
2022年11月8日 18:32
WordPressのユーザーエージェントは、以下のような「バージョン＋ドメイン名」ですよね。
これについて詳しく書かれた参考文献などありましたらURLをいただいてよろしいでしょうか。
WordPressのユーザーエージェントだったら、バージョンが変更しても対応コードを書くことで動的に対応できるので、都度変更する必要なさそうなんですよね。
Firefoxとかにすると、バージョンを新しいものに更新していくのが大変そうというのもありました。
急いではありませんので、お体のご都合が良い時にでも教えていただければ幸いです。
2022年11月8日 18:34
WordPressのユーザーエージェントは、以下のような「バージョン＋ドメイン名」ですよね。
これについて詳しく書かれた参考文献などありましたらURLをいただいてよろしいでしょうか。
文献は探してはいないのですけれど。
サーバーのアクセスログを確認すると、日々動いているcron（wp-cron.php）のユーザーエージェントが上記の体系でした。
結構前からそんな感じで、変わっていないので、おそらくそうなのではないかと。
【追記】
以下のサイトの冒頭部に、wo^cron.phpのログが載っていますが、まさにこんな感じです。
WordPress 4.3.1とかなり古いもののようですが・・・。
少なくとも、WordPress 6.0.3でも、同様の体系です。
wordpressのxmlrpc.phpとwp-cron.phpの設定を変更する。
https://choice-site.com/2015/10/21/wordpress%E3%81%AExmlrpc-php%E3%81%A8wp-cron-php%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E3%80%82/
スクロールバーで、右に移動しないと見えないです。
わいひら reacted
2022年11月8日 19:08
私のサーバーのアクセスログのcronのところを抽出してみました。
（行の最後がユーザーエージェント）
ドメインはexample.com、IPはxxx.xxx.xxx.xxxに置換させていただいています。
検索しているのですが、文献はなかなか見つかりません・・・。
わいひら reacted
2022年11月8日 20:20
なるほど、どうりで検索してもそれっぽいものが出てこないと思いました。
ログありがとうございます！これを参考に実装してみます。
このサイトだと以下のようになる感じですよね。
WordPress/6.1; https://wp-cocoon.com
2022年11月8日 20:38
このサイトだと以下のようになる感じですよね。
WordPress/6.1; https://wp-cocoon.com
はい、この体系だと思います。
「ドメイン名」というより、WordPress設定のサイトアドレス(URL)が正しいのかもしれないですけど。
【追記】
以下を見ると、そんな感じな気がします。
（何度か見たことがあるページですが、未だに見方が分からない・・・）
2022年11月8日 22:52
ユーザーエージェントの変更をChromeで試してみました。
WordPressのユーザーエージェントを試してみたのですが、これだと楽天のOGP情報は取得できませんでした。
https://github.com/xserver-inc/cocoon/blob/1fef496e345527704c8b6ce2732629f441973bc3/lib/open-graph.php#L74
自分の使っているFirefoxのユーザーエージェントだと問題なく取得可能でした。
https://github.com/xserver-inc/cocoon/blob/1fef496e345527704c8b6ce2732629f441973bc3/lib/open-graph.php#L73
ただ、Firefoxのユーザーエージェントと言っても「Mozilla/5.0」だけでも楽天のOGP情報は取得できました。
https://github.com/xserver-inc/cocoon/blob/1fef496e345527704c8b6ce2732629f441973bc3/lib/open-graph.php#L71
ただ、このようにユーザーエージェントを変更して良いものかというのはありますね。
変更した部分。
https://github.com/xserver-inc/cocoon/commit/1fef496e345527704c8b6ce2732629f441973bc3
2022年11月8日 23:08
私も今、Chromeでやってみました。
ローカル環境のURL
（わいひらさんに修正いただいたものから、コメントを削除した状態）
example.comに変更
WordPress ＋ バージョン のみ
ただ、このようにユーザーエージェントを変更して良いものかというのはありますね。
私もこれを思いましたので、「バージョン＋ドメイン名」をご提案したのですが、確認ができていませんでした。
申し訳ないです。
正直、偽装になってしまいそうで、よろしくない気がするんですよね。
正確な判断できないというところです。
わいひら reacted
2022年11月8日 23:13
「https:// 」を削除すると、取得できますが、これも偽装・・・かも？
「https」を「http」に変更しても、取得できませんでした。
「https」「http」がダメなワードなのでしょうか。
【追記】
「https」だけだと取得できました。
わいひら reacted
2022年11月8日 23:34
「https」＋「ドメイン」だと取得できず・・・。
もう少し、確認や検討が必要のように思われますね。
何か良い方法はないものか・・・。
もうちょっと考えてみます。
もうちょっと考えてみます。
2022年11月9日 06:42
今更ですが・・・。
WordPressのユーザーエージェントについて。
以下に記載があるようです。
User-agent value sent. Default 'WordPress/' . get_bloginfo( 'version' ) . '; ' . get_bloginfo( 'url' ).
これは、以下「wp_remote_get()」のリファレンス。
https://developer.wordpress.org/reference/functions/wp_remote_get/
その下部の「User Contributed Notes」の部分に記載があり、気づきました。
本当に今更ですけれど。
わいひら reacted
2022年11月9日 19:40
もう訳が分からないですね。
「Windows10 ＋ Chrome」だと取得できず
「Chrome」単独でも取得できず
「Windows10」は取得できます
でも、以前試した、デベロッパーツールのものは、「Chrome」が含まれていました。
Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Mobile Safari/537.36
2022年11月9日 19:44
「https:// 」を削除すると、取得できますが、これも偽装・・・かも？
これで行きましょう。
WordPress/6.1; cocoon.jp
これが1番嘘がないような気がする。
もし「OGP情報取得ユーザーエージェント偽装裁判」があったら、これなら無罪を勝ち取れる気がする、
https://github.com/xserver-inc/cocoon/blob/b1701a2d849b3bf110d5d944b2c7abd24cd55755/lib/open-graph.php#L71
とはいえ、Twitterbot/1.0は完全にに偽装かもだけど（AmazonはこれでないとOGP情報が出ないので…）。
他のサイトが見れなくなったら、連絡があればその都度対応いたします。
こればっかりはやってみないとわからない。
ただ楽天は、多くの方が利用されているので対応しておいた方が良いと思うので。
2022年11月9日 19:46
楽天だけにする・・・という案はなしでしょうか。
楽天以外は、通常のユーザーエージェントを設定しておくとか。
【追記】
そうすれば、他サイトのOGP取得に影響を与えない気がします。
わいひら reacted
2022年11月10日 21:56
2022年11月10日 22:41
バージョンアップはしたはずなのですが…。
環境情報を見ても、バージョンは更新されていそうに思います。
実際にソースを見ても、今回の変更箇所は更新されていました。
しかし、取得できないです。
もう少し確認してみます。
わいひら reacted
2022年11月10日 22:47
青いところが、今回の修正場所だと思います。
そして、赤い部分にvar_dumpを入れてみました。
ユーザーエージェントは、Windows + Chromeですね。
わいひら reacted
2022年11月10日 22:48
すいません…。
!is_rakuten_site_page($URI)の!を見落としておりました…。
修正しておきました。
https://github.com/xserver-inc/cocoon/commit/9ae0eb6188e665974e7b249adca28b707674e688
2022年11月10日 22:49
!is_rakuten_site_page($URI)の!を見落としておりました…。
あ、なるほど。
私も気づきませんでした。
これから確認してみます。
2022年11月10日 22:59
ご対応いただきありがとうございます。
問題なく取得出来ているようです。
念のため、ユーザーエージェントが切り替わっていることも確認させていただきましたが、問題ないと思います。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。