この記事の監修SEO会社

株式会社NEXERのロゴ

株式会社NEXER

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

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

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

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

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

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

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

alt属性とは

alt tagsの文字

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

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

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

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

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

alt属性とSEOの関係

画面に表示されるSEO

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

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

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

  • alt属性
  • 画像の前後にある文章
  • 画像に貼ったリンクテキスト
  • 画像のファイル名
  • 画像のキャプション

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

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

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

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

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

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

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

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

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

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

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

青黄赤のSEO

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

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

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

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

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

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

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

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

  • 通信状態が不安定
  • 通信速度が遅い
  • ブラウザの仕様による理由
  • ユーザーが画像を読み込まない設定にしている
  • 画像のリンク切れやパスの間違いがある

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

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

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

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

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

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

SEO専門家の見解

alt属性は昔からSEO内部対策として、対策項目に挙げられるものの一つです。
Googleは画像の内容を正しく読み取ることができないので、alt属性を画像内容のヒントにしています。
画像のalt属性を設定しただけでは、高いSEO効果は期待できませんが、SEO内部対策はこのような細かいことの積み重ねなので、適切に設定することをおすすめします。

alt属性の記述方法

alt属性の記述

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

<img src=”画像URL” alt=”該当の画像を表す適切な説明文” width=”幅” height=”高さ”>

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

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

SEOのノートと小物

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

具体的な内容を記述する

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

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

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

長すぎず簡潔に説明する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SEO専門家の見解

SEOを目的として、alt属性に対策キーワードを盛り込むことは、ペナルティの対象とされています。
過度にSEOを意識せずに、alt属性には画像の内容を正確かつ簡潔な説明を心掛けましょう。

alt属性の確認方法

棒グラフが書かれた紙とペン

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

Googleの検証機能

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

  1. Google Chromeで確認したいページを開く
  2. 該当のページ上で右クリックして「検証」をクリックする
  3. 右側にソースコードが表示されるため、確認したい画像の該当箇所をクリックしてalt=”〇〇”の部分を確認する

Chromeの拡張機能

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

  1. Chromeウェブストアを開き、左上の検索ボックスに「Alt&Meta viewer」と入力して表示させる
  2. 「Chromeに追加」をクリックする
  3. 「Alt&Meta viewer」を追加しますか?とポップアップで表示されるため「拡張機能を追加」をクリックする
  4. Google Chromeで確認したいページを開く
  5. 右上にある拡張機能のアイコンから「Alt&Meta viewer」をクリックする
  6. それぞれの画像に設定したalt属性が表示される

まとめ

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

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

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

NEXERは各社の課題に合わせた
専用SEOプランをご提案いたします!
  • どんな対策をすればいいかわからない…
  • 最適な対策キーワードがわからない
  • 施策実行のリソースが不足している

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

SEO無料相談はこちら

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

記事タイトル 記事の内容
SEO対策とは?検索上位表示を狙う方法まとめ! SEOの基本から、おこなうべきSEO対策など、SEOについて総合的に解説しています。
いきなりGoogleの検索順位が下がったのは何故!原因と対策方法をご紹介 検索順位が下がってしまった原因とその対処法を紹介しています。
【メディア運営者が教える】ChatGPTでSEOに強い記事を作成する方法! ChatGPTでSEOに強い記事を作成する方法を、実際に利用している経験からアドバイス。
SEOライティングのコツ10選!SEO初心者が意識すべきポイントもご紹介 初心者でも読むだけでSEOに強い記事をかける、ライティングのコツを解説しています。
【2023年最新版】SEO外部対策とは?ポイントや注意点を解説! SEO外部対策の効果や、おすすめの外部対策方法を解説しています。
上位表示されやすいロングテールキーワードのSEO対策方法をご紹介! ロングテールキーワードでのSEO対策方法や、ロングテールSEOの成功事例を解説しています。
内部リンクとは?SEO効果と設置の際のポイントを解説 内部リンクのSEO効果と、正しい設置方法を解説しています。
Googleペナルティのチェック方法!対策法も詳しく解説 SEOでGoogleペナルティの対象になる原因と、ペナルティ解除方法を解説しています。
記事外注で後悔しない!おすすめの記事代行サービス12選と発注前の準備 失敗しない記事外注のコツと、記事代行サービスをご紹介しています。
コンテンツSEOとは?メリットやデメリット、成功事例など コンテンツSEOの方法と、成功事例などをご紹介しています。
ローカルSEOとは?ローカルSEOの種類や対策方法などを解説 ローカルSEOの対策方法を詳しく解説しています。
【2023年最新版】SEOの内部対策は何をするべき?対策方法を解説 おこなうべきSEO内部対策を解説!内部対策チェックリストも有ります。
SEO対策にかかる費用は?依頼先の選び方も紹介 SEO対策を業者に依頼する場合の費用を対策内容別に解説しています。
相互リンクにSEO効果はある?相互リンクのやり方と注意点を徹底解説 危険な相互リンク・安全な相互リンクを解説しています。
被リンクのSEO効果は?良質な被リンクの獲得方法や悪質な被リンクの防ぎ方 被リンクのSEO効果や、おすすめの被リンク対策をご紹介しています。
ホワイトハットSEOのやり方を解説!ブラックハットSEOとの違いは? ホワイトハットSEOの内容とやり方を解説しています。
11サイトのSEO成功事例とSEOを成功させるための大切なポイント SEOで成功しているサイトの事例を紹介!SEOで成功するポイントも解説しています。
SEOコンサルとは?実績のあるSEOコンサルティング会社15選を紹介 SEOコンサルティングの内容と、依頼した場合の費用などを解説しています。
SEOに強いディレクトリ構造の作り方!正しい階層の設定方法 SEOに効果的なディレクトリ構造の整え方を解説しています。
失敗しないSEO会社の選び方や注意点・悪質業者を見分けるコツ 失敗しないSEO会社の選び方や、悪質なSEO会社の見分け方を解説しています。
競合分析がSEOで重要な理由は?競合調査する方法やコツをご紹介 SEO専門会社が実際におこなっているSEOの競合分析方法をご紹介しています。
コーポレートサイトのSEO対策のコツを紹介!自社サイトの検索順位の上げ方 コーポレートサイトのSEO対策方法を詳しく解説しています。
【Google公式情報あり】SEOのE-E-A-Tとは?重要性と対策を解説 E-E-A-T評価についてGoogleのガイドラインを基に詳しく解説しています。
Googleが推奨するSEO対策とは?Google公式の見解をご紹介! Google公式が発表しているSEOのガイドラインを基に、Googleが推奨しているSEO対策を解説しています。
コンテンツマーケティングとは?内容と取り組み方、成功事例を紹介 コンテンツマーケティングのやり方や実例をご紹介します。
逆SEOとは?利用目的と手法・被害に遭った際の対処法も解説 正しい逆SEOのやり方、攻撃的逆SEOを受けた際の対処法などをご紹介します。


監修者プロフィール

NEXER 工藤

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

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

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