alt属性とSEO対策の関係は？３つの役割と書き方を解説

SEO対策において効果の有無が気になるalt属性。

本記事ではalt属性とSEOの関係や、alt属性の３つの役割と書き方を解説します。

＞＞解説付き！基礎SEO対策チェックリストをダウンロードする

alt属性はSEOと関係があるのか？

結論からお伝えすると、alt属性はSEOと関係があると断言します。

SEO対策としてalt属性は適切な書き方でコード記述することをおすすめします。

「alt属性」の読み方

「alt」の読み方は「オルト」。

altは「alternative text」の略称で、代替テキストとも呼ばれます。

alt属性とは

alt属性とは、HTMLで指定した画像がユーザーへ正しく表示されない時に、代わりに表示させるテキスト。これは代替テキストとも呼ばれます。

Webページはユーザー環境によって表示が異なる場合があり、画像が正しく表示されない場合、ユーザーは本来何が表示されるのかが分かりません。これでは優れたUXとは言えませんよね。

そこで、画像が表示されない場合に、画像の内容を説明するテキストを代わりに表示する、これがalt属性の主な役割です。

alt属性の必要性とSEOと関係

alt属性は以下の点からSEO対策をおこなう上でも大事な要素です。

• 検索エンジンへ画像の内容を伝えるalt属性
• 検索エンジンへリンク先の内容を伝えるalt属性
• ユーザーへ画像の内容を伝えるalt属性

ユーザーにとっても、検索エンジンにとっても価値があるため、alt属性の必要性はおわかりになるかと思います。ここからは、これら３つの役割について詳しく見ていきましょう。

検索エンジンへ画像の内容を伝えるalt属性

GoogleやBingなどの検索エンジン（のロボット＝クローラー）が画像を読み取る技術は年々進化していますが、それでも画像の内容を正確に読み取れるわけではありません。

加えて、画像をどのような意図でWebページへ表示させ、ユーザーへ何を伝えようとしているのかは明示しない限り検索エンジンが理解するのは困難なケースがあります。

 

alt属性によって画像の説明テキストを記述することで、検索エンジンが画像の内容を理解する手助けとなります。

検索エンジンがコンテンツをより正確に理解できるページを用意することはSEO対策において重要。この点で、alt属性はSEO対策と関係があり、正しい書き方での設定が望ましいと言えます。

検索エンジンへリンク先の内容を伝えるalt属性

画像によってはリンクを設置し、ユーザーが画像をクリックすると別ページへ遷移するように設定することもありますよね。

このような画像リンクの場合、リンク先ページの内容をユーザーが理解できる画像を設置することが望ましく、画像の内容を説明するalt属性には必然的にリンク先の内容を表すテキストを設定することになります。

 

検索エンジンは画像リンクのalt属性をアンカーテキストとして扱います。

リンク先のページにどのようなコンテンツがあるか、リンク元とリンク先のページにどのような関連性があるか、これらを検索エンジンが判断する際に使われるアンカーテキスト。

このアンカーテキストは内部SEOにおいて重要であり、画像リンクのalt属性がアンカーテキストとして扱われることから、alt属性はSEO対策に影響すると言えます。

 

＞＞解説付き！基礎SEO対策チェックリストをダウンロードする

ユーザーへ画像の内容を伝えるalt属性

検索エンジンだけでなく、ユーザーにも画像の内容を伝えるalt属性を設定することで、ユーザーにとって次のようなメリットがあります。

• 画像が表示されない場合でも内容を理解できる
• 音声読み上げソフトが画像の内容を読み上げられる
• 画像リンクのリンク先ページを把握できる

これらによって優れたユーザー体験を提供するページを高く評価するランキングシステムを考えると、SEO対策としも効果があると考えられますよね。

SEO対策に効果的なalt属性の書き方

ここからはSEO対策に効果的なalt属性の書き方をご紹介します。

画像を説明する端的なテキストを設定する

alt属性のテキストがSEOに影響するとはいえ、キーワードを過剰に使用するのは逆効果。

キーワードの適切な使用はSEO対策に有効ですが、画像を説明する端的なテキストに留めましょう。

ページ内コンテンツにSEO対策キーワードを不自然に過剰な詰め込みをおこなう行為はキーワードスタッフィングと呼ばれ、スパムに該当するリスクがある方法です。alt属性のテキストを設定する際も基本的な考え方は変わりません。

alt属性に最適な文字数というものはありませんが、画像の説明テキストを適切に設定しましょう。

alt属性の設定例

alt属性をHTMLへ記述する際の例は以下の通り。

imgタグ内に「alt="（alt属性）"」を記述します。

alt属性のNG例

「alt属性の書き方」を表す画像に対して、キーワードを不自然に詰め込んだり、過剰なテキストを記述したり、スパム的なalt属性の書き方は避けましょう。

画像リンクの場合はアンカーテキストと捉える

画像リンクの場合はalt属性に設定するテキストをアンカーテキストとして考えましょう。

アンカーテキストの書き方はリンク先のページ内容が分かるテキストにすることが大切。特に内部リンクを設置する際の適切なアンカーテキストはSEO効果を左右する要素です。

例えば、画像リンクのリンク先ページが「alt属性とSEO対策の関係や書き方」を紹介しているなら、アンカーテキストには「alt属性とSEO対策」「alt属性の書き方」「alt属性とSEO対策の関係」といった書き方で、リンク先ページを閲覧する前から内容を想像できるような書き方にします。

設定したalt属性の確認方法

自社サイトの画像へalt属性を設定したら、ページへalt属性のテキストが正しく反映されているか確認をしておきましょう。

HTMLを確認する場合は、デベロッパーツールを使う（Google Chromeの場合はページ内で右クリック→「検証」またはF12で表示）方法や、直接HTMLソースを表示する（Google Chromeの場合は右クリック→「ページのソースを表示」またはctr+uで表示）方法があります。

「alt=」と記載されている箇所にalt属性が設定通り記載されていれば、正しく設定できています。

 

また、ブラウザ拡張機能を使って手軽に確認する方法もあります。

「SEO META in 1 CLICK」では、対象ページを開いた状態で拡張機能アイコンをクリックし、「IMAGES」タブを開くだけ。

ページ内の画像ファイル名とalt属性で設定したテキスト一覧を手軽に確認できます。

alt属性とSEO対策のまとめ

以上、alt属性とSEO対策について解説しました。

alt属性のテキストだけで大きなSEO効果が期待できるものではありませんが、適切なalt属性の設定がユーザーと検索エンジンの双方に役立つことは間違いありません。

alt属性の他にも、SEO対策に欠かせない15項目を解説した「基礎SEO対策チェックリスト」の内容ももれなく対応しておきましょう。これらは本来得られるはずのSEO評価をみすみす逃さないために重要なSEO対策です。