ページ内の画像が「どういった画像なのか？」をGoogleは正確に判断することができません。
せっかく作った、撮影した画像が何を指し示すものなのかを伝えるものが『alt属性』です。
特に、リンクを付与する画像にはアンカーテキストの代わりとなる役目も果たすため、非常に重要な設定です。
しかし、alt属性を設定していない画像リンクも多々あるので、次ページの説明につながるように設定しておきましょう。
SEOの基礎や概念から知りたい人は、こちらもどうぞ！
【全てのWebサイトに共通】SEOの概念と基本的な理解を言えますか？
alt属性とは
alt属性（オルト属性）とは、画像の意味を明らかにするものです。また、何らかの原因でWebブラウザで画像が表示できないときに、画像の代わりに表示されるテキストを指定するためにも使用されます。その際、何の画像か分からなかった場合でも、何の画像を表示しようとしていたか分かります。
また、スクリーンリーダーや音声ブラウザでの読み上げの際にも、画像部分ではalt属性で設定した代替テキストが読み上げられるようになります。
ちなみに、img要素に以下のように記述をすることで画像に意味を与えます。
<img src="画像のURL" alt="ココに画像の代わりとなるテキストを入力">画像にリンクの有無があっても、原則として意味のある画像には全てaltテキストを設定するようにしましょう。
ただし、矢印アイコンや特段意味を持たない画像にはaltテキストを設定しなくても構いません。
altテキストは15〜20文字の明瞭な内容で設定
画像の意味を持たせるaltテキストは、画像の意味を持たせるために明瞭な内容で15〜20文字前後で設定します。
その際、前後の文脈も考慮した内容にしましょう。
例えばリンゴの画像があったとします。
これはどういったリンゴかは、前後の文脈とaltテキストによって意味合いが異なってきます。
- A：<img src=”画像のURL” alt=”リンゴ”>
- B：<img src=”画像のURL” alt=”青森産のリンゴ”>
- C：<img src=”画像のURL” alt=”40年の歴史がある佐藤農家の甘いリンゴ”>
A〜Cの中で、それが最も明瞭的でしょうか。
言わずもがな、Cですよね？
どういった背景をもった画像を挿入するのか？は、オリジナル画像であれば個別で設定すべきです。
- D：<img src=”画像のURL” alt=”1個5,000円の話題の青森県産りんご”>
- E：<img src=”画像のURL” alt=”果物にニコちゃんマークをつけられる器具”>
- F：<img src=”画像のURL” alt=”子供が学校で作成した発泡スチロールのりんご”>
単純に「りんご」だけでも、深く掘ればもっと別の詳細のaltをつけたほうが画像の意味に近づきますよね。
これは、Googleがサイトオーナーに求める「オリジナル性」にも寄与します。
具体的、かつ、オリジナリティであればあるほど希少価値は高くなり評価も高くなるので、面倒臭いかもしれませんが具体的な内容を心がけましょう。
画像の文字にキーワードが含まれる場合はテキスト化推奨
画像は訴求力が高いので、テキストも含めて画像に含めがちです。
しかし、Googleは基本的にテキストで判断するので、キーワードを含んだテキストが画像にある場合は個別でテキスト化したほうが効果的です。
例えば、下記画像のテキストは「家族で楽しいキャンプにでかけよう」という文字が記載されています。
しかし、altにも記載がない場合は「家族で楽しいキャンプにでかけよう」という文字列をGoogleが確実に認識するとは言い難いのです。
テキスト コンテンツに適したテキストを画像または動画に埋め込む。ユーザーはテキストをコピーして貼り付けたいと思うことがあります。また、検索エンジンがテキストを読み取れなくなります。
SEOスターターガイド
極端な例ですが、説明書や図解に文字列をたくさん入れている場合は、同じ内容でもテキストにしてページ内に記載したほうがGoogleの認識が高まる可能性があります。
まとめ
alt属性は、意味のある画像には全て設置することが鉄則です。
また、その際には15〜20文字の明瞭な内容を心がけ、前後の文脈に添った内容がベストです。
使用する画像も極力オリジナル性が高いものを使用することを推奨します。