web-dev-qa-db-ja.com

imgのaltとタイトルの違い(どちらを使用するか)と影響

何年もの間、私はこのような画像用のHTMLを書いてきました。

<img src="picture.jpg" alt="my picture" >

しかし、最近、Raven SEOツールを使用してサイトの監査を実施し、非常に驚​​いた大量のエラーを報告しました。

レポートを調べたところ、これらのエラーの99%は、画像のタイトルテキストが欠落していたためです。

画像の上にカーソルを合わせると、画像のタイトルテキストに少しポップオーバーが表示されることがありますが、それ以外の目的は何ですか?また、SEOに影響しますか?

また、それを実装する場合、そこに何を入れますか? alt属性にあるのと同じ情報を入力しますか?すなわちalt="my picture" title="my picture"

10
sam

ALTタグは、Googleを使用して画像が何であるかを判断するために視覚障害を持つ人々のために導入されたアクセシビリティタグです。

Googleで働いている多くの人々、さらにはMatt Cuttsは、画像が何であるかをボットに知らせるために検索エンジン向けに特別に設計されたように、altタグについて語っています。

ただし、視聴者の世話をしながら画像が何であるかをGoogleに通知できます。altタグにキーワードを詰め込むだけでなく、ユーザーエクスペリエンスを低下させ、非常に不自然です。

これの主な例は、「ボーンマス」というキーワードにランク付けしたいという人が多いと言うことです。タイトルにボーンマスがあり、H1でメタディスクリプションを作成し、altタグ「ボーンマス」で画像を作成します。 SEOはユーザーエクスペリエンスを低下させ、altタグの全ポイントを見逃します。 altタグは、視力に問題がある人や画像をすべて無効にする人向けです。そのため、ALTタグは、画像の内容をユーザーに通知するように設計されています。

これの良い例は以下に見ることができます

<img src="i.jpg" alt="Bournemouth" />

<img src="i.jpg" alt="Birdseye view of Bournemouth" />

上記の例にはキーワードが含まれていますが、Googleとユーザーの両方に画像の内容を説明しています。

では、タイトルタグはどうでしょうか。

タイトルタグは、要素にカーソルを合わせるとより多くの情報を提供するように設計されています。IMGにはあまり役立ちません。ALTとTITLEに同じ情報を使用する場合は、スクリプトを使用してaltタグを読み取り、 JSを使用して独自のホバーオーバー。長い説明のように、ALTタグよりも多くの情報を提供する場合にのみ、タイトルタグをお勧めします。コードを肥大化させるため、両方の要素に正確な情報を提供する必要はありません。

タイトルタグは、リンクの上でホバリングすると、視聴者がクリックしようとしているリンクに関する詳細情報を視聴者に提供できるため、リンクに非常に便利です。 タイトルタグの詳細はこちら

12
Simon Hayter

alt は、画像の代替説明を提供します。この属性はimgに必要です。

title は、画像に関する追加情報を提供します。この属性は、imgのオプションです。

titleの情報に依存しないでください。情報が本当に重要な場合は、独自の要素に情報を含めます。

これらの2つの属性は同じ内容であってはなりません。

3
unor

あなたの混乱は普通であり、はい、各タグ(タイトル、ALT)は、検索エンジンとユーザーが画像が何であるかを知るのを助ける独自の可能性を表しています。

ALTテキストでは画像を説明するのに十分でない場合があるため、できるだけ多くの情報を割り当てた方がよいでしょう。SEOの観点からもより効果的な単語の割り当てを使用してください。

0
Rajesh Magar