WordPressの代替属性の説明：画像の代替テキストとは何ですか？

ページや記事全体で画像を使用することがいかに重要かは誰もが知っています。 テキストの単なるブロックがより活発になり、より視覚的な方法で訪問者を引き付け、メッセージを伝えます。 しかし、1つ追加するときは、1つの奇妙なサウンドのフィールドに集中せざるを得ません。 「うーん、代替テキスト、それは今どうなるだろう」とあなたは考えます。 確かに、WordPress開発者がランダムに追加したフィールドにすることはできません。そこにある場合は、おそらく目的があります。

代替テキストは、画像タグに追加されたHTML属性です。 これらは短いテキスト文字列であり、WordPressが画像を表示できない場合に表示します。 代替テキストは画像SEOを改善します。 また、スクリーンリーダーと検索エンジンを使用する視覚障害のあるユーザーが画像の内容を理解するのにも役立ちます。

代替テキストには、「altタグ」、「altテキスト」、「alt属性」などのカジュアルな名前もいくつかあります。 それを最大限に活用するには、次のようなaltタグを考えるのが最善だと思います。alt属性は、長いレポートの「エグゼクティブサマリー」のようなものです。 画像（レポートなど）に含まれる内容を非常に簡潔かつ具体的に要約します。

一部の既存のCMSプラットフォームおよび多くのカスタムビルドのWebサイトでは、各ページのコードにその部分を手動で直接追加する必要があります。 しかし、ここにいる私たちのような幸運な人は、WordPressでその機能をはるかに簡単にします。

画像の代替テキストはWordPressでどのように機能しますか？

代替テキストは新しいものではありません。 また、WordPressだけが提供するユニークなものでもありません。 実際、これらは20世紀末のインターネットの最初の時代にまでさかのぼる非常に古い機能です。

HTML 2.0がリリースされた1995年の導入以来、altタグは3つの具体的な目的を果たしてきました。

• ブラウザが何らかの理由で画像を読み込めない場合、Altタグが画像の代わりにページに表示されます。
• スクリーンリーダーは、インターネットを閲覧するときに視覚的な支援を使用している人々のために、代替テキストを読み上げます。
• Googleのような検索エンジンボットは、画像の内容をよりよく理解するためにそれらを使用します。

したがって、代替テキストは優れたアクセシビリティ機能であり、追加の作業をそれほど必要としません。

WordPressの画像代替テキストの例

次に、代替テキストの例をいくつか見てみましょう。 altタグに何を含めたいかを正確に理解できるように、良い例と悪い例を強調しました。

良い代替テキストの例

これは、ブログ投稿の1つに挿入した画像です。 以下に示すように、画像の目的は、読者が記事に記載されている結果をどのように達成できるかを正確に示すことです。

作成したaltタグの最終結果は、 「お問い合わせページのNAPの良い例」です。

画像はコンテキストを追加し、ユーザーが問題を解決するのに役立つため、画像に適切にマークを付けて指摘することが重要です。

悪い代替テキストの例

一方、役に立たない代替テキストを作成することもできます。 まったく同じ画像に「NAP」または「businessNAP 」のaltタグが付いていると仮定します。

この代替テキストは、誰にも役立たず、時間しかかからないため、良くありません。 それで、代替テキストがいくつかの代替テキストよりも優れていると言うことですか？ それは議論の余地がありますが、私たちの意見では、そのようなaltタグはユーザーアクセシビリティの観点からは役に立たないということです。 また、Googleのクローラーのコンテキストも追加しません。 画像を表示できない最悪のシナリオでも、ユーザーはページ上にランダムな単語だけが表示されるため、そこに何があるかを示す簡潔な文字列ではなく、混乱したままになります。

したがって、悪いaltタグを作成するために時間を無駄にすることは価値がないと判断しました。 代わりに、私たちのサイトをチェックしてそれを行うことにしたとき、実際に役立つaltタグを作成する方がはるかに時間の投資になります。

WordPressで素晴らしい画像の代替テキストを書くための9つのベストプラクティス

これで、WordPressで画像のalt属性を操作する方法がわかりました。 それでは、正しく使用していることを確認するためのヒントとベストプラクティスをいくつか見ていきましょう。

1.代替テキストは125文字より短くする必要があります

altタグは125文字より短くしてください。 altタグの長さに関する厳密な規則はないため、経験則としてこの推奨事項を使用してください。 ただし、関連する場合はいつでも、この一般的な規則を犠牲にして、より説明的なテキストを作成してください。 それにもかかわらず、それは通常必要ありません。

その上、これは125文字がどのように見えるかの例です。

「aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa」

それはたくさんのテキストです！ ほとんどの場合、代替テキストをそれに合わせることができます。

2.適切な代替タグを書き込むか、まったく記述しないかのいずれか

しかし、より低いマージンはどうですか？ 技術的にはありません（もちろん、0を除いて）。 個人的な経験から言えば、怠惰な道を進み、一言か二言だけ書くことも、時間を費やす価値はありません。 つまり、優れたaltタグを作成する予定がない場合は、そもそもそれらを持っていなかったかのように優れています。

3.関連する代替タグを類似しているが一意に保つ

altタグを類似させることはまったく問題ありませんが、それでも一意であることを確認してください。 ハウツー投稿の2つの連続したステップを説明する画像があるとします。 その場合、パーツが重複することはやや避けられません。

ただし、ここでは、各ステップを明確に説明し、正しい番号でマークすることにより、各代替テキストが十分に一意であることを確認できます。

例： alt =”これはWordPressaltテキストに関するチュートリアルの最初のステップです” vs. alt =” WordPressaltタグチュートリアルの2番目のステップ”

4.関連性がない限り、「画像」の使用は避けてください

通常、代替テキストに「の画像」や「のスクリーンショット」を書く必要はありません。 検索エンジンとスクリーンリーダーは、画像を扱っていることを知っているので、そのテキストを追加する必要はありません。 代わりに、残りのスペースをより有効に活用できます。

もちろん、これらのキーワードクエリでGoogleに表示したい場合を除いて、これは当てはまります。 ターゲットキーワードに「のスクリーンショット」などのフレーズが含まれている場合、それを画像に追加すると、Google検索で上位に表示されるようになります。

たとえば、ニュースで政治家の電子メール通信のリークされた画像について聞いたとします。 当然、 「漏洩したメールの画像[政治家の架空の名前]」のようなものを探すかもし​​れません。

ここで、代替テキストにその「画像」フレーズを追加すると、その検索クエリに表示されるのに役立ちます。ただし、もちろん、それだけでは、サイトが上部に近いことを保証するものではありません。

同様に、主題の「インスピレーション」を中心としたキーワードをターゲットにした投稿があるとします。 その場合、 「[トピック]のインスピレーションを与える画像」などのフレーズを使用することもできます。

5.代替テキストにキーワードをスパムしないでください

altタグを書くときは、テキストの関連性を保ち、キーワードのスパムを避けてください。

つまり、画像に犬が写っている場合は、 「犬の犬のペットの子犬の猟犬の男の親友である犬の品種の子犬」のような代替テキストを記述しないでください。 代わりに、コンテキストを追加する、より説明的なものを選択してください。

潜在的に、このテキストは、画像を取り巻く内容と段落を考慮して、画像を自然に説明しています。 以下のセクションで具体的な例を示します。

6.最後に画像を追加すると、適切な代替テキストを作成できます

ブログ投稿を完全に準備した後に画像を追加すると、altタグを見逃さず、後で修正するために余分な時間を費やす必要があります。 画像を挿入した後でaltタグを編集して、ページ上で更新されていないことがわかる場合もあります。

WordPressで画像を追加するのは、ページや投稿を作成するときの最後のステップとして行うのが最適であることを忘れないでください。

7.代替テキストとして画像名を使用する

画像を調達するときは、書いている内容に非常に関連性のある名前を付けることを忘れないでください。 スペースを使用する代わりに、ダッシュを使用して単語を区切ります。 これで、画像をアップロードすると、すでに書いた名前をコピーしてダッシュを削除するだけで済みます。 これを行うと、時間を無駄にすることなく、完璧なaltタグが得られます。 このプロセスを正確に行う方法については、WordPressでのaltタグの追加に関するガイドのこのセクションをお読みください。

8.優れた代替タグは画像を詳細に説明します

altタグを書くときは、説明的であることが重要です。 画像の内容をうまく説明すればするほど、視覚障害のあるユーザーが画像をそこに配置する理由を理解しやすくなります。 同じことが検索エンジンにも当てはまります。 この方法により、誰かがこのタイプの画像を検索しているときに、Googleがサイトを表示する可能性が高くなります。 これは、最適化した正確な検索とは異なる、より長く異なる検索でも発生します。これは、ロングテールキーワードとも呼ばれます。

9.ウェブサイトのデザイン画像をCSSに入れる

画像が純粋にデザイン上の理由で作成されている場合は、WebサイトのスタイルのCSSで実装する必要があります。 そうすることで、適切なサイトコード構造/階層が設定されます。 また、検索エンジンとスクリーンリーダーは、コンテンツに寄与する画像と、純粋にデザイン機能として使用される画像を区別することができます。

このロジックに従って、実際にはすべての画像にaltタグを付ける必要があることを学びました。 HTMLに画像を実装すると、画像がページにコンテキストを追加し、代替テキストを追加できるようになります。 一方、CSSに画像を実装すると、画像はコンテキストを追加せず、ページのレンダリングに役立ちます。したがって、altタグを追加する機能にアクセスできません。

閉会の言葉

ほとんどのWebサイトでは、代替テキストを追加するのに多大な時間の投資は必要ありません。 その間、それらに伴う利点は大きいです。 あなたはあなたのウェブサイトをよりアクセスしやすくします-そしてあなたは潜在的にグーグルによってそれに対して報われることができます。

altタグの書き方を学ぶ最良の方法は、いくつかの例を見て、自分で試してみることです。 WordPressで代替テキストを画像に追加または変更する方法の実際のプロセスについては、ここにリンクされているガイドをお読みください。

最後に、必ずWordPressに変更を保存し、altタグが表示されていることを確認してください。 そうしないと、作成方法が原因で、WordPressに新しい代替テキストが表示されない場合があります。 以前にこれに遭遇したことがある場合は、WordPressにaltタグが表示されない問題を修正する方法についてこのガイドをお読みください。