WordPressで壊れた画像を見つけて修正する方法
公開: 2022-08-11Web サイトで、破れた写真のようなイメージ アイコンを見たことがあるでしょう。 これは壊れた画像であり、置き換えないとウェブサイトに悪影響を及ぼす可能性があります。
画像はほとんどの Web サイトにとって重要です。 とりわけ、それらはページをより魅力的にし、重要な情報を伝え、検索エンジンのランキングを向上させます。
そのため、ウェブサイト上の壊れた画像に気づいたらすぐに見つけて修正することが重要です。 このガイドでは、破損した画像とは何かを説明し、WordPress サイトでそれらを修正する方法を示します.
コンテンツ:
- ブロークン イメージとは
- Web サイトの壊れた画像を検出する
- 壊れた画像の問題を修正する方法
- 不正なファイル パス
- ファイル名をクロスチェックする
- 不適切なファイル拡張子
- 相対パスを使用する
- イメージが存在することを確認する
- 転送の問題
- 結論
ブロークン イメージとは
簡単に言えば、破損した画像とは、ソース リンクが利用できないか破損している画像です。 ユーザーがサイトの壊れた画像のあるセクションにスクロールすると、壊れた画像のアイコンが表示されます。 URL のスペルミス、不適切なファイル パス、または存在しないサイトにリンクしている可能性があります。
これは、ユーザー エクスペリエンスに悪影響を及ぼすため、重大な問題です。 ユーザーがサイトで画像の欠落に遭遇すると、サイトを離れて競合他社に移動する傾向があります。
その結果、ウェブサイトの直帰率が上昇します。 したがって、これを防ぐには、常にサイトをスキャンして壊れた画像を探し、修正してください。 次のセクションでその方法を見てみましょう。
Web サイトの壊れた画像を検出する
WordPress Web サイトで破損した画像を検出する最も簡単な方法は、プラグインを使用することです。 そのようなプラグインの 1 つに Broken Link Checker があります。 このプラグインを使用すると、サイトの内部および外部リンクをスキャンして、破損したリンクや画像を見つけることができます。
プラグインをインストールして有効にすると、設定 >> リンクチェッカーからプラグインの設定ページにアクセスできます。
Broken Link Checker プラグインは、ウェブサイトのリンク切れをスキャンします。 問題がある場合は、ここから表示されるか、メールで通知されます。
このプラグインには、検索エンジンが壊れたリンクをたどらないようにするオプションも用意されています。 このオプションを有効にして、壊れた画像が SEO ランキングに影響しないようにすることができます。
壊れた画像を修正する
WordPress Web サイトで画像が欠落する可能性があるいくつかのシナリオがあります。 このセクションでは、その理由とその修正方法について説明します。
不正なファイル パス
ウェブサイトに画像を追加するとき、WordPress は画像の場所を指定するファイル パスを作成します。 Web ブラウザは、画像の src 属性のパスを使用して画像を見つけます。 画像へのパスが正しくない場合、画像は読み込まれず、表示されません。
これを修正するには、画像アイコンが壊れている投稿またはページを見つけて、新しい画像に置き換えます。 これを行うには、ダッシュボードにログインし、WordPress 投稿ページに移動します。 次に、画像が壊れている投稿にカーソルを合わせ、[編集]を選択します。
投稿エディターで、画像が壊れているセクションまでスクロールし、それをクリックして [置換] を選択します。 メディア ライブラリから画像を選択するか、新しい画像をアップロードできます。
壊れた画像を置き換えたら、[更新] をクリックして変更を保存します。
従来のエディターを使用している場合は、画像をクリックしてからペンアイコンを選択し、破損した画像を編集します。
ここで、[置換] ボタンをクリックして、メディア ライブラリから画像を選択します。 最後に、[更新] をクリックして画像を置き換えます。
カスタム HTML 画像の置き換え
カスタム HTML または CSS を使用して画像を追加した場合は、パスが正しいことを確認する必要があります。 これを確認するには、イメージを追加した場所を確認する必要があります。 追加の CSS ブロックにある可能性があります。 その場合は、以下の手順に従ってください。
補足:テンプレート内の画像の置き換えは、技術的な作業になる可能性があります。 WordPress を初めて使用する場合は、当社の専門家にテンプレートの問題の修正を手伝ってもらうことができます。
まず、WordPress ダッシュボードにログインしてから、 [外観] >> [カスタマイズ] に移動します。
その後、Additional CSS ブロックまたは Custom CSS メニューを選択します。
コード エディターで、画像が追加されたコード行を見つけ、画像へのパスを強調表示します。 次に、右クリックして、[ファイルへのパスに移動...] を選択します。
画像が利用できない場合、404 not found エラーが発生します。 画像をウェブサイトに再アップロードし、ファイルへのリンクをコピーしてここに貼り付けるだけです。
画像をアップロードするには、 [メディア] >> [新規追加]に移動します。 その後、[ファイルの選択] をクリックして、画像ファイルを選択します。 アップロードが完了したら、[ URL をクリップボードにコピー] ボタンをクリックします。
カスタマイザ ページに戻り、壊れた画像リンクをアップロードしたばかりのものに置き換えます。 最後に、[公開] をクリックして変更を保存します。
ファイル名をクロスチェックする
これは、画像の読み込みに関する問題の一般的な原因です。 画像のスペルがメディア ライブラリ内のものと同じであることを確認してください。 間違いは、異なる特殊文字と同じくらい小さい場合もあります。 ダッシュ (-) の代わりにアンダースコア (_) を入力すると、イメージが壊れる可能性があります。
この問題を解決するには、投稿またはページのファイル名をメディア ライブラリの元の画像と比較する必要があります。 これを行うには、WordPress ダッシュボードにログインしてから、 Media >> Libraryに移動します。
次に、検索ボックスを使用して、比較する画像を見つけます。 その後、画像の上にカーソルを置き、[表示]を選択します。
アドレス バーに、画像へのパスが表示されます。 以下に示すように、強調表示された部分が画像の名前です。
壊れた画像の投稿に移動し、ファイル名も確認します。 これを行うには、ブラウザーでページを開き、壊れた画像を右クリックして [新しいタブで画像を開く]を選択します。
両方のファイル名に不一致がある場合、画像が表示されない原因である可能性があります。 404 not found エラーが表示されます。
この問題を解決するには、破損した画像で投稿を編集し、間違ったファイル名をメディア ライブラリのファイル名に置き換える必要があります。
ファイル名を修正すると、投稿エディターに画像が表示されます。 そうでない場合は、画像を再アップロードして投稿に追加できます。 投稿を更新して変更を保存してください。
不適切なファイル拡張子
ファイル拡張子も確認する必要があります。 ファイル名のスペルは正しくても、ファイル拡張子が正しくない場合があります。 たとえば、画像を .jpg ファイルとしてアップロードできますが、コードでは拡張子が .png になっています。 これにより、問題が発生する可能性があります。
もう 1 つの一般的な問題は、「jpg」および「jpeg」の画像拡張子で発生します。 両方の形式は同じですが、一方を他方と入れ替えると、イメージが壊れるというエラーが発生する場合があります。
相対ファイル パスを使用する
相対パスは、ホームページの URL に関連するファイルへのリンクです。 WordPress では、相対パスはドメイン名を取り出し、ドメインの後のパスのみを使用します。
したがって、「src」属性では、 「https://example.com/wp-content/uploads/image.png」ではなく、ソースが「/wp-content/uploads/image.png」になります。 そして、あなたの画像は短いリンクでうまく機能します.
相対パスを使用する利点の 1 つは、ドメイン名を変更してもイメージが機能することです。 ファイルが同じサーバーでホストされている限り、これは当てはまります。
Make Paths Relative プラグインなどのプラグインを使用して、WordPress にメディア ファイルの相対パスを強制的に使用させることができます。 プラグインのインストールとセットアップは簡単です。
プラグインをインストールしてアクティブ化したら、 [パスを相対にする] >> [設定]に移動して、プラグイン設定ページを開きます。
ここで、オプションを選択して画像の相対パスを有効にし、[変更を保存] をクリックして変更を登録します。 相対パスを使用してページに画像を表示できるようになりました。
イメージが存在することを確認する
別の Web サイトでホストされている画像にリンクしている可能性があります。 そのサイトがダウンするか、別のサーバーに移転すると、イメージは存在しなくなります。
さらに、別のサイトに直接リンクすると、画像を取得しているサイトでのサーバーの使用が増加します。 ホスト Web サイトでホットリンクが無効になっていると、画像が表示されなくなります。
これを防ぐには、画像をページに追加する前に、すべての画像を Web サイトにアップロードすることをお勧めします。 また、使用許可を得ている場合を除き、サードパーティの Web サイトの画像を使用しないでください。
転送の問題
これは一般的な問題ではありませんが、発生します。 場合によっては、サーバーが過負荷になり、リクエストがタイムアウトする前にすべてのページ アセットを十分に速く読み込めないことがあります。
ほとんどの場合、安価な Web サーバーで発生します。 これを解決するには、サーバーの容量をアップグレードするか、信頼できる Web ホストに移行する必要があります。
プラグインを使用して、画像の遅延読み込みを有効にすることもできます。 有効にすると、ユーザーがセクションにスクロールしたときにのみ、サーバーが画像を読み込みます。 これにより、サーバー リソースが解放され、ウェブサイトが高速化されます。 詳細については、スピード最適化ガイドをご覧ください。
まとめ – 壊れた画像の修正
Web サイトで画像の破損や欠落の問題が発生することは珍しくありませんが、これは非常に深刻な問題であり、早急に対処する必要があります。 オンライン ストアを運営している場合、ユーザーがストアで商品画像を表示できないと、潜在的な顧客を失う可能性があります。
このガイドでは、破損した画像の原因のいくつかと、WordPress Web サイトで画像を修正する方法のヒントについて説明しました。
壊れた画像を修正することは、Web サイトの直帰率を下げる 1 つの方法です。 サイトのパフォーマンスを向上させるために、画像を最適化する必要もあります。 これに関する詳細なチュートリアルについては、画像最適化ガイドをご覧ください。