alt属性とは

Pocket

alt属性(オルト属性)とは、htmlのimg要素やinput要素で画像を表示させる際、その画像の代替テキストを指定するための属性です。代替テキストは画像が表示できないブラウザなどでアクセスした際に、その画像のかわりにテキストで表示されるものです。

alt属性タグ

altタグ設定の有効性

現在では画像の表示できないブラウザはほぼ使用されなくなりましたが、ネットワーク環境によっては画像の読み込みに時間がかかる場合があり、読み込みが完了できない場合にalt属性の代替テキストが表示される場合もあります。

そのためalt属性は、ネットワーク環境の影響等で読み込みが完了できない場合も想定し、画像の内容を端的に表示する文章である必要があります。

alt属性の有効性alt属性とSEOの関係性

Googleでは、alt属性の内容を検索順位決定の要因として採用しています。しかし、他の主要タグ(titleタグ、hタグ)と比べ、上位表示の影響力は相対的に弱いものであると弊社では考えています。

過去には、古いブラックハットなSEOの手口に、alt属性に大量にキーワードを埋め込むという手法もありましが、今はGoogleにスパムと判定される可能性すらありますので、過度の対策はおすすめしません。

アンカーリンクに画像を使用する際の注意点

htmlではリンクのアンカー部分を、img要素等を利用して画像リンクにすることができますが、Googleは画像の内容が何であるのかを完璧に判断することはまだできません。その為、画像リンクにするとアンカーテキストのSEO的な効果を発揮することができなくなりますので、なるべくテキストリンクを使いましょう。

また、どうしても画像リンクを使用したい場合は、画像にalt属性を正しく設定することに加え、画像ファイル名に意味を持たせましょう。

Google画像検索経由のアクセスが期待できます

用語の意味や文書のひな型などを調べる際に、Googleの画像検索をするユーザーが一定数いますので、画像によっては、画像に適切なalt属性を設定することで、Google画像検索経由でのアクセスが期待できます。

例:ペルソナ設計例のイメージ画像

画像ファイル名 Persona_design.jpeg
alt属性:ペルソナ設計例

この例ですと、マーケティング担当者がペルソナのひな型を検索するニーズがあるため、アクセスにつながる可能性があります。

alt属性の省略

例えば、ページ上のデザインのためにおいてあるただの線の画像など、コンテンツとしての要素を持たない装飾用画像には代替テキストを置く必要はありません。HTML5ではこのような場合、alt属性の記述を省略することが可能です。HTML4やXHTML1.1では「alt=””””」のように、空データを記述します。

Pocket