画像にalt属性を入力するとSEO効果につながる、と聞いたことがある方もいるでしょう。
しかし、alt属性がどのようにSEOに影響するのか、具体的には、よくわからないという方も少なくありません。
本記事では、alt属性の意味や役割、SEOへの影響、正しい書き方、注意点をまとめて解説します。コンテンツのSEO対策にぜひお役立てください。
1.alt属性とは画像や写真の代替テキストを指定する属性のこと
alt属性（オルト属性）とは、img要素に付与する、画像の内容や役割を伝えるための代替テキストです。
検索順位の向上などSEO目的の一つとして取り組まれるイメージがあるものの、本来の役割は、より多くの人に情報を届けるための補助です。
たとえば、ブラウザやネットワークの不具合で画像が読み込めなかったとき、alt属性に記述したテキストが代わりに表示されるため、ユーザーは画像がなくても内容をイメージできます。
また、視覚に障害がある方が音声読み上げソフトを利用する場合、alt属性に入力されたテキストが読み上げられることで、情報を得られる仕組みもあります。
検索エンジンも画像理解の手がかりとしてaltテキストを参照するため、画像検索での露出やページ内容理解の補助につながるでしょう。
つまりalt属性は、検索エンジンだけでなく、誰もが情報を受け取れるようにするために欠かせない要素といえます。
1-1.alt属性とtitle属性の違い
alt属性とよく混同される用語として「title属性」があります。どちらもHTMLにおける「属性」ですが、担う役割はまったく異なるため違いを把握しておきましょう。
まず、alt属性は画像にしか付与できず、画像が表示されない場合に内容をテキストで補うために使われるもので、画像そのものの代わりとなる情報です。
一方、title属性は画像だけでなくテキストやリンクなどあらゆる要素に設定でき、内容を補足的に説明する役割をもちます。画像にtitle属性を設定している場合、カーソルを重ねると吹き出しが表示され、補足情報をユーザーに伝えることも可能です。
なお、title属性の吹き出しをalt属性と混同し、代替テキストを誤解するケースも少なくありません。両者の役割を正しく理解して、適切にページをつくりましょう。
2.alt属性によるSEO効果
alt属性を入力すると、具体的にどのようなSEO効果が得られるのかについて見ていきましょう。
2-1.検索エンジンが画像情報を適切に把握できる
alt属性を適切に設定することは、検索エンジンに内容の理解をさせるうえで、非常に重要です。
検索エンジンは画像そのものを人間のように理解するのが難しいため、altテキストに加え、画像解析（コンピュータビジョン）やページ内の周辺情報などをもとに、画像の内容を推定します。
たとえば、商品写真や図解にわかりやすい代替テキストを付与しておけば、検索エンジンが画像の意味を把握し、関連するキーワードとの関連性を強化するのにも役立ちます。
結果として、画像検索での表示機会が増え、通常の検索結果とは別の経路からもユーザーを呼び込むことが可能となるでしょう。
2-2.画像にリンクが設置されている場合、アンカーテキストと同様の役割になる
alt属性は、画像をただ説明するためのものではなく、リンク設置においても重要な役割を担っています。
通常、リンク先ページの内容を検索エンジンに伝える際に用いられているのが、「アンカーテキスト（リンク内のテキスト）」です。しかし、リンクがテキストではなく画像に設定されている場合は、画像に付与されたalt属性がアンカーテキストと同じ機能を持ちます。つまり、検索エンジンのクローラーは、alt属性の内容を手がかりにリンク先ページのテーマや関連性を判断しているのです。
画像リンクの場合、alt属性がリンク先内容を補足する情報として利用され、内部リンクの文脈理解を助ける要素になります。
そのため、適切なalt属性は、SEOの内部対策としても有効だといえるでしょう。
参考：Google検索セントラル「わかりやすいファイル名、タイトル、代替テキストを使用する」
3.alt属性の書き方
alt属性は、HTMLのimgタグの中で画像の内容を説明するように記述します。基本の書き方はシンプルで、以下のような形式です。
<img src=”画像のURL” alt=”画像の内容を説明するテキスト”>
テキストを入力する際のポイントは、alt属性に画像を見なくても内容が伝わるよう簡潔で具体的な説明を入れることです。
たとえば、野球チームの集合写真を掲載する場合は「 alt=”写真”」とするよりも「alt=”優勝後にグラウンドでポーズをとる野球チーム”」とするほうが、画像の状況がより明確に伝わります。
なお、WordPressなどのCMSを使う場合は、画像アップロード時に「代替テキスト」欄に入力するだけでalt属性を自動的に付与できます。
4.alt属性を活用する際の注意点
ここからは、alt属性を記述する際の注意点を解説します。
4-1.具体的な内容を簡潔に記載する
alt属性を設定する際は、画像の内容を具体的かつわかりやすく伝えることが重要です。情報を詰め込みすぎると読みづらくなり、反対に曖昧すぎると何の画像なのか伝わりません。
たとえば、野球の試合写真を掲載する場合「夕方の球場で仲間と声を掛け合いながら全力疾走しているユニフォーム姿の高校生選手」 と詳細を詰め込みすぎると冗長になりがちです。「球場を走る高校野球選手」としたほうが、画像の主旨がシンプルに伝わります。
検索エンジンはaltを含むテキスト情報を手がかりの一つとして画像の内容を理解するため、伝えるべき本質だけを残すようにしましょう。
キーワードの過剰な挿入は、スパムと判断される要因になりかねません。明確な文字数目安はないものの、画像内容が過不足なく伝わる、簡潔な表現を意識します。
SEO的にもユーザー視点としても最適な記述になるように意識して、テキスト内容を考えましょう。
4-2.画像がタイトル・見出し・リンクの役割を持つ場合は必ず記載する
検索エンジンにとって、タイトル（titleタグ）や見出し（hタグ）、リンク（aタグ）などの要素はページ評価を進めるうえで欠かせない情報源です。
これらの要素をテキストではなく画像が兼ねている場合、そのままでは検索エンジンに正しく内容が伝わりにくいため、alt属性で補う必要があります。たとえば、見出し画像やリンクボタンにテキストが含まれている場合、alt属性を設定すると検索エンジンは内容を正しく理解でき、適切な評価につながります。
特にリンク付き画像は、alt属性がアンカーテキストの代わりとなるため、リンク先のページ内容を的確に説明する文言を入れるようにしましょう。
4-3.画像が装飾目的の場合はalt属性は空白にする
alt属性は基本的に画像の内容を伝えるために設定するものですが、すべての画像に説明文を入れる必要はありません。
たとえば、ページをデザインするうえでのアクセントや装飾目的で配置している画像などが当てはまります。ページの内容を理解するために不要なものについては、無理にテキストを入れるよりも空白のalt属性を記述するほうが望ましいです。
記述は、「alt=””」 のように空欄で設定し、検索エンジンのクローラーに特別な意味を持たない画像であることを伝えます。
一方で、不要な文字列やファイル名を入れてしまうと、クローラーに誤解を与える可能性もあるため注意が必要です。ページ構造を明確にするためにも、装飾画像にはあえて空白のalt属性を設定するようにしましょう。
5.alt属性の確認方法
alt属性が正しく設定されているかを確認するには、Google Chromeに標準搭載されている「検証」機能を活用するのが簡単かつ確実な方法です。専用の拡張機能を入れて調査する方法もあるものの、検証機能のほうが手軽でスムーズに確認できるため、ここでは検証機能の確認方法を紹介します。
まず、確認したいページをGoogle Chromeで開き、対象箇所で右クリックし「検証」を選択します。その後、画面右側にHTMLのソースコードが表示されるので、<img>タグを探し、「alt=”◯◯◯”」の部分をチェックするだけです。
内容を確認し、適切な代替テキストが記述されていれば問題ありません。
6.alt属性のSEO効果についてまとめ
alt属性は画像の内容を理解しやすくするために設定する代替テキストで、ユーザーのページ理解を助けるだけでなく、クローラーのページ評価を促すうえでも役立つものです。
ただし、不自然なキーワードの羅列や画像内容と関係のない記述は、画像の意味理解を妨げる可能性があります。入力するテキストは適度な長さでわかりやすい表現になるように意識しましょう。
alt属性の設定など細かい対策までなかなか手が回らない場合には、専門家にサポートを依頼するのも一つの手です。
Webosqueでは、サイトのSEO効果を高めるために、ページ設計・コンテンツ内容・デザインなど幅広い側面から分析し、現実的な対策をご提案しております。より高い評価を得て集客・成約率をアップさせたいとお考えであれば、ぜひWebosqueへお気軽にご相談ください。