SEO対策に関する実験やデータ分析などを公開します

SEOラボ

alt属性とは~SEOにおける役割と適切な使い方

2018/01/11 2018/03/15

alt属性の役割をしっかり理解し、適切な使い方でSEO対策を進めることが大切です。

今回は、alt属性の役割と効果、SEOにおけるalt属性の適切な使い方(書き方・付け方)、alt属性の確認方法、alt属性が表示されない件など中心に解説したいと思います。

alt属性とは~SEOにおける役割と適切な使い方

alt属性とは

alt属性とは、画像表示に必要なHTMLタグのimg要素プロパティ(属性)の一つです。

alt属性は、画像の説明(代替テキスト)であり、画像が表示されない場合、alt属性の記述内容が表示されます。

また、画像検索でも使用されるため、alt属性に画像説明(代替テキスト)を適切に記述しておくことが大切になります。

alt属性の「alt」は、「オルト」という読み方になります。
alt属性は、「代替テキスト」の他、「altタグ」「altテキスト」とも呼ばれてます。

alt属性の役割と効果

alt属性の役割と効果が、Google公式サイトで以下のように定義されてます。

alt 属性は、画像ファイルのコンテンツを説明するために使用されます。この属性は、次のような理由から重要です。

  • Google にとって代替テキストは、画像の題材についての有用な情報です。Google はこの情報を使用して、ユーザーのクエリに最適な画像を判断します。
  • 視覚障害がある、スクリーン リーダーを使用する、接続速度が遅いなどの理由から、ウェブページの画像を見ることができないユーザーも多くいます。代替テキストはこのようなユーザーに重要な情報を提供できます。

※引用元:画像 – Search Console ヘルプ

画像にわかりやすいファイル名を付けて、alt 属性の説明を入力します。「alt」属性を使用すると、何らかの理由で画像を表示できない場合の代替テキストを指定できます。

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

もう 1 つの理由は、画像をリンクとして使用する場合、その画像の alt テキストが、テキストリンクのアンカー テキストと同様に扱われることです。ただし、テキストリンクで同じ目的を果たせる場合は、サイトのナビゲーションに画像を使いすぎることはおすすめしません。最後に、画像のファイル名と alt テキストを最適化すると、Google 画像検索のような画像検索プロジェクトが画像を適切に理解しやすくなります。

※引用元:検索エンジン最適化(SEO)スターター ガイド – Search Console ヘルプ

まとめると、alt属性の役割は以下となります。

  • ユーザーのクエリに対して、最適な画像を情報を提供する
  • 画像の題材についての有用な情報を提供する
  • ウェブページの画像を見ることができないユーザーに画像についての情報を提供する
  • アンカー テキストと同様に扱われる(画像にリンクが張られてる場合)

このように、ユーザー対して利便性を高める効果が期待でき、サイトパフォーマンスの向上が見込めます。

SEOにおけるalt属性の適切な使い方(書き方・付け方)

基本的にGoogle検索エンジン最適化スターターガイドに記載がある以下のようなポイントに沿うことで、SEOにおけるalt属性の適切な使い方(書き方・付け方)ができます。

  • alt テキストは短くてわかりやすいものにする(スパムと見なされるような長すぎるものは避ける)
  • alt テキストにキーワードを並べたり、文章全体をコピー&ペーストしない

※引用元:検索エンジン最適化(SEO)スターター ガイド – Search Console ヘルプ

Googleでは、以下のようなパターンに分けてalt属性の適切な書き方を紹介してます。

適切ではない例:
<img src=”puppy.jpg” alt=””/>

適切な例:
<img src=”puppy.jpg” alt=”子犬”/>

最適な例:
<img src=”puppy.jpg” alt=”持ってこいをするダルメシアンの子犬”>

次のような記述は避けてください。
<img src=”puppy.jpg” alt=”子犬 犬の赤ちゃん 小さな子犬 レトリーバー ラブラドール ウルフハウンド セッター ポインター ジャックラッセル テリヤ ドッグ フード ドッグフード 安い 子犬の餌”/>

※引用元:画像 – Search Console ヘルプ

とくに最後のパターンのような書き方は、alt属性に多くのキーワードが詰め込まれてるため「キーワードの乱用」にあたり、Googleガイドライン違反によるペナルティを受ける可能性があります。

重要なのは、「最適な例」かつ「適切な例」にあるような、SEOにおけるalt属性の適切な使い方(書き方・付け方)を実践することです。

alt属性の確認方法

alt属性の確認方法として、以下2つのツールを活用する方法があります。

  • Chrome拡張機能「Alt &Meta viewer」
  • alt属性評価チェックツール

Chrome拡張機能「Alt &Meta viewer」の使い方

画像のalt属性をちゃんと記述してるか?Web上で一括確認できるChrome拡張機能「Alt &Meta viewer」が便利です。

Chromeウェブストアで「Alt & Meta viewer」と検索後、「CHROMEに追加」ボタンをクリックすることで簡単にインストールできます。

Chrome拡張機能「Alt &Meta viewer」

特徴として、画像に設定された Alt または Title 属性をツールチップで表示することができます。

インストール後、Chromeブラウザの右上に「Alt」アイコンが表示されるのでクリックしてみると、以下のように「alt」が設定されてるか否か、簡単に確認することができます。

Alt &Meta viewerで「alt属性」設定確認

alt属性評価チェックツール

alt属性の「文字数」「設置比率」「キーワード出現率」を競合上位10位平均と比較し、確認できる無料SEOツールです。

alt属性評価チェックツール

競合上位サイトのalt属性はどんな状況か?自社サイトと数値で比較確認できるので、SEO対策に役立てることができます。

alt属性が表示されない件

alt属性が表示されない件として、以下2つのケースが多く見受けられます。

  • IE11やIE8のブラウザでalt属性が表示されないようですが、そもそもtitle属性と勘違いしてるケース
    alt属性は、代替テキストであり、画像が表示されないときに代わりに画像の説明をテキストで表示させるために記述しておきます。
    画像にマウスを載せて表示されるツールチップのテキストは、alt属性(代替テキスト)ではなく、title属性で指定します。
    ※参考:alt属性とtitle属性
  • スマートフォンや一部のブラウザでalt属性が表示されないケース
    PCのIE11のブラウザでは表示されるようなので、ブラウザの仕様による原因が考えられます。

HTML5におけるimg要素のalt属性について

W3Cが公開してる「HTML5のimg要素の仕様」では、alt属性を中心とした使い方が厳密に規定されてるようです。
その内容を簡単にまとめたものが以下になります。

longdesc 属性は廃止され、alt 属性がその役割も果たすことになっています。

簡単にまとめると、イメージのタイトルを alt 属性に入れるのではなく、そのイメージが表すものを言葉で説明した文章を入れなさい、ということです。
画像が使われる状況にもよりますが、もし画像が表示されず、文章だけが表示されたとした場合、前後の文章と、そのイメージの alt 属性の文章が、シームレスにつながることが肝要とのことです。
※引用元:alt属性の使い方が厳密に規定されたHTML5のimg要素 « HTML5.JP ブログ

alt属性とtitle属性

画像表示のHTMLタグであるimg要素のプロパティにはalt属性だけでなく、title属性を合わせて使うことも可能です。

alt属性は、代替テキストを記述し、画像の情報を簡潔な文言で記述します。

title属性は、グローバル属性でimg要素以外にも使用でき、HTML5の全ての要素に指定すること可能です。
主に、補足的な情報の記述に役立ち、マウスカーソルを合わせるとツールチップで表示されます。

title属性は、ユーザーの利便性を考慮しながら適切に使うことが大切です。
使い方によって、キーワード(SEOキーワード)の詰め込みすぎなどSEOスパム判定を受ける可能性も秘めてるので、慎重に使い分けしましょう。

まとめると、画像の「alt属性」は検索エンジンやユーザーにわかりやすいように簡潔な内容で記述し、「title属性」はユーザービリティを考慮しながら画像の情報を補足するような文言を記述しておくと良い思います。

alt属性とtitle属性の重複した文言はなるべく避け、それぞれ以下のように役割を意識した記述をしましょう。

記述例

子猫のしぐさ

上記写真にマウスカーソルを載せるとtitle属性の文言「子猫が自分の手をなめてる」がツールチップで表示されます。
画像が表示されない環境では、alt属性に記述した文言「子猫のしぐさ」がテキストで表示されます。

input要素のalt属性について

フォームの送信ボタンなどに使うinput要素では、type属性の属性値「image」を指定した際に、alt属性の記述が必須となります。

記述例

※参考:input 要素 | HTML5 タグリファレンス | W3 Watch Reference

alt属性の文字数

alt属性はどの程度の長さで書けばよいか?明確な文字数は決まっておらず、簡潔な文言で記述することが、検索エンジン最適化スターターガイドに以下のように記載されてます。

簡潔でわかりやすいファイル名と alt テキストを使用する

最適化の対象となるページの他の部分と同様に、ファイル名と alt テキストは短くてわかりやすいものが適しています。

※引用元:検索エンジン最適化(SEO)スターター ガイド – Search Console ヘルプ

文章全体をコピーしたり、キーワードを羅列することで、文字数が多くなり簡潔な文言としては程遠い内容となるため、検索エンジンやユーザーにとってより分かりずらいものとなってしまいます。

なので、画像の情報を短い文言でまとめて、認識されやすいalt属性を記述しながら、文字数をなるべく抑えることが重要です。

まとめ

適切にalt属性を記述し、効果的な画像コンテンツにしましょう。

認識されやすいコンテンツにし、ページの質を上げながら、SEO対策を進めることが重要です。

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

カテゴリから記事を探す