alt属性とは?seo対策に効果のある書き方を解説
そこで、本記事では「SEOに効果的なalt属性の使い方」「alt属性の書き方」「alt属性を設定する時の注意ポイント」などをご紹介します。
alt属性のSEO効果や正しい書き方などを詳しく解説しますので、これからSEO対策を始める方はぜひ参考にしてみてください。
- SEOに悩むサイト担当者必見!世界最高水準のテクニカルSEOツール「Lumar」
-
URLを入れるだけでサイト内部の問題を一括検出。
Googleと同じ視点でサイトクロール、
大規模サイトでも手軽に高度なSEO分析ができます!まずは無料デモクロールを試して、あなたのサイトの問題点を一括検出!
alt属性とは
alt属性のaltとは、「alternative(代替)」を意味する言葉で、alt属性はWebページ上で画像の代わりになる代替テキストを指します。
Webページで画像が表示されないときに代わりにテキストを表示することで画像の内容を説明したり、スクリーンリーダーによる読み上げ時にはalt属性で指定したテキストが読み上げられます。
検索ブラウザのクローラーに画像の内容を伝える役割もあるため、alt属性には画像を的確に表現するような記述をすることが重要です。
SEOに効果的なalt属性の使い方3つ
- 画像の代替テキスト
- 検索エンジンが画像を理解する
- 画像のアンカーテキスト
alt属性には、直接的なSEO効果はありませんが、正しく使うことで間接的なSEO効果があります。
SEOに効果的なalt属性の使い方は、「画像の代替テキスト」「検索エンジンが画像を理解する」「画像のアンカーテキスト」の3つです。
では、具体的な使い方をそれぞれ見ていきます。
1. 画像の代替テキスト
alt属性を記述することで、ネットワーク環境のトラブルなどにより画像が表示されない場合に、画像の代わりにテキストが表示されるようになります。
また、alt属性は視覚障がい者に対する補助テキストにもなります。視覚障がい者の方は音声読み上げ機能を使って画像の内容を理解するため、alt属性を設定することで視覚障がい者の方にも画像の内容を正確に伝えることが可能です。
このように、alt属性を画像の代替テキストとして使うことで、ユーザビリティの高いコンテンツとなります。その結果、Googleの評価も得やすく、間接的なSEO対策になるのです。
2. 検索エンジンが画像を理解する
本来、検索エンジンのクローラーは画像の内容を読み取ることはできません。しかし、alt属性を記述することで、クローラーが画像の内容を理解することができます。
結果として、検索エンジンの画像検索機能などにより、alt属性を記述した画像が検索結果に表示される可能性があります。そのため、alt属性には画像と整合性のある内容を記述することが重要です。
3. 画像リンクのアンカーテキスト
アンカーテキストとはリンクが設定されたテキストを指します。アンカーテキストは、ユーザーだけでなく検索エンジンのクローラーも参照するため、内部SEO対策として有効です。
テキストからリンクさせる場合にはアンカータグ(<a>〜</a>)で囲んで記述しますが、画像からリンクさせる場合には、alt属性に記述します。
画像にリンクを設置するときは、画像の内容を簡潔にまとめた文章をalt属性に設定してください。
alt属性とtitle属性の違い
<img src=”icecream.jpg” alt=”美味しそうなアイスクリーム” title=”今にも溶けそう”>
img要素(image)によく使われるプロパティとして、「alt属性」「title属性」があります。どちらも画像を説明するために設定するものですが、それぞれの用途は異なります。
上述の通り、alt属性は画像の内容を説明する代替テキストとして用いられるのに対して、title属性は必要に応じてコメントで画像やテキストの補足説明を行うために用いられます。
例えば、アイスクリームの画像にこれらの属性を設定する場合、alt属性なら「美味しそうなアイスクリーム」、title属性なら「今にも溶けそう」のように記述します。いずれもアイスクリームの画像を説明している点は同じですが、title属性の方が補足的な意味合いが強く、比較的SEO効果は低いです。
混同しやすいですが、それぞれの用途やSEO効果を理解した上で使用するようにしてください。
alt属性の書き方
△:alt=”アイスクリーム”
◎:alt=”美味しそうなアイスクリーム”
alt属性を設定するときには、画像に写っているものの名称ではなく、画像を使って何を表現したいのかを記述する方が効果的です。
先ほどのアイスクリームの例で考えてみると、alt属性に「アイスクリーム」と写っている対象を単純に記述するだけでは、どのようなアイスクリームなのかがクローラーに伝わりません。「美味しそうなアイスクリーム」など、画像で表現している内容がよりわかりやすいように記述することで前後の文脈と画像の関係性も明確になります。
画像の内容を端的かつ的確に表すように記述するのが大事です。
alt属性を設定する時の5つの注意ポイント
- 具体的な内容を簡潔に記述する
- モバイルページにも設定する
- キーワードを詰め込みすぎない
- 装飾目的の画像の場合はalt属性を設置しない
- タイトル・見出し・リンクの場合は必ずalt属性を記述する
alt属性を使用するときに注意するべきポイントがあります。
SEOに効果的なalt属性の記述のコツや、使用しない方がよい場合など、5つご紹介します。
1. 具体的な内容を簡潔に記述する
alt属性には、画像の具体的な内容を簡潔に記述するようにしてください。
画像を文章に挿入する場合には、文脈に合った画像が用いられるのが基本です。画像を通して表現したい内容をクローラーに伝えることで、SEO効果を高めることが期待できます。
一方で、情報を詰め込みすぎると、何を伝えたいのかがわかりにくくなってしまい逆効果です。画像で表現したい内容は、簡潔明瞭に書く必要があります。
2. モバイルページにも設定する
通常のWebページとは別に、モバイル用のページも用意している場合には、そちらのページにもalt属性を記載するようにしてください。
Googleにはモバイルファーストインデックス(MFI)という評価基準があるため、モバイル向けのページを用意すると検索順位が上がりやすくなります。
一方で、alt属性を画像に設定していないモバイル向けのページは多く、Googleも警鐘を鳴らしています。
モバイルファーストインデックスではモバイル向けのページが評価対象になるため、alt属性を設定し忘れると検索順位に大きな影響を与えかねません。
モバイル向けページにも必ずalt属性を設定するようにしてください。
3. キーワードを詰め込みすぎない
alt属性にキーワードを詰め込みすぎると、Googleから思わぬペナルティを受けるリスクがあります。
画像の内容をより具体的に伝えるために、alt属性にキーワードを入れすぎると、かえって内容がクローラーに伝わりにくくなってしまいます。
最悪の場合、スパム行為とみなされてしまい、Googleの品質ガイドラインに抵触するコンテンツとしてペナルティを受けかねません。ペナルティを受けるとWebサイトの検索順位の著しい低下やインデックスの削除対象となり、検索順位に大打撃を与えてしまいます。
1つのalt属性に入れるキーワードは2〜3個程度、文字数は20〜40文字程度におさえておくと安心です。
4. 装飾目的の画像の場合はalt属性を設置しない
文章に挿入する画像には、読み手の理解を促す意図のものと単なる装飾目的のものがあります。背景画像など装飾目的の画像であれば、alt属性は空(空白)にします。
ただし、「<img src=”line.jpg” alt=””>」のように「alt=””」は必ず記載してください。
alt属性そのものがないと、視覚障がい者の方が音声読み上げ機能を使ったときにファイル名が読み上げられる可能性があります。
「alt=””」のように中身を空白にし、alt属性自体は記述するようにしてください。
5. タイトル・見出し・リンクの場合は必ずalt属性を記述する
タイトル・見出し・リンクが画像である場合には、必ずalt属性を記述してください。これらの要素は評価基準の中でも重要な位置を占めるため、クローラーに認識されないと検索順位に大きな影響が出てしまいます。
タイトルや見出しの場合には「<img src=”juyo.jpg” alt=”タイトル:重要なこと”>」のように画像内のタイトル文字と同じものを記述します。
リンクの場合にはalt属性を設定することで、テキストリンクと同じようにアンカーテキストとして使用できます。
タイトル・見出し・リンクの評価はSEO対策上なくてはならないものです。クローラーがしっかり内容を把握できるように、忘れずにalt属性を設定してください。
alt属性の確認方法2つ
- Googleの検証機能を使う
- Chrome拡張機能「Alt&Meta viewer」を使う
alt属性を確認する方法は「Googleの検証機能を使う方法」「Googleの拡張機能を使う方法」の2通りあります。
それぞれについて具体的な確認手順も含めて解説します。
1. Googleの検証機能を使う
Googleの検証機能を使う確認手順は以下の通りです。
- Google Chromeをブラウザにし、alt属性を確認したいページを表示する
- マウスの右クリックし、「検証」を開く
- ソースコードから、確認したい画像のコードを探し、alt属性の記述があるかを確認する
このように、特別なツールを使わずに確認することが可能です。
2. Chrome拡張機能「Alt&Meta viewer」を使う
Chrome拡張機能である「Alt&Meta viewer」を使う方法もあります。具体的な確認手順は以下の通りです。
- Googleウェブストアから「Alt&Meta viewer」をインストールする
- ブラウザの右上の「Alt」をクリックし、alt属性を確認する
「Alt&Meta viewer」は無料の拡張機能なので、手軽に試してみることができます。
まとめ
alt属性はWebページに挿入した画像の内容を代替する役割があり、正しい記述をすることで間接的なSEO効果が期待できます。
alt属性を記述するときには、画像の内容を簡潔明瞭に表現することが重要です。短すぎても長すぎても、画像を用いた意図が伝わらなくなってしまいますので、2〜3個程度のキーワードで記述するようにしてください。
Webサイトにalt属性が正しく設定されているかわからない場合には、Googleの検証機能や拡張機能を使えば簡単に調べることができます。
もし設定が間違っていた場合には、ぜひ本記事で解説したポイントを参考に修正してみてください。
- SEO対策でビジネスを加速させる
-
SEO対策でこんな思い込みしていませんか?
- 大きいキーワードボリュームが取れないと売上が上がらない・・
- コンサルに頼んでもなかなか改善しない
- SEOはコンテンツさえ良ければ上がる
大事なのは自社にあったビジネス設計です。
御社の課題解決に直結するSEO施策をご提案します