alt属性のSEO対策による効果は？記述方法や記述する際のコツ

この記事の監修SEO会社

株式会社NEXER

2005年にSEO事業を開始し、計10,000社以上にSEOコンサルティング実績を持つSEOの専門会社。
自社でSEO研究チームを持ち、「クライアントのサイト分析」「コンテンツ対策」「外部対策」「内部対策」「クライアントサポート」全て自社のみで提供可能なフルオーダーSEOを提供している。
SEOのノウハウを活かして、年間数百万PVの自社メディアを複数運営。

文章ばかりが並んだウェブページは読みづらく、ユーザーの離脱につながります。

適度に画像を挿入すると読み進めやすくなり、ページの理解が深まりやすくなります。

ユーザーにとってわかりやすいサイト作りに欠かせない画像ですが、画像もSEOの対象です。

そこでキーワードとなるのが今回のテーマであるalt属性です。

alt属性とは何か、SEOとの関係や設定による効果、記述方法やコツについて解説します。

もしSEO対策の基本から対策方法まで全て詳しく知りたい場合は「SEO対策とは？検索上位表示を狙う方法まとめ！」の記事でSEO対策の情報をまとめているので参考にしてみてください。

alt属性とは

英語でalternate attributeといわれるもので、読み方はオルト属性です。ページの制作者の任意で書く内容を決められますが、画像が何を示しているか、何の画像であるかを表す内容にするのが望ましいとされています。

alt属性はHTML中のimg要素に付随する属性のひとつのため、基本的に通常のブラウザでユーザーが見ることはありません。

何らかの原因で画像が非表示となる場合に、alt属性が代替で表示されます。また、スクリーンリーダーなどを使用した際も同様に書き込んだ内容が読み上げられます。

検索エンジンが画像を解釈するサポートもするため、ユーザーと検索エンジン双方の視点から必要であるといえます。

画像1枚ずつに設定するのは手間に感じるかもしれませんが、不要とされるケースを除いてすべての画像にalt属性を設定しておくことが望ましいです。

alt属性とSEOの関係

サイト運営者やコンテンツ制作者は、検索上位を狙ってさまざまな施策を行っています。alt属性の設定も、施策のひとつとして取り組む人が多いのではないでしょうか。SEOとの関わりにおいて、どのような役目があるのかを解説します。

検索エンジンに画像の情報を伝える役目

ユーザーにとってはページの内容を深く理解するのに役立つこともある画像ですが、クローラーは画像だけでその内容や意味まで汲みとるのは難しいとされています。クローラーに画像情報を伝える際、以下のような要素で補足します。

画像情報を伝えるために、alt属性は重要な役目を果たしています。

設定の有無によって、クローラーが読みとる情報量に差が出てしまうのです。
ページを構成するのに重要な画像やユーザーの役に立つ画像は、クローラーに正しく読みとってもらえるようにalt属性を書き込んでおきましょう。

画像の代替テキストの役目

ページ内に貼られた画像などの非テキストコンテンツが、何を意味しているのかを文字情報で示す役目を果たしています。何らかの原因で画像が非表示となる場合、画像に代わって文章が表示されます。また、音声読み上げブラウザではその文章を読み上げます。

画像の表示がスムーズにいかなかった場合、代替テキストがなければ重要な情報を届けられない可能性があります。本来ならそこにどんな画像があったのか分からないと、ユーザーに不安を与えてしまうかもしれません。

ページ内の情報を正確にユーザーに届けるために、alt属性は大きな役目を果たしているのです。ユーザーの使いやすさが向上することは、SEOの観点からも好ましいとされています。

画像検索で最適化される役目

検索エンジンの便利な機能のひとつに、画像検索があります。alt属性の設定をしてクローラーに画像の情報を正しく伝えることで、画像検索の最適化に役立ちます。画像検索で上位表示されると、ユーザーの目にとまる機会も増えるでしょう。

通常の検索では、検索結果一覧にタイトルや説明文がずらっと並ぶのが一般的です。しかし昨今は、通常の検索結果においても画像が表示されるケースがあります。画像検索枠といわれるものです。

画像もSEOの対象です。ページの内容と関連性のある画像やオリジナリティのある画像を使用することも大切ですが、SEO対策の成功にはalt属性の設定も関わっているといえます。

alt属性のSEO対策による効果

設定の有無が、検索順位に直接影響するわけではありません。ただし、alt属性の設定によって間接的であってもSEOにさまざまな効果が得られるのでSEO内部対策の一環として専門会社でも実施されています。期待できる効果として3つご紹介します。

検索エンジンに内容を正確に伝えられる

ページに書かれた内容が視覚的に分かると利便性が高まります。

コンテンツに対して適切な画像は検索順位によい影響を与える要素であり、画像の内容をクローラーに正しく伝えることはSEOからみても重要です。テーマと関連の深い画像であればなおさら正しく伝える必要があります。

クローラーは画像だけでその内容を正確に把握するのは難しく、さまざまな情報で補いながら内容を読みとっています。画像の意味を正しく汲みとるのをサポートする要素のひとつがalt属性です。

画像の意味を正しく認識することで、ページ全体の内容も適切に伝えられるでしょう。さらに、画像検索からのサイト流入も期待できます。

上手く画像が表示されない場合は記述した文字列が表示される

ページを閲覧中、さまざまな理由からスムーズに画像が表示されないことがあります。たとえば以下のような状況です。

alt属性を記述していると、画像が非表示となったときは記述した文字情報が代替で表示されます。その画像がページの内容を読み込むうえで重要な役割を担っている場合、画像を閲覧できなければそのページを読む価値を損なう可能性もあるのです。

つまりalt属性はユーザビリティの向上に役立っており、ユーザーのためになるコンテンツは検索エンジンからの評価にもよい影響を与えます。

音声読み上げ機能を使用すれば読み上げてくれる

コンピュータ画面上の情報を音声に変換するソフトウェアであるスクリーンリーダーや、音声読み上げブラウザにおいて、alt属性に書き込んだ内容が読み上げられます。パソコンや携帯機器に搭載されている音声読み上げ機能は、さまざまなユーザーのアクセスを可能にするアクセシビリティのひとつです。

ウェブは重要な情報源であるにもかかわらず、実際に提供されているページには障壁があり、高齢者や目の不自由な人が使えない設計になっていることも多いです。アクセシビリティを確保するため、音声読み上げ機能を考慮したうえでサイトを作る必要があります。

アクセシビリティに対応したサイトは使いやすくなり、アクセスするユーザーの母数の増加が見込めます。アクセシビリティの向上は、SEOの観点からもよい影響が期待できます。

alt属性の記述方法

HTMLで入稿する場合は、以下を参考に「”」で区切られた部分に書き込みます。

WordPressを用いてサイトを作成している場合、HTMLを記述せずとも簡単にalt属性を表示できます。画像詳細を入力する項目で「代替テキスト」に適切な説明文を入れましょう。

alt属性を記述する際のコツ

誤った内容を書き込むと、クローラーやユーザーに正しく認識してもらえなかったり、スパムと認識されてペナルティを受けたりする可能性があります。alt属性はただ書けばよいわけではありません。記述する際に押さえておきたい5つのコツをご紹介します。

具体的な内容を記述する

該当の画像を見ずともその内容が分かるように記述します。電話している相手に画像を説明するようなイメージで言葉を選びましょう。

たとえばテントの画像を貼った場合に「テント」と記述してもある程度は内容が伝わりますが、より詳しく伝えるなら「黄色いテント」「山の中に張られた、黄色いドームテント」などと詳細を加えます。

同じ言葉でも、受け手によってまったく違うものを想像する可能性もあります。できるだけ具体的な内容を記載してイメージと実際の画像のミスマッチを防ぎ、画像が見えない状況でも頭の中でイメージできるようにサポートします。

長すぎず簡潔に説明する

具体的な説明をする必要はありますが、あまりにも長文になることは避けます。長文は検索エンジンからスパムとみなされてペナルティを受けることもあるため、注意が必要です。

先ほどのテントの例の画像を貼ったとしましょう。「天気のよい日に山の中に張られた、大人が4人ほど入れる真新しい黄色いドームテント」のようにすると、情報が多すぎます。長文を理解するのに時間がかかるうえ、結局その画像で何を伝えたいのかも分かりにくくなります。

その画像で何を伝えたいのかを考えて、必要な情報を優先的に含めて簡潔に記載しましょう。簡潔な文章は、ユーザーにとっても検索エンジンにとっても分かりやすくなります。

キーワードを詰め込みすぎない

SEO効果を狙って、対策キーワードを羅列するのはNGです。関係のあるキーワードであっても、詰め込みすぎないように注意しましょう。関係のないキーワードの羅列ももちろん避けます。

テントの画像を設置した場合に「テント　アウトドア　日帰りキャンプ　グランピング　おすすめテント　旅行　家族　友人」などと記述したとします。テントと関係のあるキーワードであるとはいえ、画像を表す言葉としては不適切です。

キーワードを詰め込みすぎると、スパム行為と認識されて検索エンジンからのペナルティを受ける可能性もあります。対策キーワードを入れる場合は適度にして、画像の内容を文字で表すことを基本にしましょう。

画像の意図とは異なる記述をしない

画像とは何ら関係のない説明をすることも避けます。前後の文章やページの内容との整合性がとれず、ユーザーやクローラーを混乱させてしまう可能性があります。

たとえば「にっこり笑った子ども」の画像を掲載して「高齢者」「悲しい顔の子ども」などと、その画像の内容とは異なる説明をしてはなりません。

故意に異なる記述をするのはもちろん、記述ミスにも気を付けましょう。その画像を表すのに適したキーワードや表現を用いて、ユーザーや検索エンジンが画像を理解するサポートをすることが大切です。

装飾目的の場合は記述しなくてもよい

背景画像やラインマーカー、見た目を整えるための画像など、装飾するために設置した画像の場合は、alt属性の記述は必要ありません。ユーザーや検索エンジンに対してわざわざ画像の内容を伝える意味がないからです。

たとえば「〇〇のメリット」という見出しの下に、喜んでいる様子の女性の画像を挿入したとします。この画像はあくまでイメージをわかせるために補助的に使用したものであるため、代替テキストは必要ありません。

設定する際は「alt=””」のように空白にします。設定されていないと、音声読み上げ機能によっては画像ファイル名や画像URLをそのまま読み上げてしまうことがあるため、alt属性を記述したうえで代替テキストの部分を空白の状態にしておきましょう。

alt属性の確認方法

alt属性が設定されているか、設定している場合はどのように記述されているかを確認する方法をご紹介します。

Googleの検証機能

Google Chromeを開いてページを見るだけで、ツールを使わずにalt属性を確認する方法です。手順は以下のとおりです。

Chromeの拡張機能

Chrome拡張機能の無料ツールを使用します。画像ごとに吹き出し式で表示されるため見やすいのがメリットです。

まとめ

alt属性はユーザーおよび検索エンジンに対して、画像の内容や意味を正しく伝えるものです。何らかの原因で画像が表示されない場合には記述内容を代わりに表示して画像の内容を伝え、音声読み上げ機能ではalt属性に書き込んだ内容が読み上げられます。

つまりalt属性は、ユーザビリティやアクセシビリティの向上に役立っているのです。さらに画像検索の最適化の役割も担っており、適切にalt属性を設定することはSEOの観点からも好ましいといえます。

記述する際は画像の内容を具体的に表す表現を用いて、簡潔にまとめます。SEO効果を狙ってキーワードを詰め込むのはNGです。キーワードの羅列や内容と異なる説明は避けましょう。

NEXERは各社の課題に合わせた
専用SEOプランをご提案いたします！

• どんな対策をすればいいかわからない…
• 最適な対策キーワードがわからない
• 施策実行のリソースが不足している

SEOコンサルタントが貴社サイトの課題を洗い出し、最適なSEO対策を一緒に考えます。

SEO無料相談はこちら

この記事の監修者が手掛けたSEO記事一覧

監修者プロフィール

NEXER 工藤6つのオウンドメディアの運営責任者

詳細プロフィールはこちら

2017年NEXERに入社。前職はスマートフォンの販売員。
NEXER入社後はSEOコンサルティング営業部、クライアントマーケティング事業部を経て、現在はオウンドメディアを6つ運営&管理の責任者を任されている。
新規で1から立ち上げた2つのサイトは年間100万PV以上のメディアに成長。
既存のオウンドメディアと、サイト買収をおこなった3つのサイトは、運用当初に比べて3倍～5倍の収益を出すメディアに成長。
さらに、2022年12月より新規でもう1サイトに挑戦中。