Alt属性

alt属性とは、画像の変わりとなるテキスト情報のことを指す。何らかの事情で画像が表示できない場合にテキストが表示され、代替テキスト、altタグとも呼ばれる。

Google検索においては、画像にリンクを貼る場合にはalt属性が「アンカーテキスト」と同様に扱われる。

また、正しいalt属性を利用することにより、ウェブアクセシビリティが向上し、SEOに与える影響があるものだと考えられている。

SEOのベストプラクティス

alt属性のファイル名の書き方

良いalt属性の書き方として、Googleは「簡潔でわかりやすいファイル名と alt テキストを使用する」ことを伝えている。

また、サイトナビゲーションとして画像のリンクのみを使用することも避けるべき方法としているの。

alt属性の書き方の注意点

画像を具体的に説明すること
alt属性の文字数を短くすること
画像SEOのためのキーワードの乱用は避けること
キーワードを並べた書き方を避けること
alt属性に「~の画像」などを含めないこと
文章全体や一部の内容をコピーして貼り付けないこと

ボタンなど、すべての画像にはalt属性を利用することを心がけ、「最大約125文字以下（日本語の場合は62文字程度）」で記載する。

また、画像により長い説明が必要な場合は「longdesc属性」を利用する。

ファイル名の注意点

画像のファイル名は日本でも「英文」で伝えたほうが良く「簡潔でわかりやすいファイル名」を指定する。

例えば、「image1.jpg」「pic.gif」「1.jpg」など一般的なファイル名をつけることは避ける。

alt属性・ファイル名等の書き方例

書き方例1

はちみつとブルーベリーのパンケーキ

ブルーベリーのパンケーキ画像の例を元に、説明していく。

悪いalt属性・ファイル名

//悪いalt属性・ファイル名
<img src=”111.png” alt=”パンケーキの画像“>

alt属性に「パンケーキ」を入れていますが、「の画像」と入っている駄目な例。

また、画像のファイル名に数字が入っており、一般的なファイル名を使用する駄目な例。

良いalt属性・ファイル名

//良いalt属性・ファイル名
<img src=”pancake.png” alt=”はちみつとブルーベリーのパンケーキ“>

alt属性に「はちみつとブルーベリーのパンケーキ」と画像の詳細内容を説明。

はちみつとブルーベリーのパンケーキを想像して、画像を見るとその通りだと感じれる内容が良い。

また、ファイル名も「pancake.png」と画像との関連性があるファイル名に指定してる。

書き方例2

エスカレーターにキャリーバックを持って乗っている男性

エスカレーターに乗っている男性の画像のalt属性、ファイル名の例。

悪いalt属性・ファイル名

//悪いalt属性・ファイル名
<img src=”image.png” alt=”“>

alt属性が空欄となっており、画像のファイル名一般的なファイル名を使用している駄目な例。

良いalt属性・ファイル名

//良いalt属性・ファイル名
<img src=”escalator.png” alt=”エスカレーターにキャリーバックを持って乗っている男性“>

alt属性に画像の具体的で簡潔な情報を説明があり、ファイル名も「escalator（エスカレーター）」とシンプルで画像と関連がある。

SEOに与える影響

SEOに与える影響は、Google正確にはランキング要因であることや（画像SEOを除く）SEOに有効であることは伝えていない。

ただし、alt属性がSEOに有効な（ランキングシグナル）理由としては、以下のことが考えられる。

画像を表示しないブラウザの場合変わりにAlt属性が表示される（ウェブアクセシビリティ）
音声ブラウザの場合、alt属性が読まれる（ウェブアクセシビリティ）
画像の読み込み完了前に表示される（ウェブアクセシビリティ）

画像が何らかの事情で見ることが出来ないユーザーの場合でも、alt属性が入っていることで視覚的な能力に関係なくコンテンツを評価することが出来る。

そのため、alt属性を使うことでユーザーエクスペリエンス（利用者の体験）が向上する。

スクリーンリーダー等の技術に対応できる

Google「検索エンジン最適化（SEO）スターターガイド」において、以下の回答をおこなっている。

この属性を使用するのは、ユーザーがスクリーンリーダーのようなサポート技術を使ってサイトを閲覧する場合に、alt 属性の内容が画像についての情報を提供するためです。

画像をリンクで利用する場合、アンカーテキストと同様に扱われる

Google「検索エンジン最適化（SEO）スターターガイド」において、以下の回答をおこなっている。

画像をリンクとして使用する場合、その画像の alt テキストが、テキストリンクのアンカーテキストと同様に扱われることです。ただし、テキストリンクで同じ目的を果たせる場合は、サイトのナビゲーションに画像を使いすぎることはおすすめしません。

Google画像検索が適切に理解しやすくなる

Google「検索エンジン最適化（SEO）スターターガイド」において、以下の回答をおこなっている。

画像のファイル名と alt テキストを最適化すると、Google 画像検索のような画像検索プロジェクトが画像を適切に理解しやすくなります。

良くある質問

altテキストは何文字で入力することがベターか？

英語の場合は最大約125文字以下のため、日本語では62文字程度で具体的な説明を入れる。

altテキストを長くても20文字から30文字を目安にすることを推奨。

altテキストは単語か文章どちらで入れる？

句読点がない文章で入れる。

出典

検索エンジン最適化（SEO）スターターガイド（Google検索セントラルブログ）
Alt Text What is Alt Text?（Moz）