代替テキストは、SEOコンテンツ最適化の議論によく使われます。 サイトのアクセシビリティを向上させる手段として設計された、これらの一見取るに足らない代替属性は、サイトのSEOと使いやすさに影響を与える可能性があります。 代替テキストを最大限に活用できるように、代替テキストを記述してSEOの可能性を最大化し、サイトのアクセシビリティを向上させる方法について説明します。

代替テキストとは何ですか？

代替テキストまたは代替テキストは、HTMLコードの画像のIMGタグのALT属性内に画像の説明が書き込まれます。

「代替属性」または「代替説明」とも呼ばれるこれらのテキスト説明は、画像が読み込まれない場合やユーザーに視覚障害が発生した場合のWebページ上の画像の外観と機能に関する情報を提供します。

代替テキストの使用

これらの代替属性は、ページ上のSEOチェックリストの最前線にある可能性があります。 しかし、代替テキストの推進力は、国連が世界で最も人気のあるWebサイトを監査し、視覚障害のあるユーザーに提供する情報への同等のアクセスを提供するものはほとんどないことを発見した2006年に始まりました。 それ以来、このテキストは主に次の目的で使用されています。

アクセシビリティのための代替テキスト

失明から色覚異常まで視覚障害のあるインターネットユーザーは、代替テキストを使用してWebサイトのコンテンツに完全にアクセスできます。 スクリーンリーダーのユーザーやその他の支援技術のユーザーは、代替テキストを読み上げています。 これにより、スクリーンリーダーのユーザーは、ページ上のすべての情報をより明確に把握できます。

スクリーンリーダーを使用してサイトを探索すると、ユーザーがスクリーンリーダーに依存している場合にユーザーがどのように体験するかをよりよく理解できます。

問題とユーザーエクスペリエンスを読み込むための代替テキスト

画像ファイルを読み込めない場合は、その代替テキストが表示されません。 これは、ユーザーの帯域幅が狭い場合や、データを保存するためにブラウザの画像をオフにすることを選択した場合に非常に役立ちます。 視覚障害のあるユーザーが画像の目的とコンテンツを入力するためにこの代替テキストに依存しているのと同様に、インターネット接続が遅いユーザーは、全体的に優れたユーザーエクスペリエンスのために、代替テキストを使用して画像を見逃すことはありません。

さらに、代替テキストが画像の代わりになると、コンテンツが充実し、読者がテキストをより包括的に理解できるようになります。

画像SEOの代替テキスト

Webクローラーは、NLPを使用して代替テキストHTMLを読み取り、画像の内容、画像の目的、および画像のコンテキストをよりよく理解して、インデックス作成と画像検索結果を向上させます。

これにより、クローラーはWebページをよりよく理解し、画像をGoogle画像検索に表示する機会が得られます。

代替テキストの例

皮肉なことに、優れた代替テキストを作成する方法を理解するには、多くの場合、「教えてはいけない」というアプローチが必要です。 したがって、altタグテキストを含む画像の例を次に示します。

alt=「寒い朝に凍るような畑に立っているビーグル犬。」

HTMLでの表示は次のとおりです。

alt =”地球と空の像の尊厳”

alt =” <p>明確な証拠：大西洋海流はメキシコ湾流を運んでいます</ p>”

代替テキストのフォーマット

ほとんどのCMSは、代替テキストをHTMLにフォーマットします。 ただし、代替テキストを実装するには、IMGタグに次のコードを挿入できます。

< img src =” file” alt =”テキストを追加” width =”” height =””>

良い代替テキストの書き方

優れた代替テキストを書くには、創造的な執筆やコーディングの専門知識は必要ありません。 ただし、新しいレンズを通して画像を見る必要があります。

これを行う1つの方法は、電話で誰かに写真を説明していると想像することです。 その際、リスナーが画像の目的の説明から利益を得るかどうかを覚えておいてください。

アクセシビリティとSEOを念頭に置いて、代替テキストをどのように改善できますか？

1.できるだけ説明的にします。

より説明的な代替テキストは、ユーザーに画像のより良い理解を提供します。 説明的な代替テキストを作成するときは、画像を重要でユニークなものにするものと、テキストをどのように充実させるかを含めます。

私たちは皆、代表が重要であることに同意することができます。 スクリーンリーダーのユーザーは、ブランドがその画像に含まれている時期も知りたいと考えています。 したがって、説明に関連する場合は、性別と民族性を必ず含めてください。

2.簡潔にしますが、短すぎないようにします。 無関係な情報は省きます。

上記の例は長すぎるため、代わりにキャプションタグまたは長い説明タグを使用するとメリットがあります。

最適な代替テキストは、せいぜい1つか2つのフレーズ（または1行の代替テキスト）です。 代替テキストを作成するときは、何が与えられているか、情報の優先順位は何か、そしてそれがWebページのコンテンツにどのように通知するかを考慮してください。 コンテンツに含まれるものをすべて省略することにより、冗長性を減らします。

繰り返しになりますが、コンテキストの画像と記事の目的を考慮することが重要です。

代替テキストはキャプションではないことに注意してください。 ソースクレジットまたはソース引用を提供する必要がある場合は、その情報にキャプションを使用してください。

3.ターゲットキーワードを使用します。

画像にターゲットキーワードがはっきりと表示されている場合は、それを代替テキストに含めます。 指摘したように、Webクローラーはこれらの属性を読み取って、コンテンツをよりよく理解します。

画像検索の場合でも、ロングテールキーワードのランク付けが簡単であることに注意してください。

たとえば、「ジンベイザメ」のランク付けの代わりに、「口を開けたジンベイザメ」のランク付けを試みることができます。

4.キーワードを詰め込まないでください。

キーワードの乱用は決して良い考えではありません。 特に、画像が何を描写しているかについてユーザーを迷わせる場合。 必要に応じて画像の代わりに意味を使用する、適切で有益な代替テキストを常に目指してください。

さらに、Google NLPは単語間の意味関係を理解するのに優れているため、画像がターゲットキーワードに関連している場合は、代替テキストも関連している必要があります。その結果、Googleのインデックスシステムへの自然なシグナルが得られます。

たとえば、上の画像の代替テキストには、「頑丈な犬の噛むおもちゃ」と記載されていることに注意してください。 Googleは、この画像を「重い咀嚼者のための犬用おもちゃ」の検索クエリに表示します。これは、元のクエリに意味的に関連しています。

不正な代替テキスト=キーワードの乱用：alt =「カスタムドッグタグ、カスタムドッグIDタグ、カスタマイズされたドッグID。」

5.写真であることを説明する必要はありません。

多くの人が犯す間違いの1つは、代替テキストに「の写真」、「の写真」、または「の画像」を含めることです。 これは必要ありません。 あなたのaltタグはそれが写真であることを示しているので、これらは不必要な言い回しと冗長性を追加するだけです。

6.長い説明には、longdesc =””を使用します。

画像が代替テキスト内の長い説明の恩恵を受けて、ユーザーエクスペリエンスが向上する場合があります。 たとえば、ブログを伴わないインフォグラフィックは、明確に説明されない限り、価値を付加しません。

これらのインスタンスでは、longdesc =””タグを使用する必要があります。

7.ボタンについても説明します。

ボタンは多くの場合、テキストが埋め込まれた画像です。 これらはテキストの画像のカテゴリに分類されます。つまり、有用であるためには、ユーザーに何を言っているかを知らせる必要があります。

次のボタンのアクセス可能な代替手段をユーザーに提供します。

<入力タイプ= “” src = “” name = “”

height = “” width = “” alt = “ text on button” >

8.タイプミスやスペルミスのある単語は避けてください。

校正と正しいスペルは、スクリーンリーダーが画像の意味を正しく伝える能力を妨げる可能性があります。 さらに、alt属性のタイプミスは、チェックを外したままにすると、画像のSEO災害になる可能性があります。

9.画像の種類を検討します。

画像を説明していることを指摘する必要はありませんが、画像の種類が一意であるかどうかについて言及することをお勧めします。 あなたが言及したいと思うかもしれないいくつかの画像フォームは次のとおりです。

• 図
• グラフとチャート
• 絵画またはその他の美術
• マップ
• インフォグラフィック
• GIFとアニメーション

代替テキストについて他に知っておくべきことは何ですか？

効果的な代替テキストを書くことは、時間の経過とともに第二の性質になります。 ただし、画像の代替テキストをいつ使用するか、いつスキップするか、その他の画像のベストプラクティスを知っていると、サイトのSEOとアクセシビリティを向上させることができます。

テキストだけの画像は避けてください。

してはいけないこと：

テキストのスクリーンショット、PNG、またはJPEGを追加したくなる場合があります。 ただし、このテキストがWebクローラーによって読み取られることはありません。 さらに、画像内の情報から視覚障害者を除外したくないため、その画像のテキストを代替テキストタグに入力する必要があります。

代替テキストを追加しない場合

装飾画像に代替テキストを含める必要はありません。 これは、画像のコンテンツがWebページのコンテンツの意味に追加されないためです。 ただし、HTMLに空またはnullのalt属性を含める必要があります。 このnull代替テキストは、画像の説明を読み取らないようにスクリーンリーダーに通知します。

nullのalt属性は、次のように記述できます。alt =““またはalt =””

また、横にテキストバージョンがあるリンクである画像でnullalt属性を使用することもできます。

ビデオに代替テキストが必要ですか？

いいえ。ただし、聴覚障害のあるユーザー、他の言語を話すユーザー、音声をオンにしてビデオを再生できない視聴者のために、ビデオの文字起こしを含める必要があります。

画像の代替テキストまたは別のサイトの代替テキストを確認する方法

画像の代替テキストを読むには、画像を右クリックして[検査]または[要素の検査]を選択するだけです。 これにより、HTMLおよびCSS要素検査ツールが開きます。 Macでは、Control+クリックを使用することもできます。

アクセシビリティの問題には、アクセシビリティチェッカーを使用することもできます。

画像のコンテキストを常に考慮してください

思慮深い代替テキストを提供する場合は、画像の目的を考慮してください。 これにより、ターゲットキーワードを使用する機会がさらにいくつかあります。

たとえば、ブログの目的が犬のおやつの品質を比較することであり、キーワードがプレミアムドッグフードであり、画像が比較用の2杯のドッグフードである場合、代替テキスト「1杯のプレミアムドッグ」を使用できます。比較のために、低品質のボウルの横にある食品。」 これにより、スタッフィングなしでキーワードをスムーズに統合できます。

代替テキストは画像のキャプションと同じですか？

いいえ。画像のキャプションは、AltテキストがHTMLにのみ存在するときに画像が読み込まれた場合でも、サイトユーザーに表示されます。 キャプションの目的は、画像の内容を理解するために必要な著作権情報または説明を提供することです。

WordPressで代替テキストを追加する方法

WordPressに画像の代替テキストを追加するのは簡単です。 画像をアップロードするときは、ページに挿入する前に画像の代替テキストを追加できます。 WordPressの一部のバージョンには、画像のサムネイルの横に画像のalt属性メニューが含まれています。 その他には、サムネイル画面の下部にあるメニューが含まれます。

まともなから効果的な代替テキストのいくつかのモデル

代替テキストに関しては、さまざまなレベルの品質があります。 あなたはまともな代替テキストに落ち着くことができます、あるいはあなたはあなたのユーザーとSEOに最高の代替テキストを提供するよう努めることができます。 基本的な代替テキストモデルの例を次に示します。

悪い例：alt =” dog”

より良い：alt =”ひも付きの茶色の犬”

ベスト：alt =”ひもを付けたまま芝生で楽しく遊んでいるタンプードル”

悪い例：alt =”本を持っている人”

より良い：alt =”宿題をしている母と息子”

ベスト：alt=「関係する両親の力を発揮するために息子の宿題を手伝っている黒人の母親のイラスト。」

悪い例：alt =”カップ、ナプキン、ペンの写真”

より良い：alt =”筆記とペンが付いたナプキンの横にある青いコーヒーマグ”

最高：alt =”左側にコーヒーが入った青いコーヒーマグが、反対側にペンがあり、間にナプキンがあり、制限ではなく目標が設定されている木製のテーブルに座っています。”

代替テキスト：より良いユーザーエクスペリエンスとSEO

画像の代替テキストの作成をスキップしたり、急いで作成したりするのは簡単です。 しかし、そうすることはあなたのウェブページの訪問者とあなたのSEOに不利益をもたらすでしょう。 すべてのウェブページを改善する方法として、代替テキストを考えることをお勧めします。 検索エンジン用に画像を最適化することには、代替テキストを介してWebクローラーにコンテキストを提供することが含まれます。 さらに、多くの人があなたのウェブサイトを完全に理解して操作するために代替テキストに依存しています。 代替テキストは、画像が読み込まれない場合やユーザーに視覚障害または認知障害がある場合に、画像の代わりに使用することでアクセシビリティを向上させます。