画像を含むいろいろなものの説明文を記載できるtitle属性と、画像の説明文を記載できるalt属性。 どちらもユーザーに正しく情報を伝えるための属性ですが、両者を混同しているケースをよく見かけます。 ここでは両者の用途とSEO的な効果について見ていきましょう。
title属性はどんな要素にも含めることができます。 そして、ページ上でtitle属性を含んだテキストなどにカーソルを当てると、吹き出し（コメントチップ）を表示してくれます。 ＜span title=”新作ゲームソフト”＞SEO業者 VS Google＜/span＞ 上記のように記載すれば、「SEO業者 VS Google」というテキストにカーソルを当てた時、「新作ゲームソフト」というコメントが表示されます。 実際にはこんな風に表示される 上コードは、テキストとして表示するために「＜」と「＞」を全角表記していますが、実際には以下のように表示されます。 「SEO業者 VS Google」の部分にカーソルを当ててコメントが表示されることを確認してみてください。 SEO業者 VS Google alt属性と並べて設置できる 画像の説明の際にはalt属性と並べて設置することが可能です。 alt属性の内容は「画像の内容を理解出来る説明」でしたがtitle属性の内容は「補足的な説明」としての面が強いです。 SEO対策として見た場合 alt属性よりもさらに重要度は低いです。 また、記載しすぎるとカーソルを移動させるたびにコメントチップが表示されてしまい、見づらくなることもあります。 不要な場合はalt属性と違って省略することに問題はありません。
基本的に画像の説明をするのに使います。 ＜img src=”画像のURL” alt=”URLの画像の説明”＞ 上記のように表示する画像の説明を記載するのがalt属性の正しい使い方です。 ※上記コードは、テキストとして表示するために「＜」と「＞」を全角表記しています。 画像中の内容が文字ならば、alt属性にもその文字を、画像中の内容が商品の写真や、店内の様子であれば、商品名や「○○店の店内写真」などの端的な説明を記載します。 alt属性の説明文は、ブラウザを使うユーザーが画像を表示できない環境（画像を認識できない環境）にあるときに、代わりに表示されるテキストにもなるので、アクセシビリティ（どんな条件のユーザーでも使いやすいかの指標）の 面で大変有効です。 スクリーンリーダーという画面の文字を読み上げてくれるソフトがありますが、画像にalt属性による説明文が記載されていればその内容も読み上げます。 視覚障がい者の方がこのソフトの主な利用者ですから、そういった面でも重要であるといえます。 alt属性をSEO対策として見た場合 クローラー（ウェブ上にあるあなたのサイトやその他の情報をデータ化するロボット）は画像の内容をそのままでは認識できないので、クローラーに画像の内容を教えるという意味があります。 alt属性による記載が上位化に繋がるかどうかでいえば重要度は低いですが、前述のようにアクセシビリティの面では有効なので、画像には極力正しいalt属性を設置しましょう。 alt属性使用の際の注意点 ・空白画像にはalt属性を alt=”” のように何も書かずに記載します。 alt属性を省略しないことはHTMLの構造的に見た場合に正しいです。 以下のようなケースではalt属性を省略できます。 ・自動取得や自動生成、ユーザー投稿などのimgタグの画像で、title属性による説明がある場合。 ・見出し内の内容がimg要素だけの場合 ・figcaptionタグ（画像の内容を画像の下部などに表示するタグ）を含む figureタグ（タグ内の内容が図表だと示すタグ）内に imgタグがある場合。 ・キーワードや無意味な文字列の羅列はスパムとして判断される場合もあるのでやめましょう。 ・文字数の制約はGoogleから明言されていませんが、簡潔な説明を心がけましょう。 ※alt属性は＜img＞タグの他にも＜area＞、＜applet＞などにもつきますが、今回は主要な用途に絞りました。
・alt属性は画像の説明をするものでできるだけ記載した方がいい ・title属性はどんな内容の説明もできるが省略しても問題はない ということになります。 これらの属性を使用する際は、ぜひ正しい記載を行ってアクセシビリティ向上にも貢献してください。 ありがとうございました。
