画像のALT属性はSEOに重要なのか?

画像のALT属性はSEOに重要なのか?
David Kaufmann
SEO Tutorials
9 min read

「百聞は一見にしかず」という言葉を聞いたことはありますか?その通りなのですが…画像が見えなかったらどうなるでしょうか?そのために作られたのがALTタグ、つまりALT属性です。今日は、それが何であるか、そしてSEOを最大限に活かすためにどう活用するかを解説します。

準備はいいですか?さあ、始めましょう!

ALT属性とは?

ALT属性、つまり代替テキストとは画像に対して提供される説明で、画像が壊れていたり読めなかったりする場合(ボットや視覚障害のあるユーザーなど)に、コンテンツを補完するために提供されます

画像におけるALT属性の役割は?

ALT属性の主な目的は、画像を適切に見ることができないユーザーのウェブアクセシビリティを向上させることです。たとえば、スクリーンリーダーに頼るユーザーがそれにあたります。スクリーンリーダーとは、その名の通り画面のコンテンツを音声で読み上げるソフトウェアです。

これらのリーダーが画像にたどり着いたとき、画像自体を説明できないため、代替テキストを使用してユーザーに写真に何が写っているかのコンテキストを提供します。こうしてユーザーは画像から情報を「失う」ことなく、ウェブサイトを正しくナビゲートできるのです。

なぜALTタグはSEOに重要なのか?

SEOコンサルタントとしての私たちの役割は、Googleにできるだけ多くの情報を提供することで、Googleが私たちのコンテンツを理解し、適切なユーザーに表示できるようにすることです。

確かにGoogleの画像処理エンジンは大幅に改善されており、画像の内容を一般的な形で理解できることは間違いありませんが、画像にALT属性を含めるのは常に良いアイデアです。こうすることで、Googleが写真に関するすべての情報を持ち、コンテンツ内での意味を理解できることが保証されます。

述べたように、それらを適切に使用し、Googleを悪い意味で「騙そう」としないことが重要です。つまり、コンテンツに車の写真を入れて、その代替テキストに「安いスニーカー」と書くのは意味がありません。これらは無関係であり、警告を引き起こす可能性があります(特に代替テキストがキーワードスタッフィングに使われる場合)。

コンテンツに関連する写真と代替テキストを使用しましょう。常にこのルールに従い、メインキーワード、サブキーワード、関連語句などを代替テキストに含めるのが最善です。通常、自然に含めることができるので、これを行うのに苦労はしないはずです。

画像にALTタグを追加する方法

ここまで来て、おそらくこう思っているのではないでしょうか:この代替テキストをウェブサイトにどう追加すればいいの?

ご安心ください、私たちがお手伝いします。最も人気のある2つのCMSでの方法を見ていきましょう。

WordPressで画像にALT属性を追加する方法

この場合は非常に簡単です。メディアライブラリに移動し、写真を選び、代替テキスト用のフィールドに入力するだけです:

WordPressでALT属性を追加する方法
WordPressでALT属性を追加する方法

もう少しコンテキストを与えるために、画像で示されているようにキャプションと説明も入力できます。さらに、画像を追加する瞬間に記事エディタで直接これを行うこともできます。

PrestaShopで画像にALT属性を追加する方法

PrestaShopにはメディアライブラリやこの専用フィールドはありません。

それでは、どう追加するのでしょうか!?

ご安心ください、コツを説明します。やるべきことは、商品画像内のキャプションフィールドに入力することです:

PrestaShopでALT属性を追加する方法
PrestaShopでALT属性を追加する方法

ほとんどのテーマでは、Captionフィールドに入力した内容が編集中の画像のALT属性として設定されます。

問題は、このCMSではALT属性の追加が一つひとつ行わなければならないため非常に面倒だということです。そのため、私たちの**PrestaShopにおけるSEOガイド**では、すべての画像に素早くALTを追加できるモジュールを紹介しました。

画像のALT属性を確認する方法

ここで、ウェブサイトの画像にALT属性があるかどうかを確認する方法を説明します。2つの選択肢があります:

インスペクターを使う

Chromeを使っている場合、ウェブサイト内で右クリックすることでインスペクターにアクセスできます。インスペクター内で画像を選択してALTを表示するだけです:

ChromeのインスペクターでALT属性を表示する手順
ChromeのインスペクターでALT属性を表示する手順

少しわかりにくいですか?かもしれませんが、ご心配なく。もっと簡単な方法も紹介しましょう:

Chrome拡張機能を使う

この場合は、Web DeveloperというChrome用のSEO拡張機能をインストールすることをお勧めします。インストールしたら、歯車アイコンに行き、images > Display Alt Attributesを選択するだけです:

Web Developer拡張機能でALT属性を表示する設定
Web Developer拡張機能でALT属性を表示する設定

このオプションを有効にすると、各画像の横に各画像のALT属性を表示する小さなツールチップが表示されます:

Web Developer拡張機能のツールチップがALT属性を表示
Web Developer拡張機能のツールチップがALT属性を表示

まとめ

見てきたように、ALT属性は見落とされがちなSEO要素ですが、**SEO戦略**にちょっとした追加の後押しを与えることができます。

ユーザーが見たときに混乱しないよう、テキストに合った写真を常に選び、ユーザーと私たちの大切な友人Googleの両方にとって、説明的で関連性のある代替テキストを書くことを忘れないでください。

いつも通り、ご質問があればコメント欄でお待ちしています :)

著者: David Kaufmann

David Kaufmann

私はこの10年以上、SEOに完全に夢中になって過ごしてきました。正直なところ、他の生き方は考えられません。

私のキャリアが新たな次元に到達したのは、Chess.com でシニアSEOスペシャリストとして働いたときでした。Chess.com はインターネット全体で最も訪問数の多い上位100サイトの1つです。数百万ページ、数十言語、そして最も競争の激しい SERPs の1つという規模で仕事をした経験は、どんなコースや資格でも得られないことを教えてくれました。あの経験は、本当に優れたSEOとは何かという私の視点を一変させ、それ以降に私が築いてきたすべての土台となりました。

その経験から、私は SEO Alive を創業しました。オーガニック成長に本気で取り組むブランドのためのエージェンシーです。私たちは dashboards や月次レポートを売るためにここにいるのではありません。本当に成果を動かす戦略を構築するためにここにいます。クラシカルなSEOの最良の部分と、Generative Engine Optimization (GEO) というエキサイティングな新しい世界を組み合わせ、あなたのブランドが Google の青いリンクだけでなく、ChatGPT、Perplexity、Google AI Overviews が毎日何百万人もの人々に届けている AI 生成の回答の中にも確実に表示されるようにします。

そして、この両方の世界をきちんと扱えるツールが見つからなかったので、自分で作りました。それが SEOcrawl です。rankings、テクニカル監査、backlinks モニタリング、crawl ヘルス、そして AI ブランド可視性トラッキングを1つの場所に統合した、エンタープライズ向けのSEOインテリジェンスプラットフォームです。まさに、ずっと存在してほしいと願っていたプラットフォームです。

→ David のすべての記事を読む
著者の他の記事: David Kaufmann

この著者の他のコンテンツをご覧ください