[WordPress 6.5] ブログカードでYouTube動画がうまく表示されない？(Cocoonのキャッシュとリンク)

• Cocoonテーマの「ブログカード」を使ってYouTube動画を埋め込んでいるのですが、たまに外部ブログカードとして表示されてしまうことがあるんです。
• 原因を調べてみると、YouTubeで公開前処理が終わる前に埋め込み動画を設置したことや、URL貼付け時に「リンク」に自動変換されていることが関係しているようです。
• 埋め込み動画を設置するには、YouTube上で閲覧可能になるまで待って、URLに付いたリンクを削除する必要があります。

1. ブログカードで動画を埋め込んでいる

ブログ内にYouTube動画を埋め込むのに、Cocoonテーマの「ブログカード」を使っています。

ブログカードに動画リンクを挿入するだけで、埋め込むことができます。

埋め込んだ動画は、サイト内でそのまま再生もできます。

1-1. 外部ブログカードとして表示されるケース

しかし、たまに埋め込み動画ではなく、ただの外部ブログカードとして認識されてしまうことがあります。

この状態だと、いったんYouTubeにアクセスしないと、どんな動画かわかりません。

2. 非公開の動画がキャッシュされてしまっている

ずっと「なんでかな」と思っていたのですが、YouTubeの短縮URLから通常のURLに変更したりすることで、なんとか表示できていました。

しかし、やっと本当の原因にたどり着きました。
それは、ブログカードの「キャッシュ」です。

ブログカードの情報を表示するには、そのサイトにアクセスする必要があります。
しかし、毎回 アクセスするのは非効率です。
ページを表示するのが遅くなってしまいます。

そこで、Cocoonのブログカードには、「キャッシュ」があります。

2-1. キャッシュのリフレッシュ間隔

このキャッシュのリフレッシュ間隔は、「Cocoon設定」の「ブログカード」で決まっています。

私の場合は、キャッシュの保存期間が「365日」でした。

つまり、最初にページを開いたときにキャッシュが保存され、通常は一年間そのまま固定されるのです。

2-2. YouTube動画の公開直後はアクセスできない

さて、ここで問題になるのが YouTubeの公開直後。

自分は YouTube動画をアップロード・公開したときに、ブログからのリンクも設置しています。
ところが、投稿したYouTubeが閲覧できるようになるまでには、数分ほど処理の時間がかかります。

どうも、処理が完了する前にYouTubeの共有リンクでブログカードを表示すると、きちんと埋め込み動画にならないようなのです。

解決策としては

• YouTubeの公開前処理が終わってから、埋め込み動画を設置する。
• Cocoonのブログカード設定で「キャッシュ更新モード」を有効にしてページを開き直す。

ということが考えられます。

3. もう一つの原因：リンクコントロール（WordPress 6.5）

最近、もう一つの問題が生まれました。
それは、リンクコントロールの自動挿入です。

- YouTube

YouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。

youtu.be

WordPress 6.5になって、URLをペーストしたときに自動的にリンクとして設定されるようになりました。

WordPress 6.5のブロックエディタの更新内容（ざっとまとめ）

WordPress 6.5にアップデートして、ブロックエディタの挙動がだいぶ変わっているので、ざっとメモしています。 リンク関係 URLをペーストすると自動的にリンクになる 挿入されたリンクをクリックするとポップアップから編集できる ボタンブロックのリンクに nofollow の指定ができる リストビュー関係 リストビューをドラッグして移動できる リストビューで右クリックするとオプションメニューが表示される リストビューやブロックツールバーから「名前の変更」ができる 余白・サ...

chiilabo.com

ところが、ブログカードの中にアンカーリンクとして設定されたURLがある場合、そのまま「ブログカード」として表示されるようなのです。

HTML表示にすると、以下のようになっていました。

<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">
<a href="https://youtu.be/qdIC07DJTm4">https://youtu.be/qdIC07DJTm4</a>
</div>

この場合は、通常のURL文字列に直すために、リンク削除する必要があります。

<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

 - YouTube
YouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。
youtu.be
</div>

普通のブログカードのときには気にならないのに、埋込み動画のときには挙動が変わるんだね。

3-1. 【補足】埋め込みショートコード embedを使った場合

ブログカードではなく、ショートコード embed を使った場合も調べてみました。

• embedでURL文字列を挿入した場合は、ブログカードになりました。
  （YouTubeの短縮URLでも埋込み動画にはなりませんでした）
• アンカーリンクを挿入した場合は、タグ付きの文字列になってしまいました。

これは、HTMLタグとコードの変換処理する順番によるものだと思います。

埋め込みではリンクが想定されていないので、相性が悪いんですね。

こちらもどうぞ。

WordPress 6.5にアップデートしたらブログカード内のURLに改行が追加されるようになった[Cocoon]

昨日、WordPress6.5にアップデートしたところ、ブログカードを再編集したときに、URLの間に空行が追加されることに気づきました。 どうも、ブロックエディタのブログカード内での改行の仕様が変更になっているようです。 Cocoon バージョン：2.7.2.5で修正されました。 環境 Cocoonバージョン: 2.7.2.3 WordPress: 6.5 ブログカードが妙に縦に伸びている ブログカードに複数URLを挿入する運用をしています。 WordPress6.5にアップ...

chiilabo.com

LINEのタイムライン投稿のアイキャッチ画像が表示されない？ 【OGPとURLエンコード、サーバーキャッシュ】

LINEのタイムラインにブログのURLを投稿したら、アイキャッチ画像が表示されないことがありました。原因を調べてみると、画像ファイル名に日本語文字が含まれているときに、うまくいかないことがわかりました。 SNS共有のための「OGP情報」に、マルチバイト文字列が含まれると、LINEタイムラインではうまく表示できないようでした。 【追記：2022-04-17】LINE VOOM Studioになって、リンクの挿入方法が変わりました。 【関連】 どんな問題があったの？ ちいラボでは...

chiilabo.com

[Cocoon] ブログカードを編集するとURLだけが表示されるようになった？（Cocoon 2.6.3.2）

最近、過去に入れていたリンクがCocoonのブログカードになっていないことがあります。ブログカード内を編集したタイミングで、ブロックのHTMLの整合性が崩れるようです。 いったん、「書式を削除」して、行頭の余分な空白を消し、改行しなおすと元に戻せます。 ブロック内の改行の扱いが<p>から<br>に変更になっているようです。 WordPress 6.3にアップデート後の仕様変更によるもので、Cocoonの最新版（Cocoon 2.6.3.3）では、対応されました（追記：2023...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。