コンテンツ内に画像を設置するとき、alt属性をうまく活用できていますか?alt属性は、適切な使い方をすることでSEO対策に影響するほど重要な要素です。
今回は、alt属性の役割と正しい書き方を徹底的に解説します。alt属性を正しく使いこなして画像を最適化し、コンテンツの質を高めましょう。
alt属性とは
alt属性とは、画像に対してテキストと同様の情報をユーザーやクローラーに説明する属性のことです。altタグと呼ばれることもありますね。
HTMLのimgタグの要素のひとつで、画像が読み込めずうまく表示されなかったときにalt属性の記述内容がテキストとして表示されます。いわば代替テキストのことです。
HTML上では、下記のように記述します。
“alt”のことを、「アート」や「アルト」と読む人がたまにいますが、正しくは「オルト」と読みます。Webを担当するものとして、恥をかかないようにしっかりと覚えておきましょう。
alt属性の役割
alt属性を最適化することは、コンテンツの質を向上させるうえでも非常に重要です。alt属性がどんな役割を担っているのかを詳しく解説しますね。
画像が表示されなかった際に、テキストとして表示させる
コンテンツ内にある画像がなんらかの問題でうまく表示されなかった経験はありませんか。alt属性を設定しておくことで、その画像がなにを表しているかをテキストでユーザーに伝えてくれます。読み込めなかった画像の正体を知ることができるので、ユーザーにとってありがたいですよね。
また、音声読み上げブラウザでも役割を発揮します。画像の内容を読み上げる際にalt属性に記述されたテキストを読み上げてくれるので、こちらが意図している通りにユーザーに伝えることができます。
画像検索に表示される
alt属性を設定しておくことで、GoogleやYahoo!の画像検索結果にあなたのサイトの画像が表示されることがあります。画像検索結果に表示されると、そこからサイトへの流入の可能性が出てくるため、非常にありがたいですよね。そのためには、画像とalt属性に記述するテキストに相違がないことが重要です。
このように、alt属性にはユーザビリティを向上させる役割があります。
SEOに強いalt属性の書き方
alt属性の役割について理解できたと思いますが、SEO対策との関係性が気になりますよね。Googleが公式に回答しているalt属性の正しい使い方を紹介します。
簡潔でわかりやすいテキストを設定する
alt属性に設定するテキストは、画像の内容が簡潔に伝わるようなものにしましょう。キーワードのみではなく、文章で記述することをオススメします。
例えば下の画像の場合、「alt=”野球 少年“」ではなく「alt=”ボールをキャッチする野球少年“」と記述したほうが画像の内容がイメージしやすいですよね。
声に出して読み上げた時に、画像の内容が一発でイメージできるかどうかを意識してみるといいかもしれませんね。またalt属性で詳細情報を書きすぎて長文になってしまうと、スパムとみなされて逆に低評価を受ける可能性があるので注意しましょう。
キーワードの乱用やコピペは避ける
キーワードを大量に記述したり、文章全体をそのままコピー＆ペーストする行為はスパムとしてとらえられる可能性があるので絶対に避けましょう。
上の画像の場合、下記のようなalt属性はキーワードの乱用に当たります。
「alt=”野球 少年 ボール バット 空 グランド 帽子 男の子 ベースボール 土 キャップ イチロー“」
あくまで、”ユーザーが分かりやすい”を意識する。これを忠実に守りましょう。
まとめ
alt属性を最適化することで、サイトのユーザビリティを高めることができます。これまでalt属性を設定していないかったり簡潔なテキストを記述できていない場合は、今すぐサイト内にある全ての画像を最適化して、サイトの評価を高めましょう！