サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2024年7月6日 19:52
■相談内容：
YouTubeのURLを外部ブログカードとすると、サムネイルがスクリーンショットになってしまいます。タイトルなどもYouTubeの汎用的なものになってしまいます。
■不具合の発生手順：
対象とするYouTube URLは「 https://youtu.be/QALY9PHxtig 」とします。なお、この動画は「埋め込みを許可」しております。
・投稿画面でブロックに「ブログカード」を挿入します。
・上記URLを設定します。
・プレビューするとブログカードが表示されますが、サムネイルがスクリーンショットになってしまいます。また、タイトルなどもYouTubeの汎用的なものになってしまいます。(添付画像)
なお、このURLをFacebookなどの投稿に挿入すると、サムネイルやタイトルが正しく設定されます。
Cocoonにおいても昔はちゃんと外部ブログカードが表示されたのですが、いつの頃からかどの様なURL表記にしてもYouTubeに関してはスクリーンショットになってしまいます。
■解決のために試したこと：
プラグイン解除、キャッシュ削除などを試しました。また、極力シンプルなWordpress＋Cocoon環境においても、同様な結果になりました。
■環境情報：
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-tecurio-moon/style.css
WordPressバージョン：6.5.5
PHPバージョン：8.3.8
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br, zstd
言語：ja,ja-JP;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.4.6
カテゴリー数：2
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.0
style.cssサイズ：827 バイト
functions.phpサイズ：204 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ： 
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Health Check & Troubleshooting 1.7.0
ImageMagick Engine 1.7.9
WP Multibyte Patch 2.9
Yoast Duplicate Post 4.5
----------------------------------------------
以上となります。お忙しいところ恐縮ですが、ご確認よろしくお願い致します。
このトピックは6か月前からわいひらに変更されました
2024年7月6日 20:04
今、試してみたのですけれど。
私の環境だと以下のように表示されます。
下は、 https://youtu.be/QALY9PHxtig
です。
一度、ブログカードのキャッシュをクリアしてみてはと思うのですけれど。
（「Cocoon設定」－「キャッシュ削除」－「ブログカードキャッシュ削除」）
（「Cocoon設定」－「キャッシュ削除」－「ブログカードキャッシュ削除」）
わいひら reacted
トピックスターター 2024年7月6日 21:03
ｍｋ２様
早速の検証ありがとうございました。まさに私が得たい結果はそれです。
キャッシュ削除などを今一度試してみたのですが、やはりこちらの環境ではスクリーンショットになってしまいます。
もう少し色々と試してみます。
2024年7月6日 22:33
ATVLさん
YouTube側のOGP情報が取得できていないのですかねぇ・・・。
あるみたいですけれど。
私の環境で、複数の方法を試してみましたが、表示されます。
（再現できない）
（再現できない）
わいひら reacted
トピックスターター 2024年7月7日 00:23
ｍｋ２様
加えての検証、ありがとうございます。うちの環境では、やはりYouTubeのみ、OGPを取りに行けないようです。
ネット上の情報を調べてみると、一つのホストからYouTubeへ集中してOGP取得のアクセスがあると、ブラックリストに載る、という事もあるそうなので、もしかしたらその線かもしれません。(私が使っているWebサーバがブラックリストに載っている?)
その辺も含めて、もう少し調査してみます。
2024年7月7日 00:38
ATVLさん
OGP確認の外部ツールを使ってみると・・・。
以下のツールでは取得できるのですけれど。
OGP確認
https://rakko.tools/tools/9/
以下のツールでは、取得できないです。
OGP確認ツール
https://ogp.buta3.net/
https://ogp.buta3.net/
YouTube側に何かあるのかもしれないです。
両ツールで、このCocoon公式サイトの情報を確認してみましたが、問題なく取得できました。
わいひら reacted
2024年7月7日 04:47
ATVLさん
とりあえず、確認した結果を。
ちなみに、確認に関しては、以下は毎回クリアしました。
- ブログカードのキャッシュ
- ブラウザのキャッシュ
今回確認してみて、ブラウザ側のキャッシュで、更新されない場合もありましたので、後者のクリアも必要だと思います。
確認は、先程と同じ感じで、
下は、 https://youtu.be/QALY9PHxtig
です。
Referrer-Policyが、「strict-origin-when-cross-origin」の場合。
【Chrome】
【Edgeのデベロッパーツール】
Referrer-Policyが、「no-referrer-when-downgrade」の場合。
【Chrome】
【Edgeのデベロッパーツール】
上記のように、私の環境では
- Referrer-Policy
- ブラウザ（UserAgent）
- 通常のURLか、短縮URLか
上記で違いが発生しました。
Chromeでは、何れも取得できるのですけれど。
Edgeのデベロッパーツールを使ったのは、キャッシュのクリアのために、「キャッシュをクリアしてハードリフレッシュ」を使いたかったためです。
Edgeのデベロッパーツールのユーザーエージェントは、以下みたいです。
（画面幅は、1320pxにして、PCの状態なのですけれど）
Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36 Edg/126.0.0.0
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Chromeをご利用みたいですから、私の確認結果通りであれば、取得できるはずですが・・・。
上記以外にも、要因があるのかもしれないです。
（添付いただいた画像は、表示内容が、私のものと違いますし）
YouTube側で、何かコントロールしている感じがします。
わいひら reacted
トピックスターター 2024年7月7日 09:49
ｍｋ２様
夜分遅くに詳細な検証、ありがとうございました。
私の方でもブラウザ側のキャッシュをクリアしてやってみましたが、結果は変わらずスクリーンショットになってしまいます。Edgeでも同様です。
やはりYouTube側から制限を受けている気がします。ちょうどプロバイダから新サーバへの移行の案内が来ていますので、それを今週中に実行してみようと思います。Wordpressが走っているサーバのIPアドレスが変わるので、結果が変わってくるかもしれません。
結果はまたこちらに書き込ませていただきます。
2024年7月7日 17:06
言葉足らずもあったかと思います。
（頭が寝ていましたね）
勘違いなどあってはいけないので。
Edgeでも、普通の状態であれば、私の環境でも表示されます。
経緯としては
- テストのために、複数ブラウザを開いていた
- キャッシュを影響を排除したいために、デベロッパーツールを使った
- デベロッパーツールを使ったことにより、結果的に、ユーザーエージェントが変わった
こんな感じです。
Chromeでも、デベロッパーツールを使うことでユーザーエージェントが変わると、以下のように取得できなくなります。
元々OGP情報を取得できる私の環境でも、以下を変えることで変化があるということです。
- Referrer-Policy
- ブラウザ（UserAgent）
- 通常のURLか、短縮URLか
これらのことから、YouTube側が何らかのコントロールをしているのではないかと、思いました。
また、先にありますように、何が違うのか分かりませんが、別環境で取得できるできないということもあるみたいです。
両ツールで、このCocoon公式サイトの情報は取得できます。
このことからも、YouTube側で何かしている可能性があるのかなと思いました。
（アクセス元の環境が原因の可能性もありますけれど）
以下のツールでは取得できるのですけれど。
OGP確認
https://rakko.tools/tools/9/以下のツールでは、取得できないです。
OGP確認ツール
https://ogp.buta3.net/
わいひら reacted
2024年7月7日 18:22
僕のFirefox環境でも取得できました。
テーマ側に問題がある場合は、どの環境でも取得できないと思うので、やはりmk2さんが書かれているように外部的要因があるのかもしれませんね。
トピックスターター 2024年7月8日 00:55
ｍｋ２様
補足ありがとうございます。良く理解できました。
わいひら様
Firefox環境でもありがとうございます。
「不具合報告」のところに書き込んでしまいましたが、私が使っているサーバとYouTubeとの関係性である可能性が高いですね。先にも書きました通り、今週中に新サーバへの移行を行い、もう一度試験してみます。結果はこちらでご報告させていただきます。よろしくお願い致します。
わいひら reacted
トピックスターター 2024年7月8日 21:06
ｍｋ２様
わいひら 様
本日、プロバイダから案内された新サーバへの移行を行いました。WordPressが走っているサーバのIPアドレスが変更になったのを確認し、YouTubeのブログカード化を試してみたところ、無事に成功いたしました。
旧サーバがYouTubeから何らかの制限をかけられていたようです。Cocoonには何の問題もありませんでしたのに、大変お手を煩わせてしまい申し訳ありませんでした。
Webページの構成を見直し、一度のアクセスでYouTubeのブログカードが大量に表示されない様に致しました。
色々とサポートをありがとうございました。大変、勉強になりました。今後ともどうぞよろしくお願い致します。
2024年7月8日 22:13
ATVLさん
ご連絡ありがとうございます。
やはり、YouTube側で何かコントロールしているみたいですね。
（昔、他サイトでも似たようなことがあったのを、思い出しました。その時はユーザーエージェントで取得できたりできなかったり）
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。