WordPressに画像を正しく追加する方法（ステップバイステップ）

WordPressの投稿に最適な画像を見つけるのは素晴らしい気分ですが、ウェブサイトの速度低下やSEOの低下を心配する心配がつきまとうことがよくあります。

それはもっともな懸念事項です。間違ったアプローチは、訪問者をイライラさせ、検索ランキングを低下させる可能性があります。成功するサイトのためには、このバランスを正しく取ることがいかに重要であるかを私たちは理解しています。

何千もの記事を管理してきた経験から、ページを高速に読み込み続けながら、画像をSEOに活用できるシンプルなプロセスを開発しました。これは私たちが毎日頼りにしている方法です。

このガイドでは、これらの正確な手順を順を追って説明します。ウェブサイトの成長に役立つように画像を正しく追加する方法を学びます。

WordPressで画像を正しくアップロードすることの重要性

ユーザーがソースから画像を直接コピーしてウェブサイトのコンテンツに貼り付けることがあります。残念ながら、これはページの読み込みが遅い、ユーザーエクスペリエンスが悪い、SEOが悪いなどの問題を引き起こす可能性があります。

WordPressウェブサイトに画像を追加するときは、正しく行うことが重要です。これは、適切なファイル形式、ファイル名、および代替テキストを使用することを意味します。

説明的な画像ファイル名を使用することも重要です。たとえば、IMG_9021.jpg のような一般的なファイルをアップロードする代わりに、アップロードする前に chocolate-chip-cookie-recipe.jpg のような説明的な名前に変更する必要があります。

この簡単なステップにより、検索エンジンは画像の内容を把握しやすくなり、SEOに役立ちます。

画像を適切に追加することは、画像をリサイズして、読み込みが速く、すべてのデバイスで見栄えがするようにすることも意味します。たとえば、JPEGのような一部の画像形式は、他の形式よりも圧縮率が高いです。つまり、JPEG画像はサーバー上のスペースを少なく占有し、読み込み時間が短くなります。

これらのフォーマットと、画像圧縮プラグインを使用することで、ウェブサイトのユーザーエクスペリエンスを向上させることができます。

WordPressの画像ブロックを使用すると、各画像に代替テキストのような重要なSEO情報を手動で追加できます。これにより、ウェブサイトのランキングを向上させ、障害を持つ人々のウェブページへのアクセス性を改善することができます。

それでは、WordPressに画像を正しく追加する方法を見ていきましょう。いくつかの方法をカバーしますので、以下のクイックリンクを使用してチュートリアルのさまざまなセクションにジャンプできます。

ブロックエディター（Gutenberg）に画像を追加する方法

WordPressブロックエディターでは、画像ブロックを使用して簡単に画像を追加できます。

まず、画像を追加したい既存または新規のページ/投稿を開く必要があります。

そこに着いたら、画面左上の「ブロックを追加」（+）ボタンをクリックしてブロックメニューを開きます。ここから、「画像」ブロックを見つけて、投稿またはページに追加する必要があります。

それが完了したら、「メディアライブラリ」ボタンをクリックして、画面に「メディアを選択またはアップロード」プロンプトを表示します。

ここで、コンピューターから画像をアップロードしたい場合は、「ファイルのアップロード」タブに切り替えることができます。

ただし、メディアライブラリから画像を追加したい場合は、「メディアライブラリ」タブに切り替えることでそれを行うこともできます。

右側の「添付ファイルの詳細」パネルで、重要な情報を追加できます。「代替テキスト」フィールドには、画像が何を示しているかの簡単な説明を記入してください。これはSEOとスクリーンリーダーを使用する訪問者にとって非常に重要です。

また、「タイトル」（画像にカーソルを合わせたときに表示される）や「キャプション」（画像のすぐ下に表示される説明文）を追加することもできます。

詳細については、WordPressで画像にキャプションを追加する方法に関する初心者向けガイドをご覧ください。

次に、「選択」ボタンをクリックして、画像をページまたは投稿に追加します。

アップロード後、右側のブロックパネルから画像のサイズ、寸法、境界線、スタイルをさらにカスタマイズできます。

WordPressでの画像の追加と配置方法に関するチュートリアルをご覧ください。

最後に、「更新」または「公開」ボタンをクリックして設定を保存します。

これで、Gutenbergエディターに画像を正しく追加しました。

クラシックエディターに画像を挿入する方法

まだ古いWordPressのクラシックエディターを使用している場合は、この方法を使用できます。

まず、WordPressダッシュボードから画像を追加したいページまたは投稿にアクセスする必要があります。そこにアクセスしたら、「メディアを追加」ボタンをクリックしてメディアライブラリを起動します。

その後、「ファイルのアップロード」タブに切り替えて、コンピューターから画像をアップロードできます。

または、メディアライブラリから画像を追加するには、「メディアライブラリ」タブに切り替えるだけです。

画像を追加したら、その画像に代替テキストとタイトルを追加する必要があります。必要に応じて説明とキャプションを追加することもできます。

最良の結果を得るには、各フィールドを特定の目的に使用してください。代替テキストは、検索エンジンと視覚障害のあるユーザーのために画像を明確に説明する必要があります。

キャプションは読者にとって表示される説明であり、タイトルはデスクトップで画像にカーソルを合わせたときに余分な情報を提供できます。

次に、「投稿に挿入」ボタンをクリックしてください。

これで、画像がWordPressの投稿またはページに追加されます。

ここから、画像の上にある配置アイコンを使用して配置を変更できます。鉛筆アイコンをクリックすると、画像をさらに編集できます。

これにより、画面に「画像の詳細」プロンプトが表示され、サイズを変更したり、画像タイトル属性、CSSクラス、配置などを追加したりできます。

完了したら、「更新」ボタンをクリックして変更を保存してください。

その後、「公開」または「更新」ボタンをクリックして投稿を保存するだけです。

WordPressメディアライブラリに画像を追加する

もう1つの方法は、画像を直接メディアライブラリにアップロードすることです。これは、投稿やページに追加する前に画像を準備および整理するのに最適な方法です。

メディアライブラリから画像を追加するには、WordPress管理エリアからメディア » 新規追加ページにアクセスする必要があります。

そこに着いたら、「ファイルを選択」ボタンをクリックしてコンピューターから画像をアップロードします。次に、画像の横にある「編集」リンクをクリックします。

これにより、「メディアを編集」ページに移動します。ここで、まず画像のタイトルを変更できます。その後、下にスクロールして代替テキスト、キャプション、説明を追加できます。

これが完了したら、「画像の編集」ボタンをクリックすることもできます。

これにより別のページに移動し、そこで好みに応じて画像をトリミング、スケーリング、回転、または反転できます。詳細な手順については、WordPressで基本的な画像編集を行う方法に関する初心者向けガイドを参照してください。

満足したら、「更新」ボタンをクリックして変更を保存してください。

これにより、「メディアを編集」ページに戻り、設定を保存するために再度「更新」ボタンをクリックする必要があります。

これで、画像をメディアライブラリに正常に追加しました。

次に、WordPress管理サイドバーからこの画像を追加したい投稿にアクセスします。そこに到着したら、「ブロックを追加」（+）ボタンをクリックして、投稿に「画像」ブロックを追加します。

次に、「メディアライブラリ」ボタンを選択する必要があります。

これにより、画面に「メディアを選択またはアップロード」プロンプトが表示され、メディアライブラリにアップロードした画像が一番上に表示されているのがわかります。

選択すると、メディアライブラリページからタイトル、代替テキスト、キャプション、説明が既に追加されていることがわかります。

次に、「選択」ボタンをクリックして、画像をブロックエディターにアップロードします。

最後に、「公開」または「更新」ボタンをクリックして設定を保存します。

WordPress SEOのために画像を最適化する方法

画像を投稿/ページに追加したら、検索エンジン向けに最適化することも非常に重要です。残念ながら、WordPressには画像用の高度なSEO機能は組み込まれていません。

ここで、WordPress用All in One SEO (AIOSEO)が登場します。

これは、コンテンツ（画像を含む）を検索エンジン向けに最適化するのが非常に簡単になるため、市場で最高のWordPress SEOプラグインです。

WPBeginnerでは、検索エンジンのランキングを向上させるためにこれを使用しており、素晴らしい結果を見てきました。私たちの経験についてさらに知るには、AIOSEOレビューをご覧ください。

まず、AIOSEOプラグインをインストールしてアクティベートする必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティベーション後、セットアップウィザードを構成する必要があります。

詳細については、WordPressでAll in One SEOを正しく設定する方法に関するガイドをご覧ください。

次に、WordPress管理サイドバーの**All in One SEO » Search Appearance**ページに移動し、「Image SEO」タブに切り替えます。

その後、下にスクロールして「画像SEOを有効にする」ボタンをクリックして、この機能を有効にします。

これで、画像のSEO設定が表示されるようになります。ここでは、タイトル、代替テキスト、キャプション、説明、ファイル名の各タブが表示されます。

自動画像タイトルの設定

画像SEOページで「タイトル」タブに切り替えたら、スマートタグを使用して画像のタイトル形式を作成することから始めることができます。

これらのスマートタグは、画像のタイトル属性を自動的に生成します。これは、訪問者が画像にマウスカーソルを合わせたときに表示されるものです。

たとえば、各画像のタイトル属性に画像タイトルとサイトタイトルを使用したい場合は、「タイトル形式」フィールドにこれらのスマートタグを追加できます。

これは、'My Awesome Blog' という名前のサイトにある 'Chocolate Chip Cookie' というタイトルの画像が、自動的に 'Chocolate Chip Cookie – My Awesome Blog.' という画像タイトル属性を取得することを意味します。

その後、ファイル名から画像タイトルを作成する際にAIOSEOに一部の文字を自動的に削除させたい場合は、句読点の削除オプションを有効にすることもできます。

たとえば、「an-example-image」のような画像ファイルを保存するときにダッシュを使用する場合、「スペースに変換する文字」セクションで「ダッシュ（-）」オプションを選択できます。

これを行うと、AIOSEOは自動的にこれらのダッシュを削除し、スペースに変換します。これは、'an-example-image.jpg'のようなファイル名を、ユーザーと検索エンジンの両方にとってより良い、クリーンで読みやすいタイトルである'an example image'に自動的に変換するため役立ちます。

その後、「ケーシング」セクションまでスクロールダウンします。

ここから、タイトルのケーシングオプションを選択できます。タイトルをより読みやすくするために、文頭大文字またはタイトル大文字を選択することをお勧めします。

自動代替テキストの設定

タイトル設定を構成した後、上部から「代替テキスト」タブに切り替えます。

ここから、「代替テキスト形式」オプションの横にあるスマートタグを使用して、すべての画像の代替テキストを自動生成できます。

その後、ダッシュ（-）やアンダースコア（_）のような文字をスペースに変換したい場合は、「句読点を削除」設定を有効にすることもできます。

同様に、AIOSEOが代替テキストを作成する際に削除したくない数字やプラス記号（+）などの文字がある場合は、「削除対象から除外する文字」セクションでこれらのオプションのチェックボックスをオンにすることができます。

代替テキストのケーシングを選択することもできます。

自動キャプションと説明の設定

画像の自動キャプションを生成するには、「キャプション」タブに切り替えます。

ここで、「アップロード時にキャプションを自動生成」オプションが有効になっていることを確認してください。その後、画像のキャプションを生成するために使用されるスマートタグを選択できます。

次に、「句読点の削除」機能を使用して、キャプションに文字を含めるか除外するかを選択し、大文字小文字の形式を選択できます。

完了したら、一番上にある「説明」タブに切り替える必要があります。

ここから、「アップロード時に説明を自動生成する」オプションが有効になっていることを確認してください。自動画像説明を生成するために使用したいスマートタグも選択する必要があります。

次に、「句読点の削除」機能を使用して、説明にアンダースコア、アポストロフィ、数字などの文字を含める/除外することもできます。

その後、画像の説明のケーシングを選択するだけです。

自動ファイル名の設定

前述したように、画像ファイルにSEOフレンドリーなファイル名を使用することをお勧めします。これは、画像をアップロードする前に行うこともできますし、AIOSEOに自動的に行わせることもできます。

「ファイル名」タブに切り替えると、AIOSEOが開始を支援するためのデフォルトの「句読点の削除」設定を提供していることがわかります。

ただし、タイトルまたは代替テキストを作成する際に、AIOSEOに画像ファイル名から削除してほしい文字がさらにある場合は、それらの文字を「削除する単語」ボックスに入力できます。

その後、ファイル名のケーシングを選択することもできます。

完了したら、「変更を保存」ボタンをクリックして設定を保存することを忘れないでください。

これで、画像をSEO向けに最適化しました。AIOSEOは、すべての画像のタイトル、代替テキスト、キャプション、説明を自動的に生成します。

より詳細な手順については、検索エンジン向け画像の最適化方法に関する初心者向けガイドをご覧ください。検索エンジン向け画像の最適化方法

ボーナス：ユーザーがWordPressで画像をアップロードできるようにする

また、ユーザーが独自の画像をWordPressブログにアップロードできるようにすることもできます。コンテストを開催している場合や、ユーザー生成画像を受け付ける写真ウェブサイトを運営している場合に役立ちます。

これには、市場で最高のコンタクトフォームプラグインであるWPFormsを使用できます。ドラッグ＆ドロップビルダーが付属しており、画像送信フォームを含むあらゆる種類のフォームを簡単に作成できます。

このプラグインを使用して、ウェブサイトのお問い合わせフォームや年次アンケートを作成しました。WordPressダッシュボードでフォームの入力内容を直接確認できるのが気に入っています。

詳細については、WPFormsレビューをご覧ください。

まず、WPForms プラグインをインストールして有効化する必要があります。詳細は、WordPressプラグインのインストール方法に関する手順をご覧ください。

有効化したら、WordPressダッシュボードから WPForms » 新規追加 画面に移動して、フォームビルダーを起動します。

ここから、フォームに名前を入力し、「シンプルなコンタクトフォーム」テンプレートの下にある「テンプレートを使用」ボタンをクリックします。

これにより、テンプレートがフォームビルダーにロードされ、右側にプレビュー、左側の列に利用可能なフィールドが表示されます。

ここから、「ファイルアップロード」フィールドをフォームにドラッグアンドドロップし、クリックして設定をさらにカスタマイズしてください。

フィールドのラベルと説明を変更したり、許可される拡張機能を指定したりすることもできます。

例えば、JPEGとPNGファイルのみを許可したい場合は、「許可されるファイル拡張子」フィールドにこれらのオプションを入力する必要があります。各拡張子はコンマで区切る必要があることに注意してください。

その後、左側の列で最大画像ファイルサイズとアップロード数を設定することもできます。

より詳しい手順については、WordPressでユーザーが画像をアップロードできるようにする方法のチュートリアルをご覧ください。

完了したら、「保存」ボタンをクリックして設定を保存します。

次に、画像アップロードフォームを追加したいページ/投稿を開きます。そこに移動したら、画面左上の「+」ボタンをクリックしてブロックメニューを開きます。

ここから、WPFormsブロックをページ/投稿に追加する必要があります。

ドロップダウンメニューから作成した画像ファイルアップロードフォームを選択するだけです。

最後に、「更新」または「公開」ボタンをクリックして設定を保存します。これで、WordPressサイトにアクセスしてフォームが機能していることを確認でき、訪問者はフォームを使用して画像を送信できるようになります。

WordPressで画像を簡単に追加する方法に関するよくある質問

当社の専門チームは、画像をどのように扱うのが最善かという質問を頻繁に受けます。以下に、よく寄せられる質問とその回答をいくつかご紹介します。

1. WordPressに最適な画像ファイル形式は何ですか？

最適な形式は画像によって異なります。JPEGは、品質とファイルサイズのバランスが良い多くの色を持つ写真に最適です。PNGは、ロゴのように透明な背景が必要なグラフィックに最適です。WebPは、優れた圧縮を提供する新しい形式ですが、非常に古いブラウザではサポートされていない場合があります。簡単なルールとして、写真にはJPEG、ロゴや透明度が必要な画像にはPNGを使用してください。

2. ウェブサイトの画像の読み込みを速くするにはどうすればよいですか？

最も重要な2つのステップは、画像のサイズ変更と圧縮です。アップロードする前に、必ず編集ツールを使用して画像を適切な寸法にリサイズしてください。

その後、専用の画像圧縮プラグインを使用すると、画質の目立った低下なしにファイルサイズがさらに自動的に縮小され、ページの読み込みが大幅に速くなります。

3.画像の代替テキストとキャプションの違いは何ですか？

Altテキスト（代替テキスト）は、検索エンジンや視覚障碍のある訪問者が使用するスクリーンリーダーのために画像を説明するHTML属性です。これはページ自体には表示されません。キャプションは、すべての訪問者が見ることができるように、画像のすぐ下に表示される説明です。

4. WordPressに複数の画像を同時にアップロードできますか？

はい。WordPressのメディアライブラリでは、複数の画像ファイルを一度にコンピューターからドラッグアンドドロップするだけでアップロードできます。「ファイルを選択」ボタンをクリックして複数の画像を選択し、まとめてアップロードすることもできます。これにより、多くの時間を節約できます。

5. WordPressで画像ギャラリーを作成するにはどうすればよいですか？

WordPressには、組み込みのギャラリーブロックがあります。投稿またはページにブロックを追加するだけで、新しい画像をアップロードしたり、メディアライブラリから既存の画像を選択したりできます。

これにより、美しく整理されたギャラリーが作成され、ブロックオプションで直接列数をカスタマイズできます。

この記事がWordPressに画像を正しく追加する方法を学ぶのに役立ったことを願っています。また、WordPressサイト用の美しい背景画像を見つける方法に関する初心者向けガイドや、パブリックドメインおよびCC0ライセンス画像の無料ソースのリストも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。