＊勉強中の為、間違った解釈を説明すると思いますので、ご指摘コメントもお待ちしておいります。
代替テキストとは？alt属性
代替テキストについて考えていきます。SEO対策やユーザーアクセシビリティにも良いので必ず入れるようにしましょう。
1.代替テキストとは
代替テキストとは画像（imgタグ）の内容を文字によってあらわすことです。
入れ方はalt=”ここに画像の代わりの文字を入れる”です。
例・画像が富士山の写真だったら
<img src="画像へのパス" alt="富士山の景色"/>
となります。
代替テキストを入れるメリットを紹介します。
①アクセシビリティに良い。アクセシビリティとは簡単に説明すると思いやりです。見ている人に親切に作ったりすることです。代替えテキストを入れていくと目の不自由な方が音声ブラウザを利用してホームページを見る場合、代替えテキスト（alt）の部分が読み上げられます。このようにすべての方に利用しやすく作ることをアクセシビリティといいます。
②SEO対策に良い。グーグルの検索ロボット（いいホームページか悪いホームページがチェックする機械）が皆さんが作ったホームページを見に来たときに代替テキストを入れておかないと配置されている画像（img）がなんなのか理解できません。先ほど画像が富士山の写真だったらと説明しましたが、私たち人間は写真を見たときに富士山の写真とわかりますが、グーグルのロボットはaltを入れておかないとそれが何の画像か認識しないとされています。なので代替テキストをいれてグーグルのロボットにも意味をちゃんと教えてあげる必要があります。
注意点
代替えテキストはSEOに良いと書きましたが、入れ方に少し注意が必要です。
代替えテキストに画像とは関係のない言葉を入れたり、キーワードを詰め込んだりすると、ペナルティ（グーグルから反則行為とみなされる）ことがあるのでやめましょう。
代替えテキストには適切な（画像の意味にあった）テキストを入れるようにしましょう。
意味のない画像には入れなくていい。
意味のない画像とは→の画像だったり飾りに使用している画像のことです。このように特に意味を持たない画像には代替えテキストを入れなくてよいです。
W3Cチェックなどでエラーが出るのが嫌な方は、背景にしたりalt=”*”アスタリスクを入れるといいと思います。
*W3CチェックとはHTMLの書き方とか記述間違いをチェックしてくれるものです。
W3Cチェックはこちら
2.画像とテキストの使い分け
画像とテキストの使い分けを個人的に説明したいと思います。
SEO的に重要な文字はテキストで書くというのが一般的です。基本ホームーページに記載されているのはすべて重要だと思います。ではすべてテキストで書くのかといえば難しいでしょう。たしかに文字だけでホームページを作成するとSEO的に評価は高いかもしれませんが見ている人が文字だけのサイトに興味もってくれるとは考えずらいからです。
ウィキペディアのように文字だけでも有名で閲覧数の多いサイトがありますが特別だと思います。
テキストばかりではなく、画像も使って見やすく、おしゃれに作成したほうが閲覧数も増えると思います。
ここで注意が必要ですが、ホームページを作り始めのころは画像ばかり使う傾向にあると思いますのでテキストとのバランスをうまくとりましょう。確かに画像はカッコよく見えるし、代替えテキストを入れておけば良いと思うかもしれませんが、やはりテキストで文字を書いたほうが評価が高く、画像をあまり使いすぎると表示速度が遅くなったりもしますので注意が必要です。
このテキストと画像のバランスがWebデザイナーの腕の見せ所になってくると思いますのでいろいろ考えて作成していきましょう。
3.title属性
代替テキスト(alt属性)に似たものでtitle属性の紹介もしておきます。
title属性は代替テキストと違い必須ではありませんが、こちらもアクセシビリティやSEOに効果があるといわれているので、要所要所で使っていきましょう。
title属性を記述すると記述したタグの上にマウスポインタが来たときにポップアップヒントを出します。
入れ方はtitle=”マウスポインタが来たときにポップアップヒントで出したい文字”
例・画像が富士山の写真だったら
<img src="画像へのパス" alt="富士山の景色" title="富士山の景色"/>
のように記述します。
＊属性と属性の間は半角スペースを必ずあけてください。
下記の富士山の写真の上にマウスを持って行ってください。title="富士山の景色"を入れていますので、ポップアップヒントで富士山の景色とでます。
ホームページ作成に慣れてきたら上記のようにアクセシビリティやSEOも意識してより良いホームページを作れるよう頑張っていきましょう。
コメントを残す