a

「画像にalt属性を設定しているのに、なぜかSEO効果が感じられない…」「alt属性の正しい書き方がよく分からず、とりあえずファイル名を入れている…」「WordPressで画像をアップするとき、代替テキスト欄に何を書けばいいか迷ってしまう…」

こうした悩みを抱えているWeb担当者・SEO初心者の方は少なくありません。alt属性は画像に関わるHTMLの中でも特にSEOと画像検索の両方に大きく影響する重要な要素ですが、正しい記述方法を体系的に学ぶ機会は意外と少ないものです。

本記事では、alt属性の基本的な役割から、SEO効果を最大化する書き方、具体例と避けるべきNG例まで、初心者にも分かりやすく解説します。記事を読み終える頃には、alt属性を自信を持って書けるようになり、サイト全体の検索評価向上につなげられるでしょう。

この記事の監修者：中嶋 翼（CEO）

2020年在学中に起業。大学院で自然言語処理・物体検出の分野を主に専攻し、大学研究機関からの開発依頼の受注を期に法人化。大学院発ベンチャーとしてAI関連技術の開発やAIを活用したWEBマーケティングを産官学をはじめ、様々な分野・業種の方に展開。

趣味はポーカーとサウナと、認めたくないけどゴルフ。来年こそポーカーで5ヶ国周りたいと思ってます！

alt属性とは？役割と重要性をわかりやすく解説

alt属性の基本的な定義

alt属性とは、HTMLの<img>タグに付与する属性のひとつで、画像が表示できない場合に代わりに表示されるテキストのことです。「alt」はAlternative（代替）の略称で、日本語では「代替テキスト」と呼ばれることが多いです。

HTMLでの記述例は以下のとおりです。

画像ファイルが読み込まれない状況や、スクリーンリーダー（音声読み上げソフト）を使用している環境では、このalt属性のテキストが読み上げられます。適切なalt属性を設定することで、視覚に障害のあるユーザーにも画像の内容を正確に伝えられます。

alt属性が持つ3つの役割

alt属性には主に以下の3つの役割があります。

• アクセシビリティの向上：スクリーンリーダーが読み上げることで、視覚障害者が画像の内容を理解できる
• 画像読み込み失敗時の代替表示：通信環境が悪い場合やURLが間違っている場合に、テキストで内容を補完できる
• 検索エンジンへの情報提供：クローラーが画像の内容を認識できないため、alt属性がその説明として機能する

この3つの役割のうち、SEOで特に重要なのが3番目です。Googleのクローラーは画像そのものの視覚情報を完全には理解できないため、alt属性に記述されたテキストを通じて画像の内容を把握します。

画像SEOにおけるalt属性の位置づけ

Googleの画像検索は、テキスト検索と並んで多くのユーザーが利用する重要な流入チャネルです。alt属性が適切に設定されていると、画像検索での表示機会が増え、サイトへの新たな流入経路が生まれます。

また、ページ全体のコンテンツ評価においても、画像のalt属性はページのテーマ・トピックを補強する要素として機能します。本文テキストだけでなく、画像のalt属性も含めてGoogleがページ全体を解析するため、適切な記述がページの評価を高める一因となります。

alt属性のSEO効果と検索エンジンへの影響

Googleのガイドラインにおけるalt属性の扱い

Googleは公式のSEOスターターガイドの中で、「全ての画像に説明的なalt属性を使用することを推奨する」と明記しています。これはSEOの観点だけでなく、ユーザビリティとアクセシビリティの観点からも重要とされています。

GoogleのJohn Mueller（ジョン・ミュラー）氏も、alt属性が画像検索のランキングに影響することを公式に認めており、画像ページとしてのコンテキスト理解にも役立つと述べています。したがって、alt属性はGoogleが公式に認めた重要なSEO要素のひとつです。

画像検索からの流入増加効果

適切なalt属性を設定することで、Googleの画像検索に表示されやすくなり、検索からの流入を増やすことができます。特に以下のような業種・ページタイプでは、画像検索からの流入効果が大きく期待できます。

• ECサイト・商品紹介ページ：商品名・カラー・サイズなどをalt属性に含めることで、購入検討ユーザーへのリーチが増える
• 料理・レシピサイト：料理名・食材名を含むalt属性で、料理を視覚的に探すユーザーを集客できる
• 不動産・住宅サイト：物件の種別・立地・特徴をalt属性に盛り込むことで、画像検索流入が期待できる
• 旅行・観光サイト：観光地名・施設名をalt属性に含めることで、行き先を画像で探すユーザーにアプローチできる

ページ全体のコンテンツ評価への寄与

alt属性はページ全体のテーマを補強する役割も担います。例えば「SEO対策」を解説する記事に掲載する図解画像に、「SEO対策の流れを示す図解」というalt属性を設定することで、ページのトピック一貫性が高まります。

Googleは自然言語処理技術を用いてページ全体を解析し、テキストと画像情報を統合的に評価してページのテーマを判定します。本文中のキーワードとalt属性のキーワードが一致していると、ページの専門性・関連性が高いと評価されやすくなります。

ただし、後述するキーワードの詰め込みは逆効果ですので、あくまで自然な記述を心がけることが重要です。

alt属性の正しい書き方と具体例

画像の内容を具体的かつ簡潔に説明する

alt属性の基本原則は、「目の見えない人に画像の内容を口頭で説明するように書く」ことです。何が写っているか、どのような状況かを具体的に説明します。

文字数の目安は80〜100文字程度が適切とされています。長すぎると読みにくく、スクリーンリーダーでの使い勝手も悪くなります。短すぎると情報が不足してSEO効果が薄れます。

以下に画像の種類別の具体例を示します。

キーワードを自然な形で盛り込む

SEO効果を高めるためには、alt属性に対象キーワードを含めることが重要です。ただし、あくまで画像の内容説明の中に自然な形でキーワードを盛り込むことが前提です。

例えば「alt属性 書き方」をターゲットキーワードとする記事に掲載する図解画像であれば、以下のように記述します。

このように、キーワードが画像の内容説明として機能しており、かつ検索エンジンに対してページのテーマを伝える役割も果たしています。キーワードを無理やり挿入せず、まず「画像の内容を正確に説明する」ことを優先してください。

画像の種類別・状況別の記述ルール

alt属性の書き方は、画像の種類や使用目的によって異なります。以下の基準を参考にしてください。

• 意味のある画像（コンテンツの一部）：内容を具体的に説明するテキストを記入する
• 装飾目的の画像（区切り線・背景など）：alt=""（空のalt）を設定し、スクリーンリーダーにスキップさせる
• リンク付き画像（アイコン・バナーなど）：リンク先のページタイトルや目的を説明するテキストを記入する
• テキストを含む画像（テキスト入りバナー等）：画像内のテキストをそのままalt属性に記入し、テキストも含めて説明する

特に装飾画像への対応は見落とされがちです。装飾画像に不適切なalt属性（ファイル名など）を設定すると、スクリーンリーダーが無駄な情報を読み上げてしまい、アクセシビリティが低下します。必ずalt=""を設定しましょう。

alt属性を書く際のNG例と改善方法

NGパターン①：キーワードの詰め込み（キーワードスタッフィング）

最も避けるべきNGパターンがキーワードスタッフィングです。検索順位を上げようとする意図でキーワードを過剰に詰め込むと、Googleのガイドライン違反となりペナルティを受ける可能性があります。

キーワードはひとつの画像につき1〜2個が上限の目安です。画像の内容説明として不自然に感じられる場合は、キーワードを含めない方が安全です。

NGパターン②：ファイル名やURLをそのまま設定する

WordPressなどのCMSでは、画像をアップロードした際に自動でファイル名がalt属性に入ることがあります。DSC_1234.jpgやimage001.pngといったファイル名はSEOにもアクセシビリティにも全く貢献しません。

また、「ここをクリック」「詳しくはこちら」といったリンク先の内容を説明しない曖昧な文言も、ユーザーにも検索エンジンにも有益な情報を提供できないため避けてください。

NGパターン③：alt属性を完全に省略する

意味のある画像にalt属性を記述しないこと（省略）も大きな問題です。これはアクセシビリティガイドラインのWCAG（Web Content Accessibility Guidelines）に違反する可能性があり、公的機関や大企業のWebサイトでは法的なリスクにもなり得ます。

なお、alt属性を「省略（記述自体なし）」することと、「空にする（alt=""）」することは別物です。装飾画像にはalt=""を設定することで、スクリーンリーダーに「この画像は読み飛ばしてよい」と伝えられます。alt属性を完全に省略すると、スクリーンリーダーがファイル名を読み上げてしまうことがあります。

NGパターン④：長すぎる・冗長な説明文

alt属性の文字数が長すぎると、スクリーンリーダーのユーザーにとって煩わしい体験になります。また、重複情報が多すぎると検索エンジンにも評価されにくくなります。基本的に125文字以内を目安とし、画像の核心的な情報のみを簡潔にまとめましょう。

WordPress・CMSでのalt属性設定方法

WordPressでのalt属性設定手順

WordPressは世界で最も広く使われているCMSであり、多くのWebサイトがWordPressで構築されています。WordPressでのalt属性設定は大きく2つのタイミングで行えます。

【メディアライブラリでの設定】

WordPressの管理画面から「メディア」→「ライブラリ」で画像を選択すると、右側の「代替テキスト」欄にalt属性を入力できます。ここで設定した値は、その画像をどのページに挿入しても共通で適用されます。

【記事編集画面での設定】

Gutenberg（ブロックエディター）では、画像ブロックを選択すると右サイドバーに「代替テキスト」欄が表示されます。ここでの入力はその記事内のみに適用されます。メディアライブラリで設定した値よりも優先されるため、記事ごとに文脈に合ったalt属性を設定したい場合はブロックエディターで個別に入力することをおすすめします。

プラグインを活用した一括設定・確認方法

既存サイトの画像にalt属性が設定されているかどうかを一括確認・修正したい場合は、プラグインを活用すると効率的です。代表的なものを紹介します。

• SEO SIMPLE PACK / Yoast SEO：SEO系プラグインは画像のalt属性確認機能を内包しているものが多く、記事ごとのSEOチェックと合わせて確認できる
• Image SEO：画像アップロード時にalt属性・タイトル・キャプションを自動生成するプラグイン。大量の画像を扱うサイトでの作業効率化に有効
• WP All Export：全画像のalt属性をCSVとしてエクスポートし、一括編集後にインポートすることで大量修正が可能

その他のCMS・サービスでの設定方法

WordPress以外のCMSでも、画像のalt属性設定は基本的にサポートされています。

Wixの場合、画像をクリックして「設定」を開くと「代替テキスト」欄が表示されます。Squarespaceでは画像ブロックの編集画面に「代替テキスト」入力フォームがあります。microCMS・ContentfulなどのヘッドレスCMSでは、フィールド定義にalt属性用のテキストフィールドを追加し、フロントエンドでimgタグのalt属性に動的に渡す実装が一般的です。

どのCMSを使用していても、画像を登録・アップロードする際に必ずalt属性の設定フローを運用ルールに組み込むことが重要です。後からまとめて修正するのは工数がかかるため、初期から習慣化することをおすすめします。

まとめ

本記事では、alt属性の基本的な役割から、SEO効果を高める正しい書き方・具体例、NG例と改善方法、そしてWordPress・CMSでの設定方法まで解説しました。最後に重要なポイントをまとめます。

alt属性は一つひとつは小さな設定ですが、サイト全体で適切に設定されているかどうかがSEO評価の積み重ねに大きく影響します。本記事で紹介したNG例を参考に、まずは自社サイトの既存画像のalt属性を見直してみてください。

「どこから手をつければいいか分からない」「サイト全体のSEO改善を一緒に考えてほしい」という方は、ぜひアリカにご相談ください。Webマーケティングのプロが貴社の状況に合わせてサポートいたします。

「得意分野」をもっと輝かせる。

丁寧に伴走する
総合Webマーケティングパートナー

アリカの強み

神戸市の株式会社アリカでは、Web制作・SNS運用・AIマーケティングを中心に、お客様の強みを最大限に引き出すサポートを行っています。会話を重ねながら、社内から社外へ。たくさんの「ありたい」を叶えるパートナーとして伴走いたします。

• 丁寧なコミュニケーションで貴社の強みを把握
• データ分析に基づいた無駄のないマーケティング戦略
• 初めての方にも安心の伴走型サポート体制

ビジネスの「攻め」と「成長」を、私たちが共に支えます。

お問い合わせはこちら → サービス概要を見る

※お悩みベースの無料相談も受け付けています。