画像タグにつける属性「alt」「title」の違いとSEO効果

HTMLタグとしてのaltとtitle

alt属性 ＝ alternative (代替)

HTMLタグの属性alt属性は、英語のalternativeの略で日本では代替テキストと呼ばれます。

同じ画像タグに付与する属性でいうと、幅を指定する「width」、高さを指定する「height」がありますが、altに付いては「画像が閲覧できない環境でも、画像に関する情報が理解できるようにする」ためのものです。

つまり、ブラウザが画像に対応していない、視力に問題があるなど、画像を閲覧できない場合でも、画像の情報を文章で伝えることできるようにするものです。

多少の誤解を恐れずにいうのであれば「alt属性は画像の説明文」と覚えておけば良いでしょう。

title属性 ＝ 補足情報

一方で、title属性は「その要素に補足情報を付け足す属性」です。

ブラウザでの具体的な動きでいうと、タイトルタグを付与した要素は、ブラウザでマウスオーバー（マウスのポインターを上におく）とツールチップでその内容が表示されます。

例えば、

<a href="/seo/" title="SEOに関するページのまとめ">SEO</a>

とすることで、ユーザーにその要素に関する補足情報を伝えることができます。

「title属性はツールチップのための属性」と覚えておけば良いでしょう。

SEOの観点からみたaltとtitle

alt属性 ＝ プラスにはならないけどマイナスにはなるかも

ページSEOにおけるalt属性の効果は、プラスの意味ではほとんどないと言われています。逆に、画像にalt属性がない場合や、alt属性にSEOで攻めたいキーワードを詰め込みすぎることでマイナス評価になることはあるので、alt属性の使い方には注意が必要です。

一方で、画像検索においてはalt属性はSEO効果を発揮します。というのも、Googleの検索エンジンが画像検索用のインデックスを作成する際に、alt属性の情報を参考にしていると言われているためです。

title属性 ＝ 何も影響を及ぼさない

SEOにおいて、title属性はほぼ影響を与えないとされています。

title属性はどんな要素にも付与できるため、SEOで評価を与えてしまうとSEOハックが比較的簡単にできてしまうため、そのような措置がされているのでしょう。

img（画像）タグでのalt・titleの使用例

上記を踏まえて、alt・titleタグの使い方の例をみていましょう。

例えば、下記のような文脈の中で画像があったとします。

スマートフォンの保護に、保護効果が高いガラスフィルムは必須と言えます。

ただし、ガラスフィルムを貼ったからと言って液晶ディスプレイを100%保護できるのかと言えばそうではありません。衝撃が本体の液晶画面にまで届いてしまうと、ガラスフィルムと一緒に液晶フィルムも割れてしまいます。

<amp-img src="/imgs/topics/wq4ivutv8v-1.jpg" width="799" height="527" layout="responsive" title="画像をクリックすると拡大画像が開きます" alt="例えば、この画像のスマートフォンはガラスフィルムを貼っているのにスマートフォンの液晶画面まで割れてしまっています。">

この場合は、画像タグは下記のように書くと良いでしょう。

<img
 src="/imgs/topics/wq4ivutv8v-1.jpg"
 width="799"
 height="527"
 title="画像をクリックすると拡大画像が開きます"
 alt="例えば、この画像のスマートフォンはガラスフィルムを貼っているのにスマートフォンの液晶画面まで割れてしまっています。" />

alt属性には画像の説明文を、title要素にも「画像をクリックしたら拡大する」という付加情報を入れています。title属性はなくても問題ありませんが、alt属性は画像の説明を入れることで、画像SEOへの効果が見込めます。

また、alt属性として正しいかは、「画像なしでも意味が通じるか」という点なので、alt属性をそのまま文章にして成立するかをみていけばOKです。

スマートフォンの保護に、保護効果が高いガラスフィルムは必須と言えます。

ただし、ガラスフィルムを貼ったからと言って液晶ディスプレイを100%保護できるのかと言えばそうではありません。衝撃が本体の液晶画面にまで届いてしまうと、ガラスフィルムと一緒に液晶フィルムも割れてしまいます。

例えば、この画像のスマートフォンはガラスフィルムを貼っているのにスマートフォンの液晶画面まで割れてしまっています。

文章として成立しますね。

alt・title属性の違いまとめ

属性	HTMLとして必須か	SEO効果
alt	◎	▲
title	-	-

正しいHTMLとしては「画像タグにalt属性は必須」ですが、SEOにおいてはHTMLとしての正しさは重要でないと言われている（というよりも、多くのサイトでHTML的には間違っていると言われている）ので、alt属性を空白にするくらいなら、alt属性は入れないほうが良いでしょう。

ただし、画像SEOのことも考えると、全ての画像にalt属性を入れるのは面倒ではありますが、入れておいたほうが良いでしょう。

title属性はSEO効果はありませんが、上記の例のようにUI（ユーザーインターフェイス）としての効果は高いので、使いどころを見極めて入れると良いでしょう。

---

画像タグにつける属性「alt」「title」の違いとSEO効果についてみてきました。

しっかり確認すれば、それぞれ意味も使い方も全く違うことがわかります。正しい使い方をすれば、サイトをより良いものにできるので、積極的に利用すると良いでしょう。