imgのaltとタイトルの違い-どちらを使用するか-および影響

何年もの間、次のような画像のHTMLを作成しています。

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

しかし、私は最近、Raven SEOツールを使用して自分のサイトの監査を実行し、本当に驚いたたくさんのエラーを報告しました。

レポートを確認したところ、これらのエラーの99％は、画像のタイトルテキストが欠落していることが原因でした。

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

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

ALTタグは、Googleを介してでも視覚障害がある人のために導入されたアクセシビリティタグであり、画像の内容を判断するために使用します。訪問者の前にSEO目的でaltタグを配置することは考慮しないでください。

Googleで働く多くの人々、さらにはマットカッツでさえ、検索エンジン用に特別に設計された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とオーディエンスの両方に画像の意味を説明しています。

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

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

タイトルタグは、カーソルを合わせると、クリックしようとしているリンクに関する詳細情報を視聴者に提供できるため、リンクにとって非常に便利です。しながら、それはあなたの価値があるだろう、ここでタイトルタグについての詳細を読みます。

alt与え代替イメージの説明を。この属性はに必須ですimg。

title与え、追加の画像についての情報を。この属性はのオプションですimg。

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

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

あなたの混乱は正常であり、はい各タグ（タイトル、ALT）はそれ自体の可能性を表しており、検索エンジンとユーザーが画像の内容を知るのに役立ちます。

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