alt属性の書き方とは? SEOに効果的な記述方法や注意点を解説

こんにちは。SEOコンサルティングサービスライターチームです。
Web担当者の皆様、Webページの画像のalt属性についてご存知でしょうか？
「alt属性はSEOに影響するのか？」
「title属性との違いがよくわからない」
という方もいらっしゃるかもしれません。

alt属性は単なる画像のタグだと誤解されている方もいらっしゃいますが、実際にはSEO的に重要な役割を果たします。不適切なalt属性を記述してしまうとWebサイトのSEO評価が下がりかねません。

そこで今回は、alt属性の意味からSEOに効果的なalt属性の書き方、確認方法まで丁寧に解説いたします。適切なalt属性を記述してWebサイトの評価を上げていきましょう！

WACULのSEOコンサルティングサービスの資料請求はこちら

alt属性とは?初心者にもわかる基礎理解

alt属性とは、ページ内の画像の内容を検索エンジンに伝えたり、画像が読み込めない時に表示させる代替テキストのことです。

現状、検索エンジンはWebサイトに添付されている画像の内容を把握することができません。

そこで、「何が写っているのか」「写っているものが何をしているのか」といった情報を検索エンジンに伝えるために、画像にalt属性というタグを付けるのです。

alt属性の具体的な書き方

実際には、タグは以下のように記述します。

<img src="画像のURL" alt="画像の説明" width="幅" height="高さ" />

例えば、以下のようになります。

<img src="https://example.com/image/aaa.png" alt="冬の富士山" width="160" height="90" />

この中のalt="画像の説明"の部分をalt属性と呼びます。

alt属性はHTMLタグ

alt属性は、HTMLのimgタグ内に記述する属性の1つです。imgタグには画像のURLを指定するsrc属性と並んで、alt属性が設定できるようになっています。先述したように、HTMLファイル内で「<img src="画像のURL" alt="画像の説明">」という形式で記述されます。このalt="画像の説明"の部分が、画像の内容をテキストで説明する役割を持ちます。

alt属性の目的とユーザーへの影響

alt属性はHTMLタグですから、通常であればユーザーが目にすることはありません。しかし、次のような場合のために必要となります。

・Webページの読み込みが遅いなどの場合に、画像の代わりにテキストとして表示される

・Webページの音声読み上げ機能を用いた時、alt属性が読み上げられる

・画像をリンクにした場合、alt属性がアンカーリンクテキストとなる

・検索エンジンのクローラーにどのような画像なのか伝えることができる

音声読み上げ機能とalt属性の対応

視覚障害者や高齢者は、スクリーンリーダーと呼ばれる音声読み上げソフトを使用して、Webページを閲覧しています。スクリーンリーダーは、文字情報を音声で読み上げることはできますが、画像そのものの内容を理解することはできません。そこでalt属性に設定されたテキストが読み上げられることで、画像の内容を音声で理解できるようになります。

視覚障害者への支援とアクセシビリティ向上

alt属性を適切に設定することは、視覚障害者への重要な支援となります。全盲の方はスクリーンリーダーでalt属性を音声で聞き、弱視の方は拡大表示や点字変換を通じてテキスト情報を取得します。Webコンテンツのアクセシビリティガイドラインである「JIS X 8341-3」でも、画像を含む非テキストコンテンツに代替テキストを提供することが求められています。

※参考：JIS X 8341-3:2016 解説｜ウェブアクセシビリティ基盤委員会

alt属性とSEO効果

先ほどもちらっと触れましたが、alt属性はSEOに影響を与えます。どのような点でSEOと関係があるのか、3つに分けて解説いたします。

1.alt属性は検索エンジンのクローラーが読むテキスト

alt属性は検索エンジンのクローラーが画像の内容を把握するためのテキストです。検索エンジンのクローラーは、人間とは違って画像から画像の内容を把握することはできません。そこで、alt属性に記述されているテキストから「その画像に写っているものが何なのか」、「どのような画像なのか」といった情報を取得するのです。

つまり、alt属性に用いたキーワードが検索で用いられるということです。「富士山」で検索された場合に、alt属性に「富士山」と書かれた画像があれば検索でヒットするのです。ですから、alt属性には画像の内容を正しく表したキーワードを含めるようにしましょう。

2.alt属性は画像リンクのアンカーテキスト

alt属性がSEOに影響を及ぼすのは、検索エンジンのクローラーが参照するからだけではありません。画像をリンクにした場合、alt属性がアンカーリンクテキストとなるのです。リンクのアンカーテキストは検索エンジンがWebサイトを巡回する際に用いるもので、SEOに大きな影響を与えます。

画像リンクのalt属性は、画像のalt属性であると同時にリンクのアンカーテキストでもあるということです。両者の記述方法に気を付けつつ、画像の内容を簡潔に表現したテキストを記述することがリンクの最適化に繋がります。

3.通信エラーで画像が表示されない場合の代替テキスト

alt属性は検索エンジンに対してのみならず、ユーザーに対するわかりやすさにも影響します。何らかの原因で画像が読み込まれなかった場合に、alt属性が代替テキストとして表示されるのです。画像の内容が記述してあれば、画像が読み込まれなくともユーザーはページの内容を把握することができるようになります。

これによってユーザビリティが向上し、Webサイトの評価が上がりSEOに良い効果をもたらすのです。

Google画像検索での表示とalt属性の関係

適切なalt属性を設定することで、Google画像検索での上位表示が期待できます。検索エンジンはalt属性、画像周辺のテキスト、画像ファイル名などから画像内容を推測していますが、中でもalt属性は画像を理解するための最も重要な情報です。

画像検索で上位表示されれば、アパレルや家具のように視覚的に確認したい商品を探すユーザーを、新たに集客できるチャネルとなります。

title属性とalt属性の違いは？

alt属性と似ている属性に、title属性があります。title属性とは、画像だけではなくテキストなど全ての要素に記述することができるもので、タグを記述した画像・ワードに関する説明や関連情報を記述します。

実際のWebページ画面では、カーソルをその対象物に当てると吹き出し（コメントチップ）が表示されるようになります。

※SEOブログ　title属性とalt属性について(CROSS WALK)より

画像のalt属性とtitle属性は違いがわかりにくいですが、SEO的に重要度が高いのはalt属性です。alt属性がユーザーや検索エンジンのクローラーのためにその画像の情報を記述するのに対し、title属性はユーザーに対して画像の補足説明を行うものです。alt属性は基本的に記述すべきですが、title属性は必ずしも記述する必要はありません。

むしろ、title属性を入れすぎるとカーソルを動かす度に吹き出しが現れ、Webページが見にくくなってしまう可能性もあります。title属性は、画像やテキストに対して補足的な説明が欲しい場合に限り使用するようにしましょう。

alt属性の効果的な記述方法と注意点

alt属性はSEOに影響する重要な要素です。alt属性を適切に記述すればSEOに良い効果をもたらします。しかし、alt属性を適当に記述してしまうとSEOに悪影響を与える可能性もあります。そこでこの章では、alt属性の適切な記述方法についてご説明します。

1.キーワードを入れすぎない

画像の内容をわかりやすく記述したいからといって、キーワードを詰め込みすぎないように注意しましょう。

例えば、雪を被った冬の富士山の画像を用いたとしましょう。この場合、
alt="冬の富士山"
といったalt属性が適切です。

alt="富士山　冠雪　雪　冬　静岡の富士　美しい風景"
のように関連キーワードを入れすぎると内容がブレてしまいます。キーワードは2~3個に抑えておきましょう。

2.画像の内容に即したキーワードを記述する

画像の内容を端的に表すキーワードを記述する必要があります。画像の内容から逸れてしまわないように注意しましょう。上記の例であれば、

alt="冬の富士山　温泉　世界文化遺産　スキー　スノボ"

の後半のキーワードのように、冬の富士山と全く関連が無いわけではありませんが、画像の内容ではないキーワードは使用しないようにしましょう。また、画像の内容と関係無いキーワードを入れて検索でヒットしやすくするのは絶対にやめましょう。検索エンジンの品質ガイドラインに抵触しペナルティを受ける可能性もあります。

3.簡潔な長さにする

キーワードを入れすぎない、という注意点と重複しますが、alt属性を長くしすぎないようにしましょう。

alt="よく晴れた日に静岡県側から見た雪を被った美しい富士山"

のように情報を詰め込みすぎると画像で何を伝えたいのかわかりにくくなってしまいます。

alt="冠雪の富士山"

のように簡潔に表現しましょう。
以上のように、alt属性の記述で心掛けるべきは「わかりやすく簡潔な表現」です。

ユーザーにとってわかりやすくなり、同時に検索エンジンのクローラーにもわかりやすくなります。SEOを考慮しながらalt属性を記述しましょう！

装飾目的の画像はalt属性を空白にする

デザイン装飾の目的で配置された罫線や背景などの意味を持たない画像には、alt属性を空白（alt=""）にして設定します。スクリーンリーダーを利用するユーザーにとって、装飾画像まで読み上げられると煩わしく、正しい情報がわかりにくくなってしまいます。なお、alt属性自体を削除してしまうとファイル名を読み上げてしまうソフトもあるため、空白で設定しましょう。

モバイル用ページにも必ず設定する

Googleはモバイルファーストインデックス（MFI）を採用しており、モバイル版ページを評価基準としています。そのため、パソコン版だけでなくモバイルページでも、alt属性を適切に設定することが重要です。alt属性が設定されているモバイルページは検索順位が上がりやすくなります。

タイトル・見出し・リンク画像には必ず記述する

画像をリンクとして使用する場合、alt属性はアンカーテキストと同等の役割を果たすため、必ず記述しましょう。検索エンジンのクローラーは、アンカーテキストを用いてリンク先のページを把握しています。そのため、alt属性を設定すると、クローラビリティの向上につながります。

また、タイトルや見出しを画像化している場合も、その内容を正確に伝えるalt属性が必須となります。

alt属性の設置確認方法と検証ツール

alt属性が適切に設定されているか確認する方法はいくつかあります。ここでは3つの確認方法を解説します。

Chrome拡張機能「Alt & Meta viewer」を使った確認方法

Chrome拡張機能「Alt & Meta viewer」は、ページ内の画像に設定されたalt属性を、視覚的に確認できる無料ツールです。Chrome Webストアからインストール後、ブラウザ画面右上の「Alt」マークをクリックします。「画像Altの表示」を選択すると、画像近くに「Alt：設定なし」のようにalt属性の記述情報が表示されます。

このツールを使えば、ページ全体のalt属性を一目で把握でき、設定漏れや不適切な記述を素早く発見できます。

ブラウザの検証機能を活用した確認方法

Googleの検証機能を活用すれば、特別なツールなしでalt属性を確認できます。Google Chromeでalt属性を確認したいページを表示し、キーボードの「F12」を押すか、右クリックで「検証」を選択すると、画面右側にHTMLのソースコードが表示されます。

次に左上のアイコンをクリックして、確認したい画像を選択すると、<img src="〇〇" alt="〇〇">のalt属性の記述内容を確認できます。

WordPressでのalt属性確認方法

WordPressでは、メディアライブラリから簡単にalt属性を確認・設定できます。画像を挿入する際、メディアライブラリで、「代替テキスト」欄にalt属性を入力します。すでに挿入済みの画像の場合は、ブロックエディタで画像を選択し、右側のサイドバーにある「代替テキスト」欄で、確認および編集が可能です。

まとめ

alt属性はWebページ内の画像の内容を記述するもので、画像が表示されない場合に代替テキストとして表示されたり、検索エンジンのクローラーに画像内容を伝えたりするなど重要な役割を果たしています。画像の内容に即した適切なキーワードを用い、適切な長さのテキストで記述しましょう。

さらに、SEOで成果をあげたい方が今取り組むべきなのはコンテンツマーケティングです。

良質なコンテンツが増えるとサイト全体の評価が上がり、ビッグワードでの検索順位が上昇するため、確実に流入を増やしていくことができます。また、コンテンツから適切な誘導を行えばCVの増加にもつながります。

SEOに強い良質なコンテンツを作るためにおすすめなのが、弊社が提供する「SEOコンサル」です。WACULの「SEOコンサルティングサービス」は、月額30万～SEO戦略設計、内部対策、外部対策に加え、記事制作やサイト導線改善までを含むパッケージプランとしてご提供しています。資料請求を頂いた方には、WACULオリジナルの「SEO改善チェックシート」をプレゼントしています。SEOに関する情報収集をしている方や、現在のSEOにお悩みの方は、お気軽にご相談ください。

資料請求は無料ですので、まずはお気軽にお問い合わせください。

WACULの「SEOコンサルティングサービス」の資料請求はこちら