こんにちは。こはくです。
今回は、
「画像のalt属性」
についてお話します。
先日、こちらの記事で、内部リンクについて触れてきました。
その際に、画像リンクを入れる際にalt属性について触れたので、今回は更に詳しくalt属性について見ていきます。
alt属性とは
まずはじめに、alt属性とは何かを説明します。
altは、HTMLにおける詳細を定義する物
altは、HTMLのタグの中に入れる属性（パラメータ）の1つです。
属性には様々な種類があり、例えば、画像を貼るときは
<img src=”xxxx.jpg” />
のように、記載します。
このsrcも属性で、画像の保存場所を指し示すものになります。
そして、alt属性は先程のimgタグに入れる事の出来る属性で、
「画像の内容をテキストで表すと・・・」
というようなものになります。
alt属性は、
area、applet、inputなどでも使うことが出来ますが、一般的には画像に使う物と言われています。
altとtitleとの違い
次に、意味を混同しやすい属性としてtitle属性があります。
title属性は、altと違い、ほとんどのタグで利用できるもので、
「注釈」
のようなイメージで使われます。
title属性に入れた文字は、その要素の上にマウスが来た時に表示されます。
マウスが乗ると説明文が出てくるあれですね。
ただ、最近はスマホ向けの対策が一般的で、マウスホバーという概念がなくなりますから、利用価値はどんどんと減っているのではないかと思います。
altはSEOに効果あり？alt属性を入れるメリット
では、次にaltはSEO的に効果があるのか、そしてそれを入れるメリットは有るのか。
これについて見ていきましょう。
SEO効果
SEOの効果としては
「大きく貢献するかはわからないものの、多少の効果は期待できる」
位の位置づけです。
Googleのクローラーがサイトを巡回する際、画像の情報もタグから読み込みます。
クローラーは、画像の中身を見るというよりは、タグなどから記事の評価をしている可能性が高いです。
そのため、alt属性などを見た上で
「この記事に関連性のある画像か否か」
を判断していると考えられます。
反対に、
「大量に画像は貼られているが、これが本当に記事にとって意味のある画像かわからない」
このような状況だと、巡回するクローラーとしても、混乱してしまいそうですよね。
画像読み込み失敗時に役立つ
最も一般的な認識としては、画像の読み込み失敗時に、画像の代わりに文字が出ますが、それがaltに入れた内容です。
画像の読み込みに失敗すると、読み込みエラーの小さいアイコンが表示されるだけ・・・というサイトもありますが、altで
「ここには元々、〇〇という画像が入っていますよ」
という事がわかれば、ユーザーとしても利便性が高まります。
ユーザーの読み上げ機能
次に、alt属性は、ユーザーが利用する読み上げ機能で、画像部分を読む際に利用されます。
どんどんテクノロジーが発達していて、ユーザーが利用する頻度が高まれば、alt属性の評価も上がる可能性があります。
画像検索利用時にも影響
Googleやyahooで、ネット検索をした際、検索結果の上部に
「ウェブ」や「画像」
などが表示されます。
どのようなカテゴリで検索をするのかを示していますが、この画像での検索の場合に、altタグの内容が検索対象になります。
そのため、少しでもアクセスを増やす上では、設定しておいた方が良いでしょう。
HTMLでのaltの正しい入れ方
では、具体的にaltはどの様に入れるのか。
記述としては次のようになります。
<img src=”xxxx.jpg” alt=”説明したい内容や検索キーワード” />
キーワードの入れすぎに注意
先程もお話したように、画像検索などで利用されるため、大量にキーワードを入れる人もいるでしょう。
ですが、キーワードの入れすぎは避けるべきで、むしろ最小限の短い文章にするのが良いと考えられます。
理由は、関連性の低いキーワードも入れると、評価が悪くなる可能性（ブラックハットSEO）もありますし、前述した読み上げ機能を阻害する可能性があります。
画像の内容を的確に
更に、今後は画像をAIで分析するという機能が、各SNSなどでも利用される様になりましたが、更に発展すれば、Google側がタグだけではなく、画像そのものを評価する可能性もあるでしょう。
そうなると、Googleが認識した画像内容と、かけ離れたキーワードの場合に、評価が下がる・・・なんてことも考えられそうです。
altを入れない方が良いケース
最後に、altを入れない方が良いケースについてお話します。
それは、
「意味のない装飾画像」
です。
例えば、ランキング形式で商品紹介をするような記事。
この時に、1位のところに金色の王冠マークを入れたとします。
しかし、この王冠は単に装飾をしているだけで、特に記事の内容そのものとは関連していません。
なので、入れない方が適切だと考えられます。
理由は、意味のないaltを多量に入れれば、それをクローラーがいちいち確認します。
結果的に
1.全く関連のないキーワードで検索上位に上がってしまう
2.離脱率が高くなるORクリック率が非常に低い
3.ページの評価が下がる（多いとサイトの評価も下がりかねない）
という状況も考えられるからです。
まとめ
今回は、HTMLにおけるalt属性について見てきました。
細かいタグ設定は、重要ですがまずはコンテンツの質を高めることに注力したいですね。
このサイトでは、副業やWEBライターに必要な知識、マーケティングを中心に話をしています。
他の記事を読んで頂ければ、更に知識が深まるかと思います。
また、この記事を書くきっかけになった
こちらの記事も、是非参考にしてみてください。
