Altタグとは何ですか？どのように使用する必要がありますか？

公開: 2020-06-22

画像は、ウェブサイトを魅力的で視覚的に魅力的なものにするのに役立ちます。 ただし、代替テキスト（「代替テキスト」または「代替タグ」とも呼ばれます）を使用して画像を最適化しないと、サイトのユーザーエクスペリエンスとアクセシビリティを向上させる重要な機会を逃してしまいます。

それらを適切に使用するには、最初にaltタグが何であるかを理解することが重要です。 この投稿では、altタグとは何か、なぜそれらが使用されるのかについて説明します。 また、WordPressの画像にaltタグを追加する方法を説明し、そのためのいくつかのベストプラクティスを紹介します。

始めましょう！

私たちのYoutubeチャンネルを購読する

Altタグとは何ですか？

Altタグは、Webページ上のコンテンツとコンテキストを説明するために、HTMLの画像に追加されます。 メディアファイルを正しくロードまたは表示できない場合、altタグは画像コンテナ内にも表示されます。

画像の代わりにブログ投稿に表示されるaltタグ。

Altタグは、視覚障害のあるユーザーなど、スクリーンリーダーを使用するユーザーがWebサイトのコンテンツを理解するのに役立ちます。 さらに、検索エンジンボットは、サイトをクロール、インデックス作成、ランク付けするときに、それらを使用して画像を解釈します。

画像タグ内に追加された品質altタグは、画像が何を示しているかだけでなく、ページ上でのその目的を説明する簡単な説明です。 HTMLコードで使用すると、完全な画像タグは次のようになります。 

<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

画像のaltタグは、画像のタイトルやキャプションと混同されることがあります。 ただし、画像のタイトルは別の種類の属性です。 人が画像の上にマウスを置くと、ポップアップテキストとして表示されます。 一方、キャプションは画像とともに表示され、通常はその下に表示され、追加情報や詳細を提供します。 通常の状況では、訪問者はあなたの画像のaltタグを見ることはありません。

画像に代替タグを使用する理由

Altタグは複数の目的を果たします。 それらを使用する必要はありませんが、使用することにはいくつかの大きな利点があります。 これらは検索エンジンクローラーと画面読み上げツールの両方で使用されるため、Webアクセシビリティと検索エンジン最適化（SEO）の重要なコンポーネントです。

それらはWebアクセシビリティを改善します

Altタグは、支援技術やテキストのみのブラウザを使用している場合でも、訪問者がWebサイトのコンテンツにアクセスして楽しむことができるようにするのに役立ちます。 視覚障害のある人があなたのウェブサイトにアクセスすると、そのスクリーンリーダーがページ上のテキストを読み上げます。 画像に到達すると、altタグを使用してその画像が何であるかを記述します。

altタグがない場合、スクリーンリーダーは代わりに画像ファイル名を読み取る場合があります。 これは通常、画像を適切に説明するのに効果がないだけでなく、特にファイル名がSEOに最適化されていない場合は、混乱を招き、混乱を招く可能性があります。

WordPressで画像のaltタグフィールドを空のままにした場合など、場合によっては、スクリーンリーダーはその画像を完全にスキップします。 あなたがあなたのウェブページに含める画像が目的を果たしていると仮定すると、この不在は訪問者があなたのコンテンツを消費するときにあなたが意図した完全な価値や経験を得ていないことを意味します。

彼らはあなたの検索エンジンのランキングを上げることができます

画像のaltタグを使用すると、ターゲットにしようとしているキーワードのランク付けが簡単になります。 検索エンジンボットはインテリジェントですが、人間と同じように画像の視覚的側面を解釈して理解することはできません。

代替属性は、画像を翻訳するための、より具体的には関連するキーワードを組み込むためのテキストベースの代替手段を提供します。 ターゲットキーワードを含むテキストによる説明は、画像検索で上位にランク付けされる可能性を高めることができます。

SEOで画像（およびaltタグ）が果たす重要な役割を強調するために、「キングサイズの寝具」の検索エンジン結果ページ（SERP）を検討してください。

の画像ベースの検索結果

最初のページは、テキストベースの結果を生成するだけではありません。 画像の結果もたくさんあります。 最適化して正しく使用すると、altタグは、SEOを向上させ、ハイパーリンクされたクリック可能な画像を生成して、このような検索に表示するのに役立ちます。 これは、eコマースサイトやランディングページにとって特に有益です。

WordPressで画像の代替タグを追加する方法

Webサイトで画像のalt属性を使用する利点を理解したら、実際にそれを行う方法を学びましょう。 幸いなことに、WordPressはこのタスクを信じられないほど簡単でシンプルにします。

WordPressで画像のaltタグを追加するには、管理ダッシュボードにログインして、画像を追加するページまたは投稿に移動します。 WordPressエディター内で、プラスアイコンをクリックし、画像ブロックを選択します。

WordPressエディターのImageブロック。

次に、画像をアップロードするか、メディアライブラリから画像を選択します。 ブロックに画像を挿入すると、右側のサイドバーに[画像設定]パネルが開きます。 [代替]テキストボックスに説明を入力できます。

WordPressエディターの画像代替テキストボックス。

完了したら、変更を保存します。 既存の画像に対してもこれを行うことができます。 たとえば、サイトですでに公開されている投稿の画像を更新する場合は、画像をクリックして、サイドバーに新しいaltタグを入力するだけです。

HTMLで画像の代替タグを追加する方法

WordPressまたはaltタグを追加および編集するためのモジュールを含む別のCMSを使用すると、HTMLコードが自動的に追加されます。 ただし、自分でコードを追加したい場合は、簡単に追加できます。

WordPressにaltタグHTMLを追加するには、関連するImageブロックをクリックします。 ブロックツールバーで、縦に3つのドットが付いたボタンを選択し、[ HTMLとして編集]を選択します。

するオプション

HTMLコードは画像タグを表示します。 alt属性が空であることに気付くでしょう。 テキストを引用符で囲みます。

WordPressの画像タグのHTMLコード。

完了したら、[プレビュー]ボタンをクリックしてビジュアルエディターに戻り、変更を保存します。 これと同じ構文と形式を使用して、任意のファイルのHTML画像タグを編集できます。

画像の代替タグを作成するためのヒントとベストプラクティス

altタグを作成するときは、覚えておくべきいくつかの重要なポイントがあります。 これらのベストプラクティスを順守することで、altタグをより効果的にすることができます。

  • 具体的かつ説明的である。 altタグの目的は画像を説明することなので、できるだけ具体的にする必要があります。 説明が十分かどうかわからない場合は、そのテキスト行だけを見た場合にどの画像を視覚化するかを検討してください。
  • 短くしてください。 詳細にしたい場合は、altタグを段落の長さ（または全文）にする必要もありません。 最大100〜125文字程度を目指します。
  • 冗長にしないでください。 altタグを最大限に活用するために、不要な単語を含めたくありません。 これには、説明の前に「の写真」または「の画像」を追加することが含まれます。 これらの要素はすでに暗示されているため、不要です。
  • 関連するキーワードを自然に取り入れます。 ターゲットキーワードを検討し、可能であれば、ページのコンテキスト内に有機的に組み込みます。 これは、テキストに対応する関連性の高い画像を使用する場合に簡単です。
  • キーワードの乱用は避けてください。 altタグでキーワードを使用するとSEOを改善できますが、やりすぎないように注意してください。 キーワードの乱用は、実際にはSEOに悪影響を及ぼし、ユーザーエクスペリエンスを低下させる可能性があります。
  • テキストの代わりに画像を使用しないでください。 altタグの主な目的は、ページ上の視覚要素を処理および解釈できないマシンにテキストコンテキストを提供することです。 したがって、特に見出しやページタイトルの場合、画像内でテキストを使用することは意味がありません。

画像のaltタグを作成するときは、画像を見ることができない可能性のある人に画像を説明することが目標であることを常に忘れないでください。 SEOとキーワードを考慮に入れることは間違いなく賢明なアイデアですが、実際のユーザーを念頭に置いてaltタグを作成すると、より良い結果を生み出すのに役立ちます。

結論

画像は、Webページの外観を改善し、より面白く、有益で、魅力的なものにするのに役立ちます。 ただし、それらの価値を最大化するには、altタグでそれらを補足するのが最善です。 これらの簡潔で説明的な説明は、ユーザーと検索エンジンの両方にコンテキストを提供します。 画像のaltタグは、ユーザーエクスペリエンスを向上させ、アクセシビリティを向上させ、関連するキーワードのランク付けを容易にするのに役立ちます。

altタグとは何か、またはWordPressに追加する方法について他に質問がありますか？ 以下のコメントセクションでお知らせください！

Honza Hruby /shutterstock.comによる注目の画像