基本的にレンタルサーバーに画像データを置いてサムネイルやアイキャッチ画像にしている人がほとんどだと思います。
私は別サイトにてGIF動画やwebp動画をアイキャッチやサムネイルにしております。この場合、レンタルサーバーに転送量で過度に負担をかけるためレンタルサーバーから警告がでることがしばしばあります。
共有サーバーのため、他のひとに迷惑をかけるため対策を講じない場合は別サーバーに移管するというものです。
別サーバーに移管した場合はアクセス制限など色々な制約が発生します。
そのため、私はCloudFlareという別サーバーから画像を引用する形式に変更しました。
デフォルトでは外部URLから取り込み不可
デフォルトのWordPressでは外部リンクからのサムネイル画像などの生成を予定しておりません。そのため、プラグインを必要とします。有名なところをご紹介します。
有名なアイキャッチ系プラグイン
Featured Image from URL (FIFU)
ググると基本的にFeatured Image from URL (FIFU)のプラグインが上位にきます。また、情報量も多いです。
WordPressのプラグインもまず最初にでてきます。
基本的に外部サイトからのURLを入力すればサムネとして生成されるので特に問題なく利用できます。
問題点としてはGIF動画はアイキャッチとして表示されますがwebp動画は生成されずエラーが表記されます。
通常のブロガーであれば気にすることは無いですが、ちょっと特殊な作業をする場合には問題が発生します。
使い方が気になる方は他のひとの記事ですが、参考にしてください。
XO Featured Image Tools
このプラグインも結構有名なものになります。特に設定いらずで一番最初の画像を勝手にサムネイルとして生成してくれる優れものです。
アイキャッチの添付忘れや設定漏れの防止に役立つプラグインです。
私も一時期、お世話になっておりました。
Featured Image with URL
当初、Webp画像がサムネイル表示されない原因解決に苦慮しておりました。プラグインを使用せず、コードを作成して対応しようとしましたが、私の知識ではどうしようもできずハードルが上がっていました、ChatGPTを駆使しても難しい部類でした。なんとか外部リンクから表示できるプラグインを探していた中でたどり着きました。
このプラグインに関する情報は皆無です。このプラグインを検索すると、基本的にFeatured Image from URL (FIFU)がでてきます。 from なのか with の違いになりますが、また by というのも存在しますが圧倒的に from が一番のようです。
実際、このプラグインですが他のサムネイル系のプラグインを使用したひとなら問題なく利用できるものです。
単純に外部リンクを貼り付ければお終いです。プレビュー機能は備わっています。
Webp動画がアイキャッチ画像に表示されない理由
結論としてはFeatured Image with URL を利用してもらえば全ては解決しました。
これ以外の方法もあるかと思いますが私のなかでの現在の最適解になります。
あまり利用しないと思いますが「F12」を押すとDevtoolsとツールが表示されます。
現在の画像や動画などの引用先や情報を教えてくれるものになります。
解決するまでの状況を説明になります。
非表示になっているサムネイルの状況は下記でした。
Request URL:https://i0.wp.com/cdn.****.jp/******.webp?w=1280&resize=1280,0&ssl=1
Status Code:403 Forbidden投稿ページに表示されている場合は下記です。
https://cdn.deli8.jp/cdn.****.jp/******.webp
Status Code:200 OK (from memory cache)https://i0.wp.com上記のようにアドレスが相違しているために 403 Forbidden が返されていることになります。
これに気づくまでに時間かかりました。また、解決方法も苦戦しました。
403 Forbidden になるとSEOとして致命的
当初は理解しないまま記事更新をしておりましたが 403 が返っていますというメッセージが多発しサーチコンソールも真っ赤な状態になりました。
そもそも、なぜ403が返っているかの理解もできておりませんでした。
https://i0.wp.com/ は WordPress.com の Jetpack CDN
アドレスの https://i0.wp.com/ は WordPressの Jetpack CDN ということがChatGPTとの会話で発覚しました。
Jetpack経由で許可されていないリファラーからのアクセスなので403 になっているのが原因でした。
コメント