WordPressのブログカードが表示されない原因がiframeのLazy-loadにあった件
WordPressのブログカードは4.4の頃からある機能で、内部リンクであればURLを書くだけでサムネイルの画像やタイトル、テキストを見栄えよく表示してくれるので重宝します。
SNSやSlackなんかにWebサイトのURLを投稿したときに、自動で変換されるやつに近い感じです。
で、つい最近気づいたんですが、管理してるWordPressのサイトでこのブログカードが表示されなくなってました。
詳しく調べていくと、どうやらSafariやスマホのブラウザは大丈夫だけど、Chromeだけ表示されないことがわかってきました
WordPressのブログカードがChromeだと表示されたり、されなかったり、どっちかといえばされない確率高めな気がしてるんですが、なんかそういう不具合とか出てるんかな… #wordpress #ブログカード #不具合
— 篠田健吾（篠キチ）@MGReのプランナー (@shinokichi_mgre) September 7, 2024
ポロッとつぶやいておけば誰か詳しい人が教えてくれないかなーなんて淡い期待を抱いてましたが、そんなことは全然ありませんでしたので自分で調べることに。
ブログカード関連の不具合でググったりしてると、キャッシュがどうとか、oEmbedの機能がどうこうとかいろいろ出てきて、試してみたんですがどうも直る感じがしない。
仕方ないのでブログカードが表示されなくなってるサイトを開いて開発者ツールを使って調べてみました。
ブログカードが表示される仕組み
開発者ツールを使ってソースをみてみると、ブログカードがどういう手順で表示されるのかがわかってきました。
まず blockquote でページタイトルにそのページへのリンクがつけられた簡易なブロックが表示される
その直下に iframe でブログカードのコンテンツが挿入される(ここでoEmbedの機能が使われてると思われる)
iframeの読み込みが終わってブログカードが表示されると、最初のblockquoteの要素に style="display: none;" が追記されて非表示になる
で、Chromeで開いているときだけ 2. のコンテンツ挿入がされず、1. のコンテンツが表示されっぱなしという現象でした
原因はブログカードのiframeの遅延読み込み
このブログカードのiframeには loading="lazy" の属性がついています。いわゆる遅延読み込みと呼ばれる処理で、これはWordPress5.7あたりから自動で設定されるようになってました。
ブログカード関連の不具合を調べていたときに、ブラウザによってLazy-load(遅延読み込み) の挙動が違うとか書かれた記事を見かけてたので、試しに開発者ツール上でこのloading属性を消してみると、サクッとブログカードが表示されました。
理由はよくわかりませんが、iframeに遅延読み込みの属性がついてることで、ブログカードのコンテンツを読み込む処理がブロックされてしまっているようです。
functions.phpにiframeの遅延読み込み無効の設定を追記
対症療法的ではありますが、遅延読み込みの設定はWordPressが自動でつけているので、これを止めることにしました。
方法は下記のサイトにあったので、サクッと拝借してfunctions.phpに追記して解決です。
functions.phpを直接いじるのはちょっと怖いという場合はwpcodeというプラグインを使うと安全に作業できて便利です。