alt属性
alt属性とは、画像の代替テキストであり 、なんらかの不具合により画像が表示されない際に 、画像情報として alt内に記述した内容が表示されます。加えて、画像検索でも有効となるため、 alt属性内部に、 画像の内容を正しく記述することが重要となります。
子猫の画像における alt属性のソースコード例
①悪い例 < img src=”cat. jpg” alt=”” >
②普通の例 < irmg町 src=正,、at.jpg” alt=”子1猫苗”>
③良い例 < img src=”cat. jpg” alt=”餌を食べている子猫”>
①の例については、装飾的に使う画像である場合に限り 、空文の 「””」 でも大丈夫です。ただ本来、装飾目的で使用するならば、HTML側ではなくcss側で、背景画像として用いることが適切です。つまり、 HTML側でimgとして用いるのではなく 、css側でbackgroundimageとして使用すべきなのです。
②については、あまりにも抽象的すぎます。「子猫」だけでの説明では、 星の数程存在する「子猫」のことを指してしまいます。どういう姿なのかがイ メージできません。そのため、司もなく不可もなくという記述となります。
③のように、具体的に記述することがベストです。 これにより、画像が見えなくなった場合でも、代替テキストでその内容を イメージすることができます。
なお、 alt内部に記述することで SEO効果を期待することができるのですが、これを逆手に取って、「子猫」で上位表示させたいからと 「alt=”子猫 子猫 子猫 ・・・ “」とキーワードを無理やり埋め込むと、ペナルティとな る可能性があるため注意が必要です。