WordPressに画像ALTテキストを追加する方法

公開: 2025-06-17

より一般的に「Alt Text」として知られている代替テキストをWordPressの画像に追加することは、WebサイトにアクセスしやすくSEOに優しいものにするためのシンプルだが不可欠なステップです。 ALTテキストは、視覚的要素を正確に説明し、そうでなければ見逃される重要な情報を受け取ることにより、視覚障害のあるユーザーを支援します。優れたALTテキストを書くことは、検索エンジンとAIアルゴリズムが画像を理解するのにも役立ち、サイトの可視性を高めることができます。

このガイドでは、良いALTテキストを作るもの、重要な理由、3つの簡単な方法を使用してWordPressの画像に追加する方法を説明します。

Altテキストとは何ですか、そしてなぜそれが重要なのですか？

ALTテキストは、サイトのコードに表示される画像の簡単な説明です。スクリーンリーダーはそれを使用して、視覚障害のあるユーザーに画像を説明します。さらに、画像の読み込みに失敗すると、ALTテキストがブラウザに表示され、コンテンツが理解できるようになります。スクリーンショットに明確で説明的なALTテキストを提供することは、検索エンジンの最適化と可視性にも貢献します。

WordPressでALTテキストを使用することの4つの利点を持つインフォグラフィック。

ユーザーエクスペリエンスの観点から、ALTテキストは、画面の寸法のために画像が正しく表示されない携帯電話やタブレット全体でコンテンツが意味のあるアクセス可能であることも保証します。効果的なALTテキストを書くことで、サイトをより包括的にするだけでなく、より価値のある実用的なWordPressサイトを作成します。

HTML ALT属性の理解

ALT属性は、画像の指定に使用されるHTMLコードの不可欠な部分です。 IMGタグに含まれており、理想的には画像の簡単な説明を提供します。たとえば、画像に「ラザニアを食べる大きなオレンジ色の猫」と書かれたALT属性がある場合、スクリーンリーダーは「ラザニアを食べる大きなオレンジ色の猫」をユーザーに発表します。

その下にHTMLコードの例を備えたオレンジ色の猫のイラストまたは写真。

WordPressにALTテキストを追加する方法

WordPressのALTテキストを3つの主な方法で追加または編集できます。メディアライブラリ、Gutenbergの編集者、または直接コードを介して。 3つのオプションすべてを調べてみましょう。そうすれば、あなたとあなたのウェブサイトに適したオプションを選択できます。

1。WordPressメディアライブラリの使用

これは、すでにアップロードした画像にAltテキストを追加する最も簡単な方法です。

  • WordPressダッシュボードにログインします。
  • メディア>ライブラリに移動します。
  • 編集する画像をクリックします。
  • 右側の添付ファイルの詳細ペインで、 ALTテキストフィールドを見つけます。
  • 説明的なaltテキストを入力します。フィールドから離れてクリックするか、ウィンドウを閉じます。 WordPressは変更を自動的に保存します。
WordPress Media LibraryでALTテキストを追加するフィールドを使用できるWebフォーム。

2。GutenbergEditorの使用

投稿またはページに画像を追加または編集している場合は、そこにALTテキストを設定できます。

  • Gutenbergの編集者で投稿またはページを開きます。
  • 編集する画像ブロックをクリックします。
  • 右側のサイドバーで、画像設定とALTテキスト（代替テキスト）フィールドを見つけます。
  • あなたのaltテキストを入力します。
  • 変更を維持するために、投稿またはページを保存または更新します。
フォームフィールドは、Gutenbergの編集者の右側からAltテキストを追加するために強調表示されます

3。コードを直接編集します

HTMLに満足している人には、コードエディターを使用できます。

  • Gutenbergエディターのコードエディターに切り替えます。
  • 画像の<img>タグを見つけます。
  • Alt =” Your Decriptive Text”属性を追加または編集します。
  • 投稿またはページを保存または更新します
画像のALTテキストを含むWordPressのコードのスニペット。

WordPressにALTテキストを追加することは、メディアライブラリ、Gutenbergの編集者を好むか、コードを直接編集するかなど、非常に簡単です。これらの各メソッドをテストページまたはステージングWebサイトで試すことにより、すべてのユーザーと検索エンジンにアクセスしやすく、説明的で、最適化されていることを確認できます。

効果のあるテキストを書くためのヒント

私たちが見たように、効果的なALTテキストを書くことは、あなたのウェブサイトをアクセスしやすくし、ユーザーエクスペリエンスを向上させ、コンテンツがすべての人に包括的であることを保証するための不可欠なスキルです。次のヒントは、スクリーンリーダーに依存しているユーザーを含むすべてのユーザーにとって明確で簡潔で意味のあるALTテキストを作成するのに役立ちます。

簡潔で説明的である

Altテキストを書くときは、画像の本質的な要素を明確かつ簡単に説明することに焦点を合わせます。イメージのコンテンツを不必要な詳細で圧倒することなく、ユーザーが画像のコンテンツを理解するのに十分な情報を提供したいと考えています。理想的には125文字未満の主なアイデアをキャプチャする文やフレーズを目指しているので、読みやすく、スクリーンリーダーが処理するのは簡単です。

キーワードの詰め物を避けてください

SEOに多くのキーワードを追加するのは魅力的ですが、Altテキストに無関係または繰り返しのキーワードを詰め込むと、ユーザーにとって混乱を招き、検索ランキングに害を及ぼす可能性があります。代わりに、自然言語を使用して、画像の説明に真に合う場合にのみキーワードを含めます。検索エンジンの最適化よりも明確性とユーザーエクスペリエンスに優先順位を付けます。

女性は、ウェブサイト上のオレンジ色のグラフィックの横にあるキーワードの長いリストを見ます。

必要でない限り「イメージ」をスキップします

スクリーンリーダーは、画像に遭遇したときにすでに発表しているため、「画像」や「写真」などのフレーズでALTテキストを開始することは通常冗長です。 「山々の夕日のイメージ」ではなく、「山の夕日」などの説明に直行してください。唯一の例外は、写真、イラスト、またはアイコンを区別するなど、コンテキストが明確化を必要とする場合です。

各altテキストを一意にします

ページにいくつかの同様の画像がある場合は、それぞれに同じALTテキストを使用しないようにします。代わりに、説明を調整して、各画像を一意にするものを強調します。これにより、ユーザーはコンテキストを理解するのに役立ち、特にフォトギャラリーや製品リストの場合、サイトがアクセスしやすく、有益なままでいることを保証します。

コンテンツと機能を説明してください

画像がページにある理由を考えてください。純粋に装飾的な場合は、Altテキストを空白のままにしておくことができます（空のalt属性、 alt =””を使用）。ただし、画像がボタン、リンク、インフォグラフィックなどの目的を提供する場合、表示されていることとそれが何をするかの両方を説明します。たとえば、「PDFボタンをダウンロード」または「2022年から2025年までの売上成長を示すグラフ」これにより、ユーザーはサイトにどのようにアクセスするかに関係なく、必要なすべての情報を取得します。

ALTテキスト作成のためのツール

いくつかのツールは、効果的なALTテキストを書くのに役立ちます。たとえば、WordPress用のYoast SEOプラグインは、画像のALTテキストを生成し、検索エンジン用に最適化される機能を提供します。 Adobe Creative Cloudは、ユーザーがビジュアル用のALTテキストを作成するのに役立つツールも提供します。

さらに、alttext.aiのようなオンラインツールは、特にALTテキストを書くことに不慣れな人や、多数の画像のALTテキストを生成する必要があるために非常に貴重です。

Alt Text Generator Webサイトからのスクリーンショットの使用方法を示しています。

これらのツールはプロセスを簡素化し、すべてのWebサイトの画像に対して説明的でSEOフレンドリーなALTテキストを簡単に作成できます。

長期的な利益を伴う短期作業

WordPressで画像にALTテキストを追加するのは迅速で簡単で、アクセシビリティとSEOが報われます。新しい画像をアップロードしたり、古い画像を更新しても、altテキストをルーチンの一部にしてください。あなたの訪問者（および検索アルゴリズム）はあなたに感謝します。

WordPressプロジェクトのユーザーフレンドリーにすることについて詳しく知りたい場合は、よりアクセスしやすいサイトの7つの重要な要素のガイドをご覧ください。